/* ORACLE — the look of prototype/tarot.html, shared by every page. Fonts are served from here. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-400-normal-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; }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-400-italic-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; }
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-sc-400-normal-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; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-normal-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; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/spectral-500-normal-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; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/spectral-500-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-italic-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; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-italic-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Layout: one candlelit column; the spread of three cards is the stage, the fan and the reading unfold beneath it. Single dark look by design. */
:root {
  color-scheme: dark;
  --table: #16111d;      /* velvet tablecloth */
  --velvet: #211829;     /* raised surfaces */
  --line: #3a2d45;       /* hairlines */
  --gilt: #c8a463;       /* brass and gold leaf */
  --gilt-dim: #7d6942;
  --bone: #ede3d1;       /* card stock */
  --ink: #6b1e2c;        /* oxblood printing ink */
  --text: #e8e0d2;
  --muted: #a69cae;
  --display: "IM Fell English", "Spectral", "Iowan Old Style", Georgia, serif;
  --display-sc: "IM Fell English SC", "Spectral", "Iowan Old Style", Georgia, serif;
  --body: "Spectral", "Iowan Old Style", Georgia, serif;
}
html { background: var(--table); }
body {
  background: var(--table);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(200, 164, 99, 0.16), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(107, 30, 44, 0.18), transparent 70%);
  animation: flicker 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.82; }
  55% { opacity: 0.95; }
  70% { opacity: 0.86; }
}
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.eyebrow {
  margin: 0;
  font-family: var(--display-sc);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--gilt-dim);
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.1;
  color: var(--text);
  text-wrap: balance;
}
.credits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--gilt-dim);
  border-radius: 999px;
  font-family: var(--display-sc);
  letter-spacing: 0.06em;
  color: var(--gilt);
  font-variant-numeric: tabular-nums;
}
.credits svg { width: 14px; height: 14px; fill: var(--gilt); }
.pricing {
  margin: -10px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Question panel */
.ask { display: flex; flex-direction: column; gap: 10px; }
.ask label {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text);
}
textarea, select, input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
textarea { resize: vertical; min-height: 3.2em; }
textarea::placeholder, input::placeholder { color: var(--muted); opacity: 0.8; }
textarea:focus-visible, select:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row select { width: auto; flex: 0 0 auto; }
.btn {
  font-family: var(--display-sc);
  font-size: 1rem;
  letter-spacing: 0.08em;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--gilt);
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.btn.primary { background: var(--gilt); color: var(--table); }
.btn.primary:hover { background: var(--bone); border-color: var(--bone); }
.btn.ghost { background: transparent; color: var(--gilt); border-color: var(--gilt-dim); }
.btn.ghost:hover { border-color: var(--gilt); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn .cost {
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0;
  opacity: 0.75;
  margin-left: 6px;
}

/* The spread */
.spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.slot { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; perspective: 900px; }
.card {
  position: relative;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 3 / 5;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card.flipped { transform: rotateY(180deg); }
.face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.backart {
  background-color: var(--velvet);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(200, 164, 99, 0.14) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(200, 164, 99, 0.14) 7px 8px);
  border: 1px solid var(--gilt-dim);
  box-shadow: inset 0 0 0 4px var(--velvet), inset 0 0 0 5px var(--gilt-dim);
  display: grid;
  place-items: center;
}
.backart svg { width: 46%; fill: none; stroke: var(--gilt); stroke-width: 2.5; stroke-linejoin: round; }
.face.front {
  transform: rotateY(180deg);
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.front .inner {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(107, 30, 44, 0.45);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  transition: transform 0.5s;
}
.slot.rev .front .inner { transform: rotate(180deg); }
.front .num { font-family: var(--display-sc); font-size: clamp(0.75rem, 3vw, 1rem); letter-spacing: 0.08em; }
.front svg {
  width: 72%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.front .nm {
  font-family: var(--display-sc);
  font-size: clamp(0.62rem, 2.6vw, 0.85rem);
  text-align: center;
  line-height: 1.15;
  text-wrap: balance;
}
.slot figcaption { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos { font-family: var(--display-sc); letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gilt); }
.cname { font-size: 0.85rem; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.cname .rv { display: block; font-style: italic; color: var(--gilt-dim); }

.hint {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  min-height: 1.6em;
}

/* The fan */
.fan-wrap { overflow: hidden; transition: opacity 0.5s; }
.fan-wrap.leaving { opacity: 0; }
.fan { position: relative; height: 200px; max-width: 420px; margin: 0 auto; }
.fcard {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 62px;
  height: 104px;
  margin-left: -31px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  transform-origin: 50% 165%;
  transform: rotate(0deg) translateY(30px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}
.fcard svg { width: 52%; }
.fan.dealt .fcard { transform: rotate(var(--r)) translateY(var(--lift, 0px)); opacity: 1; }
.fan.dealt .fcard:hover, .fan.dealt .fcard:focus-visible { --lift: -14px; }
.fan.dealt .fcard.taken { --lift: -60px; opacity: 0; pointer-events: none; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.actions:empty { display: none; }

/* The reading */
.reading { border-top: 1px solid var(--line); padding-top: 6px; }
.reading h3, .msg h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--gilt);
  margin: 1.1em 0 0.25em;
  text-wrap: balance;
}
.reading p, .msg p { margin: 0 0 0.6em; max-width: 65ch; }
.note { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-style: italic;
  color: var(--muted);
}
.flame {
  width: 8px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, var(--bone), var(--gilt) 60%, transparent 75%);
  animation: burn 1.1s ease-in-out infinite alternate;
  flex: 0 0 auto;
}
@keyframes burn {
  from { transform: scaleY(0.85) translateX(-0.5px); opacity: 0.7; }
  to { transform: scaleY(1.1) translateX(0.5px); opacity: 1; }
}

/* Follow-up */
.follow { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.follow-title { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 400; color: var(--text); }
.log { display: flex; flex-direction: column; gap: 14px; }
.log:empty { display: none; }
.msg { min-width: 0; }
.msg.you {
  align-self: flex-end;
  max-width: 85%;
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 12px 12px 2px 12px;
  padding: 8px 12px;
}
.msg .who { display: block; font-family: var(--display-sc); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--gilt-dim); margin-bottom: 2px; }
.fform { display: flex; gap: 8px; flex-wrap: wrap; }
.fform input { flex: 1 1 220px; min-width: 0; }

.topup {
  border: 1px solid var(--gilt-dim);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: var(--velvet);
}
.topup p { margin: 0; flex: 1 1 240px; font-size: 0.95rem; }

.foot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}
.foot p { margin: 0; flex: 1 1 280px; max-width: 65ch; }

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

/* ---------- ORACLE pages (beyond the prototype) ---------- */
[hidden] { display: none !important; }
input[type="date"], input[type="time"], input[type="password"] {
  font: inherit;
  color: var(--text);
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  color-scheme: dark;
}
a { color: var(--gilt); }
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}
.lede { margin: 0; max-width: 60ch; color: var(--text); }
.muted { color: var(--muted); }
.top-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }

.langs { display: inline-flex; border: 1px solid var(--gilt-dim); border-radius: 999px; overflow: hidden; }
.langs button {
  font-family: var(--display-sc);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--gilt-dim); color: var(--bone); }

.nav { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.nav button {
  font-family: var(--display-sc);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.nav button[aria-current="page"] { color: var(--gilt); border-color: var(--gilt-dim); }

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 18px;
}
.panel.notice { border-color: var(--gilt-dim); }
.panel.notice .say { font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1.4; margin: 0; color: var(--bone); }
.panel.danger { border-color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--gilt-dim); }
.form-error { margin: 0; color: #e7a2a8; min-height: 1.4em; }
.form-ok { margin: 0; color: var(--gilt); min-height: 1.4em; }

.slot.chosen .card { box-shadow: 0 0 0 2px var(--gilt), 0 0 18px rgba(200, 164, 99, 0.35); border-radius: 8px; }

.prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.prices li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.prices .amt { font-family: var(--display-sc); letter-spacing: 0.06em; color: var(--gilt); }
.prices .eur { font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.topup { flex-direction: column; align-items: stretch; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline button {
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline button:hover { border-color: var(--gilt-dim); }
.timeline .when { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.8rem; color: var(--gilt-dim); }
.timeline .q { font-family: var(--display); font-style: italic; font-size: 1.1rem; }
.timeline .cards { font-size: 0.9rem; color: var(--muted); }
.empty { color: var(--muted); font-style: italic; margin: 0; }
.wrap-inner, #v-profile, #accountExtras, #v-timeline { display: flex; flex-direction: column; gap: 22px; }
#askedQ { font-family: var(--display); font-style: italic; font-size: 1.15rem; }

/* ---------- the game menu ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.game {
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}
.game:hover, .game:focus-visible { border-color: var(--gilt-dim); }
.game-art { grid-row: 1 / span 3; width: 64px; height: 96px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.game-art.backart svg { width: 60%; }
.game-art[data-art="cup"] { background: radial-gradient(circle at 50% 48%, #3b2416 0 34%, var(--bone) 35% 46%, var(--line) 47% 49%, transparent 50%); height: 64px; align-self: center; }
.game-name { font-family: var(--display); font-size: 1.35rem; color: var(--bone); line-height: 1.2; }
.game-lede { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.game-cost { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.8rem; color: var(--gilt); }

/* ---------- the coffee cup ---------- */
.cup-scene { display: flex; justify-content: center; }
.cup-scene svg { width: min(260px, 70vw); height: auto; overflow: visible; }
.cup-scene .saucer { fill: var(--bone); stroke: var(--gilt-dim); stroke-width: 1.5; }
.cup-scene .saucer-in { fill: none; stroke: #cfc3ad; stroke-width: 1.2; }
.cup-scene .body, .cup-scene .rim { fill: var(--bone); stroke: var(--gilt-dim); stroke-width: 1.5; }
.cup-scene .handle { fill: none; stroke: var(--bone); stroke-width: 9; stroke-linecap: round; }
.cup-scene .band { fill: none; stroke: var(--ink); stroke-width: 3; }
.cup-scene .coffee { fill: #3b2416; transition: opacity 0.8s; }
.cup-scene .grounds { fill: #24150c; opacity: 0; transition: opacity 0.8s; }
.cup-scene .steam path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; opacity: 0.5; animation: steam 3s ease-in-out infinite; }
.cup-scene .steam path:nth-child(2) { animation-delay: 1.4s; }
@keyframes steam { 0%, 100% { opacity: 0; transform: translateY(6px); } 50% { opacity: 0.55; transform: translateY(-4px); } }
.cup-scene .cup { transform-box: view-box; transform-origin: 110px 95px; transition: transform 1.1s cubic-bezier(0.5, 0, 0.3, 1); }
/* Drunk: the coffee is gone, the grounds show. */
.cup-scene:not([data-step="ask"]):not([data-step="drink"]) .coffee { opacity: 0; }
.cup-scene:not([data-step="ask"]):not([data-step="drink"]) .grounds { opacity: 1; }
.cup-scene:not([data-step="ask"]):not([data-step="drink"]) .steam { display: none; }
.cup-scene.swirling .cup { animation: swirl 0.8s ease-in-out 3; }
@keyframes swirl {
  0% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(-9deg) translateX(-8px); }
  50% { transform: rotate(0deg) translateY(-6px); }
  75% { transform: rotate(9deg) translateX(8px); }
  100% { transform: rotate(0deg) translateX(0); }
}
/* Turned over onto the saucer, rim down. */
.cup-scene.over .cup { transform: translateY(26px) rotate(180deg); }
.cup-scene.over .grounds { opacity: 0; }
.cup-scene[data-step="photo"] .cup { transform: none; transition: none; }
.cup-timer {
  --done: 0;
  margin: 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--gilt) calc(var(--done) * 360deg), var(--line) 0);
  font-family: var(--display-sc);
  font-size: 1.2rem;
  color: var(--bone);
  position: relative;
}
.cup-timer::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--table); }
.cup-timer span { position: relative; font-variant-numeric: tabular-nums; }
.cup-photo-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 2px solid var(--gilt); outline-offset: 2px; }
.cup-photo { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 10px; border: 1px solid var(--gilt-dim); object-fit: cover; }
.cup-reading .cup-photo { margin: 14px auto 18px; }
#cupAsked { font-family: var(--display); font-style: italic; font-size: 1.15rem; }

/* The timeline: a cup shows its photo. */
.timeline button.has-thumb { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 4px; }
.timeline button.has-thumb > span { grid-column: 2; }
.timeline .thumb { grid-row: 1 / span 4; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--line); }

/* ---------- slice 3: the profile's birth time and place ---------- */
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-family: var(--body); letter-spacing: 0; font-size: 1rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--gilt); }
.time-in { width: auto !important; flex: 0 0 auto; min-width: 8.5em; color-scheme: dark; }
.time-in:disabled { opacity: 0.45; }
.note.small, .small { font-size: 0.8rem; }
.place-field { position: relative; }
.place-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gilt-dim); border-radius: 10px; background: var(--velvet); }
.place-chosen span { flex: 1 1 auto; }
.btn.small { padding: 6px 12px; font-size: 0.85rem; }
.place-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--velvet); display: flex; flex-direction: column; }
.place-list button { width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.place-list button:hover, .place-list button:focus-visible { background: var(--line); outline: none; }

/* ---------- the menu's new tiles ---------- */
.game-art[data-art="sky"] { height: 64px; align-self: center; }
.game-art[data-art="sky"] svg { width: 64px; height: 64px; fill: none; stroke: var(--gilt); stroke-width: 1.2; }
.game-art[data-art="sky"] svg .asp { stroke: var(--ink); stroke-width: 1.6; }
.game-art[data-art="numbers"] { height: 64px; align-self: center; border: 1px solid var(--gilt-dim); border-radius: 50%; width: 64px; }
.game-art[data-art="numbers"] span { font-family: var(--display); font-size: 1.7rem; color: var(--gilt); }

/* ---------- the wheel ---------- */
.chart { display: flex; flex-direction: column; gap: 10px; }
.wheel-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wheel { width: 100%; max-width: 520px; aspect-ratio: 1; }
.wheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wheel-fig figcaption { text-align: center; max-width: 60ch; }
.w-ring { fill: none; stroke: var(--gilt-dim); stroke-width: 1; }
.w-ring.inner { stroke: var(--line); }
.w-sign-line { stroke: var(--gilt-dim); stroke-width: 1; }
.w-tick { stroke: var(--gilt-dim); stroke-width: 0.8; }
.w-tick.body { stroke: var(--bone); stroke-width: 1.2; }
.w-sign, .w-glyph, .g { font-family: "DejaVu Sans", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", "Noto Sans Symbols 2", sans-serif; }
.w-sign { font-size: 17px; text-anchor: middle; dominant-baseline: central; fill: var(--gilt); }
.w-sign.el-0 { fill: #d98b6a; } .w-sign.el-1 { fill: #b9c27a; } .w-sign.el-2 { fill: #c8a463; } .w-sign.el-3 { fill: #8fb3c9; }
.w-glyph { font-size: 19px; text-anchor: middle; dominant-baseline: central; fill: var(--bone); }
.w-retro { font-size: 9px; fill: var(--muted); font-family: var(--body); }
.w-cusp { stroke: var(--line); stroke-width: 1; }
.w-cusp.strong { stroke: var(--gilt); stroke-width: 1.4; }
.w-house { font-size: 10px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; font-family: var(--body); }
.w-angle { font-size: 11px; fill: var(--gilt); text-anchor: middle; dominant-baseline: central; font-family: var(--display-sc); letter-spacing: 0.08em; }
.w-asp { stroke-width: 1.1; opacity: 0.85; }
.w-asp.soft { stroke: #8fb3c9; }
.w-asp.hard { stroke: #c4566a; }
.positions summary { cursor: pointer; color: var(--gilt); font-family: var(--display-sc); letter-spacing: 0.08em; }
.pos-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; font-size: 0.95rem; }
.pos-list .g { display: inline-block; width: 1.5em; color: var(--gilt); }
.small-h { margin: 12px 0 0; font-family: var(--display-sc); font-weight: 400; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--gilt-dim); }
.sky-box { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.sky-box h2, .cal-view h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--bone); }
.sky-box .muted { margin: 0; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics button { background: transparent; color: var(--text); border: 1px solid var(--gilt-dim); border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; }
.topics button[aria-checked="true"] { background: var(--gilt); color: var(--table); border-color: var(--gilt); }

/* ---------- explainers, the glossary and the one-tap readings (build 5) ---------- */
.explain { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: rgba(33, 24, 41, 0.6); }
.explain summary { cursor: pointer; color: var(--gilt); font-family: var(--display-sc); letter-spacing: 0.08em; }
.explain p { margin: 8px 0 0; max-width: 65ch; font-size: 0.95rem; }
.term { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted var(--gilt-dim); text-underline-offset: 3px; }
.term:hover, .term:focus-visible { color: var(--bone); text-decoration-color: var(--gilt); }
.w-tap { cursor: pointer; }
.w-tap:focus { outline: none; }
.w-tap:focus-visible text, .w-tap:hover text { fill: var(--bone); }
.w-asp-hit { stroke: transparent; stroke-width: 12; }
.gloss { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(10, 7, 14, 0.55); }
.gloss-card { width: 100%; max-width: 440px; background: var(--velvet); border: 1px solid var(--gilt-dim); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.gloss-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--gilt); }
.gloss-card p { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 700px) { .gloss { align-items: center; } }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.theme { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; text-align: left; background: var(--velvet); color: var(--text); border: 1px solid var(--gilt-dim); border-radius: 10px; padding: 12px 14px; font: inherit; cursor: pointer; }
.theme:hover, .theme:focus-visible { border-color: var(--gilt); }
.theme .cost { font-size: 0.85rem; color: var(--gilt); }
.theme .cost::before { content: "· "; }
.theme.own { background: transparent; border-style: dashed; }
.num-what { font-size: 0.85rem; color: var(--muted); }
.num-mean { color: var(--bone); }
.num-mean b { color: var(--gilt); font-weight: 500; margin-right: 4px; }
.num-how { font-size: 0.9rem; overflow-wrap: anywhere; }

/* ---------- the calendar ---------- */
.cal-view { display: flex; flex-direction: column; gap: 10px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-wd { text-align: center; font-family: var(--display-sc); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--gilt-dim); }
.cal-day { position: relative; aspect-ratio: 1; min-height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--velvet); color: var(--text); font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cal-day .n { font-size: 1rem; }
.cal-day.good { border-color: var(--gilt); background: rgba(200, 164, 99, 0.16); }
.cal-day.best { border-color: var(--gilt); background: rgba(200, 164, 99, 0.34); }
.cal-day.slow { color: var(--muted); background: transparent; border-style: dashed; }
.cal-day.on { outline: 2px solid var(--bone); outline-offset: 1px; }
.cal-day .star { position: absolute; top: 2px; right: 4px; font-size: 0.7rem; color: var(--bone); }
.cal-legend { margin: 0; font-size: 0.85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cal-legend .key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--gilt); vertical-align: middle; }
.cal-legend .key.good { background: rgba(200, 164, 99, 0.16); }
.cal-legend .key.best { background: rgba(200, 164, 99, 0.34); }
.cal-legend .key.slow { border: 1px dashed var(--line); }

/* ---------- the numbers ---------- */
.num-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.num-card { border: 1px solid var(--line); border-radius: 12px; background: var(--velvet); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.num-card:first-child { grid-column: 1 / -1; }
.num-card h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--display-sc); font-weight: 400; letter-spacing: 0.06em; font-size: 0.95rem; color: var(--gilt-dim); }
.num-v { font-family: var(--display); font-size: 1.9rem; color: var(--gilt); letter-spacing: 0; line-height: 1; }
.num-card p { margin: 0; }
.letters { display: flex; flex-wrap: wrap; gap: 4px; }
.lt { display: inline-flex; flex-direction: column; align-items: center; min-width: 26px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.8rem; color: var(--muted); }
.lt b { font-weight: 500; font-size: 1rem; color: var(--text); }
.lt.vowel { border-color: var(--gilt-dim); }
.master { font-family: var(--display-sc); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--gilt); border: 1px solid var(--gilt-dim); border-radius: 999px; padding: 0 8px; margin-left: 4px; }

/* ---------- ready for friends: the landing page ---------- */
.landing { gap: 30px; }
.brand { font-size: 1rem; }
.brand a { color: inherit; text-decoration: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 12px; }
.hero-text .row { margin-top: 4px; }
.hero-card { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font: inherit; }
.hero-card .slot { width: 150px; }
.hero-card .card { max-width: 150px; }
.hero-card .face.front .nm { font-size: 0.85rem; }
.hero-tap { font-family: var(--display-sc); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--gilt-dim); }
.hero-card:focus-visible { outline: 2px solid var(--gilt); outline-offset: 6px; border-radius: 10px; }
@media (max-width: 560px) {
  .hero { grid-template-columns: 1fr; }
  .hero-card { order: -1; }
  .hero-card .slot, .hero-card .card { width: 120px; }
}
.menu { display: flex; flex-direction: column; gap: 14px; }
.menu h2, .latest h2, #v-menu > h2 { margin: 0; }
.games .game:is(div) { cursor: default; }
.soon-list { margin-top: 2px; }
.soon {
  color: var(--text);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
  row-gap: 2px;
  align-items: start;
  opacity: 0.78;
}
.soon .game-art { grid-row: 1 / span 3; height: 64px; }
.soon .game-art svg { width: 48px; height: 48px; fill: none; stroke: var(--gilt-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soon .game-art svg .asp { stroke: var(--gilt); }
.soon .game-name { font-size: 1.15rem; color: var(--text); }
.soon-badge { color: var(--muted); }
.how { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.how li::marker { color: var(--gilt-dim); }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq h2 { margin: 0 0 4px; }
.faq details { border-bottom: 1px solid var(--line); padding: 8px 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-size: 1.15rem; color: var(--bone); }
.faq details p { margin: 8px 0 0; color: var(--text); max-width: 65ch; }
.links { margin: 0; font-size: 0.95rem; }
.links a { color: var(--gilt); }

/* the terms and privacy pages */
.doc article { display: flex; flex-direction: column; gap: 10px; max-width: 65ch; }
.doc article h2 { margin: 12px 0 0; }
.doc article p, .doc article ul { margin: 0; }
.doc article li { margin-bottom: 4px; }
.draft { margin: 0; align-self: flex-start; font-family: var(--display-sc); letter-spacing: 0.12em; font-size: 0.8rem; color: var(--table); background: var(--gilt); border-radius: 999px; padding: 2px 12px; }

/* ---------- getting to know you ---------- */
.know { display: flex; flex-direction: column; gap: 16px; }
.know-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.know-dots li { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gilt-dim); border-radius: 2px; }
.know-dots li.done { background: var(--gilt-dim); }
.know-dots li.now { background: var(--gilt); border-color: var(--gilt); box-shadow: 0 0 10px rgba(200, 164, 99, 0.5); }
.know-card { min-height: 300px; }
.know-card.turn { animation: know-turn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes know-turn { from { opacity: 0; transform: translateY(10px) rotateX(8deg); } to { opacity: 1; transform: none; } }
.know-step { margin: 0; font-family: var(--display-sc); letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gilt-dim); }
.know-q { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--bone); line-height: 1.25; }
.know-card .muted { margin: 0; }
.know-field input[type="text"], .know-field input[type="date"] { width: 100%; max-width: 420px; font-size: 1.1rem; }
.know-actions { margin-top: auto; }
.know-actions #knowNext { margin-left: auto; }
.know-end .say { font-family: var(--display); font-style: italic; font-size: 1.3rem; margin: 0; color: var(--bone); }
.topics.big button { padding: 10px 18px; font-size: 1.05rem; }
.topics button[role="checkbox"][aria-checked="true"]::before { content: "✦ "; }
.tones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tones button { font: inherit; text-align: left; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--gilt-dim); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.tones button[aria-checked="true"] { border-color: var(--gilt); background: rgba(200, 164, 99, 0.16); box-shadow: 0 0 0 1px var(--gilt); }
.tone-name { font-family: var(--display); font-size: 1.3rem; color: var(--bone); }
.tone-lede { color: var(--muted); font-size: 0.95rem; }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; font-size: 0.9rem; color: var(--muted); }

/* ---------- the dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dash-card { background: var(--velvet); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dash-card h2 { margin: 0; font-size: 1.15rem; }
.dash-card .muted, .dash-card p { margin: 0; }
.dash-card.letter { grid-column: 1 / -1; border-color: var(--gilt-dim); }
/* The daily reading: one slim line like the letter's, its button at the end (it wraps under on a phone). */
.dash-card.daily { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 12px; }
.dash-card.daily .daily-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-card.daily .btn { flex: none; }
/* The logo before the name in every page's top line. */
.eyebrow[data-name]::before, .eyebrow [data-name]::before { content: ""; display: inline-block; width: 1.6em; height: 1.6em; margin-right: 0.45em; vertical-align: -0.5em; background: url("brand/logo.svg") center / contain no-repeat; }
.big { font-family: var(--display); font-size: 2rem; line-height: 1.1; color: var(--gilt); }
.letter-head { margin: 4px 0 0; font-family: var(--display-sc); font-weight: 400; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--gilt-dim); }
.letter-text p { margin: 0 0 0.6em; max-width: 65ch; }
.letter-list details { border-top: 1px solid var(--line); padding: 6px 0; }
.letter-list summary, #letterOlder > summary { cursor: pointer; color: var(--gilt); font-family: var(--display-sc); letter-spacing: 0.06em; }
.badge { font-family: var(--display-sc); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--table); background: var(--gilt); border-radius: 999px; padding: 0 8px; }
.latest { display: flex; flex-direction: column; gap: 10px; }
#v-menu, #v-buy { display: flex; flex-direction: column; gap: 16px; }

/* ---------- the AI mark, and the safety answers ---------- */
.ai-mark { margin: 4px 0 0; font-family: var(--display-sc); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gilt-dim); }
.reading .ai-mark, .msg .ai-mark { margin-top: 2px; }
.crisis { border: 1px solid var(--bone); border-radius: 12px; padding: 16px; background: rgba(237, 227, 209, 0.06); display: flex; flex-direction: column; gap: 8px; }
.crisis h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; color: var(--bone); }
.crisis p { margin: 0; }
.helplines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.helplines a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--gilt-dim); border-radius: 10px; color: var(--text); text-decoration: none; }
.helplines a:hover, .helplines a:focus-visible { border-color: var(--gilt); }
.hl-n { font-family: var(--display); font-size: 1.4rem; color: var(--gilt); }
.hl-l { font-size: 0.9rem; color: var(--muted); }

/* ---------- the admin screen ---------- */
.admin { max-width: 1100px; }
.admin-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--velvet); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-v { font-family: var(--display); font-size: 1.5rem; color: var(--gilt); font-variant-numeric: tabular-nums; }
.stat-k { font-size: 0.85rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.admin-table th, .admin-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table th { font-family: var(--display-sc); font-weight: 400; letter-spacing: 0.06em; color: var(--gilt-dim); }
.admin-table .num { text-align: right; }

/* charter 2 */
/* ---------- the menu tiles of dreams, beans and the I Ching ---------- */
.game-art.c2-art { height: 64px; align-self: center; }
.game-art.c2-art svg { width: 52px; height: 52px; fill: none; stroke: var(--gilt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.game-art.c2-art svg .asp { stroke: var(--bone); }
.game-art[data-art="beans"] svg ellipse { fill: var(--bone); stroke: var(--gilt-dim); stroke-width: 1; }

/* ---------- dreams ---------- */
.dream-nudge { border-color: var(--gilt-dim); }
.dream-card { background: var(--velvet); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dream-day { margin: 0; font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.8rem; color: var(--gilt-dim); }
.dream-text { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--bone); overflow-wrap: anywhere; }
.dream-back { margin: 0; color: var(--gilt); font-style: italic; }
.dream-kept { display: flex; flex-direction: column; gap: 16px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { border: 1px solid var(--gilt-dim); border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; color: var(--text); }
.chips li.back { border-color: var(--gilt); color: var(--gilt); }
.chips .times { font-family: var(--display-sc); font-size: 0.75rem; }
.dream-journal { display: flex; flex-direction: column; gap: 10px; }
.dream-journal h2 { margin: 0; }
.dream-journal .q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dream-journal button[aria-current="true"] { border-color: var(--gilt); }

/* ---------- bean casting: the red cloth, 41 beans, nine piles ---------- */
.bean-cloth {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(237, 227, 209, 0.05) 0 6px, transparent 6px 12px),
    radial-gradient(ellipse at 50% 40%, #8a2a38, var(--ink) 75%);
  border: 6px double rgba(237, 227, 209, 0.55);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}
.bean {
  position: absolute;
  width: 13px;
  height: 9px;
  margin: -4.5px 0 0 -6.5px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #fbf4e4, #d9c7a2 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--turn, 0deg));
  transition: left 0.9s cubic-bezier(.2, .7, .3, 1), top 0.9s cubic-bezier(.2, .7, .3, 1), transform 0.9s, opacity 0.6s;
}
.bean-cloth.fallen .bean.aside { opacity: 0.4; }
.pile-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--bone);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.pile-label .pile-n { font-family: var(--display); font-size: 1rem; color: var(--gilt); }
.bean-rows { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 0.9rem; }
#beanSum, #beanSay, #ichSay { text-align: center; margin: 0; }
#beanAsked, #ichAsked { font-family: var(--display); font-style: italic; font-size: 1.15rem; }

/* ---------- the I Ching: three coins, six lines ---------- */
.ich-coins-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ich-coins { display: flex; gap: 18px; justify-content: center; }
.coin { position: relative; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s; }
.coin svg { width: 56px; height: 56px; }
.coin svg circle { fill: #8c7449; stroke: var(--gilt); stroke-width: 2; }
.coin svg rect { fill: var(--table); stroke: var(--gilt-dim); stroke-width: 1.5; }
.coin.yang svg circle { fill: var(--gilt); }
.coin.yin svg circle { fill: #5b4b30; }
.coin-v { position: absolute; bottom: -18px; font-family: var(--display); color: var(--gilt); font-size: 0.95rem; }
.coin.spin { animation: coinspin 0.5s linear infinite; }
@keyframes coinspin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
#ichSum { margin-top: 12px; text-align: center; }
.ich-hex { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.hex-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hex-fig figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; max-width: 220px; }
.hex-name { font-family: var(--display); font-size: 1.15rem; color: var(--bone); }
.hex-arrow { font-size: 1.6rem; color: var(--gilt-dim); }
.hex { display: flex; flex-direction: column; gap: 7px; width: 132px; }
.hl { position: relative; height: 12px; display: flex; gap: 18px; }
.hl .bar { flex: 1; background: var(--gilt); border-radius: 2px; }
.hl.empty { border: 1px dashed var(--line); border-radius: 2px; }
.hl.moving .bar { background: var(--bone); }
.hl .mv { position: absolute; right: -22px; top: -6px; color: var(--gilt); font-size: 0.95rem; }
.ich-lines { margin: 0 auto; padding-left: 1.2em; color: var(--muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .bean { transition: none; }
  .coin.spin { animation: none; }
}

/* ---------- 17 Oct quick lane (Ivan's notes after Release 2) ---------- */
/* The name and logo carry the header; the greeting is smaller. */
.top .eyebrow[data-name] { font-size: 1.05rem; color: var(--gilt); letter-spacing: 0.12em; }
.top .eyebrow[data-name]::before { width: 2.1em; height: 2.1em; vertical-align: -0.7em; }
#title { font-size: clamp(1.45rem, 4vw, 1.9rem); }
/* The free daily reading: a quiet badge in the header until subscriptions open. */
.badge-soon { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px dashed var(--gilt-dim); border-radius: 999px; font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .badge-soon { white-space: normal; } }
/* Readings and letters use the whole width of their column. */
.reading p, .msg p, .letter-text p { max-width: none; }
#v-letters { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 17 Oct, second quick lane ---------- */
/* Reading options: bigger, the name on top, the price on its own line under it. */
.themes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.theme { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 76px; padding: 14px 16px; }
.theme > span:first-child { font-family: var(--display); font-size: 1.12rem; line-height: 1.25; color: var(--bone); }
.theme .cost { font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.08em; }
.theme .cost::before { content: none; }
.ask { margin-top: 14px; }
/* Game tiles: the picture sits beside the name, the description and price run under both. */
.games .game { grid-template-columns: 52px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; }
.games .game .game-art { grid-row: 1; grid-column: 1; width: 52px; height: 52px; align-self: center; }
.games .game .game-art.backart { width: 36px; height: 54px; justify-self: center; }
.games .game .game-art[data-art="cup"] { width: 48px; height: 48px; }
.games .game .game-art svg { width: 44px; height: 44px; }
.games .game .game-art[data-art="numbers"] { width: 48px; height: 48px; }
.games .game .game-art[data-art="numbers"] span { font-size: 1.3rem; }
.games .game .game-name { grid-row: 1; grid-column: 2; align-self: center; }
.games .game .game-lede { grid-column: 1 / -1; grid-row: 2; }
.games .game .game-cost { grid-column: 1 / -1; grid-row: 3; align-self: end; }

/* charter 3 · palm and runes */
.palm-hand { margin: 0 0 12px; }
.palm-guide { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.palm-guide-art { flex: none; width: 72px; height: 72px; border: 1px solid var(--gilt-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.palm-guide-art svg { width: 52px; height: 52px; fill: none; stroke: var(--gilt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.palm-guide-art svg .asp { stroke: var(--bone); }
.palm-guide p { margin: 0 0 6px; text-align: left; }
.runes-modes { margin-bottom: 14px; }
.runes-modes .cost { font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gilt); }
#runesAskBox { margin-bottom: 12px; }
#runesAskBox textarea { width: 100%; }
.runes-table { margin: 18px 0; }
.stones { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-content: center; grid-template-columns: repeat(var(--n, 1), minmax(0, 190px)); }
.stones.n3 { --n: 3; }
@media (max-width: 560px) { .stones.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.stone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.stone-face { width: 84px; height: 108px; border-radius: 44% 44% 40% 40% / 38% 38% 46% 46%; background: radial-gradient(circle at 40% 30%, #4a4150, #251e2b 70%); border: 1px solid var(--gilt-dim); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.stone-face svg { width: 34px; height: 56px; fill: none; stroke: var(--gilt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stone-face svg.rev { transform: rotate(180deg); }
.stone.up .stone-face { animation: stoneup 0.5s ease-out; }
.stone-pos { font-family: var(--display-sc); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--gilt-dim); }
.stone-name { font-family: var(--display); font-size: 1.15rem; color: var(--bone); }
.stone-state { font-size: 0.82rem; color: var(--gilt); }
.stone-keys { font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.drawing .stone.down .stone-face { animation: stoneshake 0.9s ease-in-out infinite; }
@keyframes stoneup { from { transform: rotateY(90deg); } to { transform: none; } }
@keyframes stoneshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@media (max-width: 560px) { .stone-face { width: 68px; height: 88px; } .stone-face svg { width: 28px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .stone.up .stone-face, .drawing .stone.down .stone-face { animation: none; } }
/* charter 3 · profile and today */
/* "Днес" at the top of the dashboard: today's number, the Moon, the card of the day, the dream question. */
.dash-card.today { border-color: var(--gilt-dim); gap: 12px; }
.today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.today-head h2 { font-size: 1.35rem; }
.today-date { color: var(--bone); font-family: var(--display); font-style: italic; }
.today-free { margin-left: auto; color: var(--muted); font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.08em; }
.today-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.today-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 12px; row-gap: 6px; align-content: start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.today-item > :not(.today-mark) { grid-column: 2; }
.today-item h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.12rem; line-height: 1.25; color: var(--bone); }
.today-item p { margin: 0; max-width: none; }
.today-item .row { margin-top: 2px; }
.today-line { font-size: 0.95rem; line-height: 1.45; }
.today-mark { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 44px; height: 44px; display: grid; place-items: center; }
.today-mark.num { border: 1px solid var(--gilt); border-radius: 50%; font-family: var(--display); font-size: 1.35rem; color: var(--gilt); }
.today-mark.moon { border-radius: 50%; background: radial-gradient(circle at 64% 40%, var(--velvet) 0 44%, transparent 45%), radial-gradient(circle, var(--bone) 0 62%, transparent 63%); }
.today-mark.card { width: 30px; height: 46px; justify-self: center; }
.today-mark.card svg { width: 60%; }
.today-mark.dream::before { content: "☾"; font-size: 1.9rem; color: var(--gilt); line-height: 1; }
.today-item.dream-nudge { border-color: var(--line); }
.today-out:empty { display: none; }
.today-out .waiting, .today-out .note { margin: 0; }
/* The card of the day: one card, alone in the spread. */
.spread.day { grid-template-columns: minmax(0, 150px); justify-content: center; }
/* The get-to-know-you's optional questions, and the same answers on the profile. */
.know-field input#kWork { width: 100%; max-width: 420px; font-size: 1.1rem; }
.know-field textarea { width: 100%; max-width: 520px; font-size: 1.05rem; }
#knowCrisis, #profileCrisis { margin-top: 4px; }
fieldset.field.life { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.life .note { margin: 0; }
.life-q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.life-label { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--gilt-dim); }
.life-q input, .life-q textarea { width: 100%; }
/* sign-in by email */
#signin input[type="email"] {
  font: inherit;
  color: var(--text);
  background: var(--velvet);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
#signin .signin-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
#signin .new-pass { display: flex; flex-direction: column; gap: 14px; }
#signin .new-pass .note { margin: 0; font-size: 1rem; color: var(--bone); }
/* sign-in by email · the admin's People page */
.admin-tabs { display: flex; gap: 8px; }
.admin-tabs button { font: inherit; font-family: var(--display-sc); letter-spacing: 0.08em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.admin-tabs button[aria-selected="true"] { color: var(--gilt); border-color: var(--gilt-dim); }
#peopleView { display: flex; flex-direction: column; gap: 18px; }
#peopleView[hidden] { display: none; }
.people-list { display: flex; flex-direction: column; gap: 10px; }
.person { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.person-email { color: var(--bone); overflow-wrap: anywhere; }
.person-status { font-size: 0.85rem; color: var(--gilt-dim); }
.person[data-status="removed"] .person-email { color: var(--muted); text-decoration: line-through; }
.person-line { margin: 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.person-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.person-actions .gift { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.person-actions .gift input[type="number"] { width: 6.5em; }
.person-actions .gift input[type="text"] { width: auto; flex: 1 1 10em; min-width: 8em; }
.person-actions input[type="number"] { font: inherit; color: var(--text); background: var(--velvet); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; box-sizing: border-box; }
.person-actions .gift input[type="text"] { padding: 6px 8px; }
.person-msg { margin: 0; font-size: 0.85rem; color: var(--gilt); }
.person-msg:empty { display: none; }
.person-msg.form-error { color: #e7a2a8; min-height: 0; }

/* ---------- 18 Oct quick lane: a slim header and one sticky bar (Ivan's notes from his phone) ---------- */
/* One row: the logo with the free-reading badge beneath it on the left; language and credits on the right. */
.app-top { flex-wrap: nowrap; align-items: flex-start; }
.app-top .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.app-top .top-right { flex-wrap: nowrap; gap: 8px; flex: none; }
.app-top .badge-soon { white-space: normal; padding: 3px 10px; font-size: 0.72rem; }
/* The page title and the menu share a bar that stays at the top while scrolling. */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  padding: 10px 0; margin-block: -10px;
  border-bottom: 1px solid var(--line);
}
/* The bar's ground runs the full width of the screen: a shadow, clipped to the bar's height, so nothing scrolls sideways. */
.bar::before, .bar .nav::before { content: ""; position: absolute; inset: 0; background: var(--table); box-shadow: 0 0 0 100vmax var(--table); clip-path: inset(0 -100vmax); z-index: -1; }
.bar .nav::before { display: none; }
.bar-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar #title { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
.bar .nav { border-bottom: 0; padding-bottom: 0; }
.nav-toggle { display: none; }
@media (max-width: 700px) {
  /* The logo and the controls on one line; the badge on its own short line beneath the logo. */
  .app-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 6px; }
  .app-top .brand { display: contents; }
  .app-top .eyebrow[data-name] { grid-column: 1; grid-row: 1; white-space: nowrap; font-size: 0.95rem; }
  .app-top .top-right { grid-column: 2; grid-row: 1; }
  .app-top .badge-soon { grid-column: 1 / -1; grid-row: 2; justify-self: start; white-space: nowrap; }
  .langs button { padding: 5px 9px; font-size: 0.8rem; }
  .credits { padding: 5px 10px; gap: 6px; font-size: 0.9rem; }
  .nav-toggle:not([hidden]) {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex: none;
    width: 42px; height: 42px; padding: 0 10px; background: transparent; border: 1px solid var(--gilt-dim); border-radius: 8px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--gilt); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .bar.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bar.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .bar.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .bar .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 2px; padding: 8px 0 12px;
    border-bottom: 1px solid var(--line); z-index: 1;
  }
  .bar .nav::before { display: block; border-bottom: 1px solid var(--line); }
  .bar.open .nav:not([hidden]) { display: flex; }
  .bar .nav button { text-align: left; padding: 10px 12px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* 18 Oct, second pass: on the phone the language moves into the menu; the logo grows a little; the admin screen is a
   menu item for the admin. On the desktop the language stays in the header. */
.nav-langs { display: none; }
.nav-admin { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.95rem; color: var(--muted); border: 1px solid transparent; border-radius: 6px; padding: 6px 12px; text-decoration: none; }
.nav-admin:hover { color: var(--gilt); }
@media (max-width: 700px) {
  .app-top .top-right > .langs { display: none; }
  .bar .nav .nav-langs { display: inline-flex; align-self: flex-start; margin: 8px 12px 0; }
  .bar .nav .nav-langs button { padding: 8px 16px; font-size: 0.95rem; }
  .bar .nav .nav-admin { padding: 10px 12px; font-size: 1.05rem; }
  .app-top .eyebrow[data-name] { font-size: 1.15rem; }
  .app-top .eyebrow[data-name]::before { width: 2.4em; height: 2.4em; vertical-align: -0.8em; }
}

/* charter 4 · story — the story of the day: the card at the top of "Днес", the theatre (the velvet curtain, the candle, the
   page that inks in and unfolds), the Moon and the symbol, the weather behind the words, "Писма от бъдещето", and the
   public page of a day (den.php). Still under prefers-reduced-motion. */
.story-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px; border: 1px solid var(--gilt-dim); border-radius: 10px;
  background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(200, 164, 99, 0.10), transparent 70%), rgba(22, 17, 29, 0.5); min-width: 0; }
.story-card[hidden] { display: none; }
.story-card-art { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.story-card-moon .moon-svg { width: 58px; height: 58px; }
.story-card-sym .sym-svg { width: 30px; height: 40px; }
.story-card-candle .candle-svg { width: 34px; height: 68px; }
.story-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.story-card-kicker { margin: 0; font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--gilt-dim); }
.story-card-title { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; color: var(--bone); }
.story-card-lede { margin: 0; color: var(--text); max-width: 60ch; overflow-wrap: anywhere; }
.story-card .row { margin-top: 4px; }
.story-yesterday { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.story-yesterday > summary { cursor: pointer; color: var(--gilt); font-family: var(--display-sc); letter-spacing: 0.06em; }
.story-y-day { color: var(--bone); }
.story-y-text p { margin: 0.5em 0 0; max-width: 65ch; }
@media (max-width: 420px) { .story-card { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; } .story-card-moon .moon-svg { width: 48px; height: 48px; } }

/* The Moon, the symbol and the candle. */
.moon-svg { display: block; overflow: visible; }
.moon-halo { fill: rgba(237, 227, 209, 0.07); }
.moon-dark { fill: #2a2236; }
.moon-lit { fill: var(--bone); }
.moon-rim { fill: none; stroke: rgba(237, 227, 209, 0.35); stroke-width: 0.8; }
.sym-svg { display: block; }
.sym-card { fill: var(--bone); stroke: var(--gilt); stroke-width: 1.4; }
.sym-card-in { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.sym-star { fill: var(--ink); }
.sym-roman { fill: var(--ink); font-family: var(--display); font-size: 15px; }
.sym-stone { fill: #3b3346; stroke: var(--gilt-dim); stroke-width: 1; }
.sym-rune { fill: none; stroke: var(--gilt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sym-line { fill: var(--gilt); }
.candle-glow { fill: rgba(255, 196, 110, 0.16); animation: candle-glow 2.4s ease-in-out infinite; transform-origin: 30px 34px; }
.candle-flame { fill: #f3b65a; transform-origin: 30px 46px; animation: candle-flicker 1.6s ease-in-out infinite; }
.candle-core { fill: #fff3d6; transform-origin: 30px 44px; animation: candle-flicker 1.3s ease-in-out infinite reverse; }
.candle-wick { stroke: #2b2118; stroke-width: 1.6; }
.candle-body { fill: var(--bone); }
.candle-drip { fill: #d9cdb6; }
.candle-dish { fill: var(--gilt-dim); }
@keyframes candle-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
  20% { transform: scale(0.94, 1.06) skewX(-3deg); }
  45% { transform: scale(1.04, 0.95) skewX(2deg); opacity: 0.9; }
  70% { transform: scale(0.97, 1.03) skewX(-1.5deg); }
}
@keyframes candle-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.92); } }

/* The theatre: one fixed layer over everything; the page scrolls inside it. */
html.theatre-on, html.theatre-on body { overflow: hidden; }
.theatre { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse 90% 60% at 50% 0%, #241a2e, var(--table) 70%); color: var(--text); overflow: hidden; }
.theatre[hidden] { display: none; }
.theatre-page { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; outline: none; z-index: 1; }
.tale { position: relative; max-width: 640px; margin: 0 auto; padding: 72px 22px 96px; box-sizing: border-box; }
.tale-sky { display: flex; justify-content: center; align-items: center; gap: 22px; margin-bottom: 18px; }
.tale-moon .moon-svg { width: 104px; height: 104px; filter: drop-shadow(0 0 18px rgba(237, 227, 209, 0.22)); }
.tale-symbol .sym-svg { width: 48px; height: 66px; }
.tale-date { margin: 0; text-align: center; font-family: var(--display-sc); letter-spacing: 0.12em; color: var(--gilt-dim); font-size: 0.85rem; }
.tale-title { margin: 6px 0 4px; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 6.5vw, 2.8rem); line-height: 1.15; color: var(--bone); overflow-wrap: anywhere; }
.tale-facts { margin: 0 0 26px; text-align: center; color: var(--muted); font-style: italic; font-size: 0.92rem; }
.tale-text p { margin: 0 0 1.05em; font-size: 1.12rem; line-height: 1.75; max-width: none; overflow-wrap: anywhere; }
.tale-text p.lettrine::first-letter, .future-body p.lettrine::first-letter { float: left; font-family: var(--display); font-size: 3.5em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--gilt); }
.tale-line { font-style: italic; color: var(--bone); border-top: 1px solid var(--gilt-dim); padding-top: 0.9em; }
.tale-more { text-align: center; color: var(--gilt-dim); font-family: var(--display-sc); font-size: 0.8rem; letter-spacing: 0.1em; animation: tale-breathe 2.6s ease-in-out infinite; }
.tale-end { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; transition: opacity 0.8s ease; }
.tale-end .row { justify-content: center; }
.tale-p { transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; }
.tale-p.veiled, .tale-end.veiled { opacity: 0; transform: translateY(14px); filter: blur(3px); pointer-events: none; }
.tale-end.veiled { transform: none; filter: none; }
.theatre:not(.inked) .tale-title, .theatre:not(.inked) .tale-sky, .theatre:not(.inked) .tale-date, .theatre:not(.inked) .tale-facts { opacity: 0; }
.theatre.inked .tale-title { animation: tale-ink 2.2s ease-out both; }
.theatre.inked .tale-sky { animation: tale-rise 1.6s ease-out both; }
.theatre.inked .tale-date, .theatre.inked .tale-facts { animation: tale-rise 1.6s 0.6s ease-out both; }
@keyframes tale-ink {
  0% { opacity: 0; filter: blur(9px); letter-spacing: 0.18em; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  60% { opacity: 1; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0); letter-spacing: normal; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.theatre.inked .tale-title { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; }
@keyframes tale-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tale-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.theatre::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--table) 30%, rgba(22, 17, 29, 0)); }
.theatre-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 5; background: rgba(22, 17, 29, 0.7); color: var(--gilt); border: 1px solid var(--gilt-dim);
  border-radius: 999px; padding: 7px 16px; font-family: var(--display-sc); letter-spacing: 0.08em; font-size: 0.85rem; cursor: pointer; }
.theatre-skip:hover, .theatre-skip:focus-visible { border-color: var(--gilt); color: var(--bone); }

/* The curtain: two halves of velvet with a gold fringe, the candle between them; they part to the sides. */
.curtain { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.curtain[hidden] { display: none; }
.curtain-half { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(90deg, #3d0c18 0, #6b1e2c 2.2%, #4f1220 4.6%, #2e0811 7%);
  box-shadow: inset 0 -10px 0 -4px var(--gilt-dim); }
.curtain-left { left: 0; border-right: 1px solid rgba(0, 0, 0, 0.5); transform-origin: left center; }
.curtain-right { right: 0; border-left: 1px solid rgba(0, 0, 0, 0.5); transform-origin: right center; }
.theatre.parted .curtain-left { transform: translateX(-102%) skewX(4deg); }
.theatre.parted .curtain-right { transform: translateX(102%) skewX(-4deg); }
.theatre.parted .curtain-center { opacity: 0; }
.curtain-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  width: min(86vw, 360px); transition: opacity 0.6s ease; }
.curtain-center .candle .candle-svg { width: 70px; height: 140px; }
.curtain-line { margin: 0; font-family: var(--display); font-size: 1.6rem; color: var(--bone); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.curtain-date { margin: 0; font-family: var(--display-sc); letter-spacing: 0.12em; color: var(--gilt); }
.curtain-wait { margin: 0; min-height: 1.4em; color: var(--bone); font-style: italic; }
.curtain-wait:empty { min-height: 0; }

/* The weather behind the words. */
.tale-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tale-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tale-layer i { position: absolute; display: block; }
.layer-mist i { width: 120vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(205, 200, 214, 0.16), transparent 65%); filter: blur(10px); }
.layer-mist .mist-a { top: 8%; left: -40vmax; animation: mist-drift 38s linear infinite; }
.layer-mist .mist-b { top: 42%; left: -60vmax; animation: mist-drift 52s linear infinite -18s; }
.layer-mist .mist-c { top: 70%; left: -50vmax; animation: mist-drift 44s linear infinite -30s; opacity: 0.8; }
@keyframes mist-drift { from { transform: translateX(0); } to { transform: translateX(110vmax); } }
.layer-haze i { inset: -10%; background: repeating-linear-gradient(0deg, rgba(255, 196, 120, 0.05) 0 3px, transparent 3px 11px), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 170, 90, 0.14), transparent 70%);
  animation: haze-shimmer 5s ease-in-out infinite alternate; }
@keyframes haze-shimmer { from { transform: translateY(0) scaleY(1); opacity: 0.7; } to { transform: translateY(-1.5%) scaleY(1.03); opacity: 1; } }
.layer-glow i { inset: 0; background: radial-gradient(ellipse 70% 45% at 70% -5%, rgba(255, 210, 140, 0.22), transparent 70%); animation: glow-pulse 7s ease-in-out infinite; }
@keyframes glow-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* Still: nothing moves; everything is there at once. */
.theatre.still .tale-p, .theatre.still .tale-end { opacity: 1; transform: none; filter: none; transition: none; }
.theatre.still .tale-title, .theatre.still .tale-sky, .theatre.still .tale-date, .theatre.still .tale-facts { animation: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .candle-flame, .candle-core, .candle-glow, .tale-more, .tale-layer i { animation: none; }
  .curtain-half, .tale-p, .tale-end { transition: none; }
}

/* "Писма от бъдещето". */
.future-lede { margin: 0 0 4px; max-width: 70ch; }
#v-letters { display: flex; flex-direction: column; gap: 16px; }
#v-letters[hidden] { display: none; }
.future-list { display: flex; flex-direction: column; }
.future-item { border-top: 1px solid var(--line); padding: 8px 0; }
.future-item > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.future-kind { font-family: var(--display-sc); letter-spacing: 0.08em; font-size: 0.85rem; color: var(--gilt); }
.future-tale .future-kind { color: var(--bone); }
.future-when { color: var(--muted); font-size: 0.9rem; }
.future-what { flex-basis: 100%; font-family: var(--display); font-size: 1.1rem; color: var(--bone); }
.future-body { padding: 8px 0 4px; }
.future-body p { margin: 0 0 0.7em; max-width: 65ch; overflow-wrap: anywhere; }

/* The public page of a day. */
.den-page .den { display: flex; flex-direction: column; gap: 20px; }
.den-layer { position: fixed; inset: 0; z-index: 0; }
.tale-public { padding: 12px 4px 8px; margin: 0 auto; width: 100%; }
.tale-public .tale-title { animation: tale-ink 2.2s ease-out both; }
.den .langs a { color: var(--gilt); text-decoration: none; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; font-family: var(--display-sc); }
.den .langs a[aria-current] { border-color: var(--gilt-dim); color: var(--bone); }
.den-invite, .den-missing { max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .tale-public .tale-title { animation: none; } }
/* charter 4 · compat */
/* The tile: the look of a game tile (.game, .games .game), under its own class. */
.cp-tile { font: inherit; color: var(--text); text-align: left; background: var(--velvet); border: 1px solid var(--line); border-radius: 12px; padding: 18px; cursor: pointer;
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; }
.cp-tile:hover, .cp-tile:focus-visible { border-color: var(--gilt-dim); }
.cp-tile .game-art { grid-row: 1; grid-column: 1; width: 52px; height: 52px; align-self: center; }
.cp-tile .game-art svg { width: 44px; height: 44px; }
.cp-tile .game-name { grid-row: 1; grid-column: 2; align-self: center; }
.cp-tile .game-lede { grid-column: 1 / -1; grid-row: 2; }
.cp-how { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.cp-start { display: flex; flex-direction: column; gap: 16px; }
.cp-start fieldset { border: 0; padding: 0; margin: 0; }
.cp-start legend { font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--gilt-dim); margin-bottom: 8px; }
.cp-view-fields { display: flex; flex-direction: column; gap: 12px; }
.cp-mine h2, .cp-timeline h2 { margin: 0 0 8px; font-size: 1.15rem; }
.cp-timeline { display: flex; flex-direction: column; gap: 4px; }
.cp-pair-head { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-kind { font-family: var(--display); font-size: 1.35rem; color: var(--bone); }
.cp-stage { color: var(--text); }
.cp-quiz { display: flex; flex-direction: column; gap: 14px; }
.cp-card { display: flex; flex-direction: column; gap: 18px; }
.cp-sec { margin: 0; font-size: 1.2rem; }
.cp-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.cp-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-item.skipped .cp-q, .cp-item.skipped .cp-opts { opacity: 0.5; }
.cp-ask { margin: 0; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.cp-q { margin: 0; color: var(--bone); font-size: 1.05rem; }
.cp-opts button { padding: 7px 14px; }
.cp-opts.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cp-opts.scale button { padding: 8px 4px; font-size: 0.85rem; line-height: 1.25; border-radius: 10px; overflow-wrap: anywhere; }
.cp-skip, .linkish { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: var(--gilt-dim); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-skip:hover, .linkish:hover { color: var(--gilt); }
.cp-quiz-actions { justify-content: space-between; }
.cp-link { display: flex; flex-direction: column; gap: 12px; }
.cp-link h2 { margin: 0; font-size: 1.2rem; }
.cp-link input { width: 100%; min-width: 0; font-size: 0.85rem; }
.cp-talk-form textarea { flex: 1 1 260px; min-width: 0; }
.cp-reading section { margin-bottom: 12px; }
.cp-one-sided { margin: 0; padding: 10px 14px; border: 1px solid var(--gilt-dim); border-radius: 10px; color: var(--bone); font-style: italic; }
.cp-wink { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cp-wink-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-wink-one { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--velvet); min-width: 0; }
.cp-wink-name { font-family: var(--display); font-size: 1.15rem; color: var(--bone); overflow-wrap: anywhere; }
.cp-lp { font-family: var(--display-sc); letter-spacing: 0.08em; color: var(--gilt); }
.cp-aspects { margin: 0; padding-left: 1.2em; color: var(--text); }
.cp-dash { grid-column: 1 / -1; border-color: var(--gilt-dim); }
.cp-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-dash-list .btn { text-align: left; white-space: normal; }
.pair-page .consent { align-items: flex-start; }
.pair-page #invRest, .pair-page #invAccount { display: flex; flex-direction: column; gap: 14px; }
.pair-page #invRest[hidden], .pair-page #invAccount[hidden] { display: none; }
.pair-page fieldset { border: 0; padding: 0; margin: 0; }
.pair-page legend { margin-bottom: 8px; color: var(--bone); }
.pair-page form { display: flex; flex-direction: column; gap: 16px; }
.pair-page form[hidden] { display: none; }
@media (max-width: 420px) { .cp-opts.scale button { font-size: 0.78rem; } }
/* charter 4 · observer */
.obs-scenes { margin: 0 0 12px; }
.obs-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; }
.obs-chips button svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.obs-guide-art svg .asp, .c2-art[data-art="observer"] svg .asp { stroke: var(--bone); }

/* 18 Oct quick lane: the readings heading clears the sticky bar when the menu scrolls to it */
#gamesHead { scroll-margin-top: 84px; }

/* ---------- 18 Oct quick lane: the tale on paper, written in ink; its card and the daily cards in the tiles' shape ---------- */
:root { --paper: #efe3c8; --paper-edge: #d9c7a1; --ink-dark: #2a1a10; --ink-sepia: #6a5236; --night: #161b2e; --night-line: #2c3655; }
/* The tale's card stands alone above "Днес": a sheet of paper, the moon and the symbol beside the title. */
.story-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; color: var(--ink-dark);
  background: radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.35), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(150, 110, 60, 0.18), transparent 60%), var(--paper);
  border: 1px solid var(--paper-edge); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
.story-card-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.story-card-art { flex-direction: row; justify-content: center; gap: 4px; }
.story-card-moon .moon-svg { width: 46px; height: 46px; }
.story-card-sym .sym-svg { width: 16px; height: 24px; }
.story-card-sym .sym-svg * { stroke: var(--ink-sepia) !important; }
.story-card-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.story-card-kicker { color: var(--ink-sepia); }
.story-card-title { color: var(--ink-dark); font-size: 1.35rem; }
.story-card-lede { color: var(--ink-dark); font-style: italic; }
.story-card-open { align-self: stretch; }
.story-card .story-yesterday { border-top: 1px solid var(--paper-edge); padding-top: 8px; color: var(--ink-dark); }
.story-card .story-yesterday summary, .story-card .story-y-day { color: var(--ink-sepia); }
@media (max-width: 420px) { .story-card-head { grid-template-columns: 58px minmax(0, 1fr); } }
/* "Днес": the daily cards in the reading tiles' shape — the mark beside the name, the words and the button below — on night blue. */
.dash-card.today { background: var(--night); border-color: var(--night-line); }
.today-item { grid-template-columns: 52px minmax(0, 1fr); align-items: center; background: rgba(255, 255, 255, 0.025); border-color: var(--night-line); }
.today-item > :not(.today-mark) { grid-column: 1 / -1; }
.today-items .today-item > .today-mark { grid-column: 1; grid-row: 1; justify-self: center; }
.today-items .today-item > h3 { grid-column: 2; grid-row: 1; align-self: center; }
.today-item .row .btn { width: 100%; }
/* The tale's page: a sheet of paper under the sky. */
.tale { background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.4), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(140, 100, 55, 0.22), transparent 55%), var(--paper);
  color: var(--ink-dark); border-radius: 6px; margin: 64px auto 48px; padding: 36px 24px 40px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(120, 85, 40, 0.18); }
@media (max-width: 480px) { .tale { margin: 56px 10px 32px; padding: 28px 18px 32px; } }
.tale-date, .tale-facts { color: var(--ink-sepia); }
.tale-title { color: var(--ink-dark); }
.tale-text p { color: var(--ink-dark); }
.tale-text p.lettrine::first-letter { color: var(--ink); }
.tale-line { color: var(--ink-dark); border-top-color: var(--paper-edge); }
.tale-more { color: var(--ink-sepia); }
.tale .note { color: var(--ink-sepia); }
.tale .btn.ghost { color: var(--ink-dark); border-color: var(--ink-sepia); }
.tale-moon .moon-svg { filter: none; }
.tale-symbol .sym-svg * { stroke: var(--ink-sepia) !important; }
/* The ink: each letter blooms dark and bleeding, then settles into the paper. */
.tale-p.inking .ink { animation: ink-bloom 1.6s ease-out both; animation-delay: var(--i); }
.tale-p.inked-done .ink { animation: none; }
@keyframes ink-bloom {
  0% { color: transparent; text-shadow: 0 0 0 rgba(42, 26, 16, 0); }
  35% { color: rgba(42, 26, 16, 0.45); text-shadow: 0 0 6px rgba(42, 26, 16, 0.9), 0 0 1px rgba(42, 26, 16, 0.9); }
  100% { color: var(--ink-dark); text-shadow: 0 0 0 rgba(42, 26, 16, 0); }
}
.tale-p.inking { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .tale-p.inking .ink { animation: none; } }

/* ---------- 18 Oct quick lane (Ivan): each kind its own colour; the evening summary at dusk; filters and a jump to a date ---------- */
:root {
  --k-tarot: #c8a463; --k-daycard: #e0c27a; --k-cup: #a0714b; --k-sky: #7f8fd6; --k-calendar: #5fb3a6; --k-numbers: #d6a04f;
  --k-dreams: #a98bd8; --k-beans: #8bb36a; --k-iching: #6fb39a; --k-palm: #d58f8f; --k-runes: #a9a39a; --k-observer: #6aa9c4;
  --dusk-1: #2a1830; --dusk-2: #3b1e2c; --dusk-glow: #e39a6a;
}
.timeline li { --k: var(--gilt-dim); }
.timeline li.tl-tarot { --k: var(--k-tarot); } .timeline li.tl-daycard { --k: var(--k-daycard); } .timeline li.tl-cup { --k: var(--k-cup); }
.timeline li.tl-sky { --k: var(--k-sky); } .timeline li.tl-calendar { --k: var(--k-calendar); } .timeline li.tl-numbers { --k: var(--k-numbers); }
.timeline li.tl-dreams { --k: var(--k-dreams); } .timeline li.tl-beans { --k: var(--k-beans); } .timeline li.tl-iching { --k: var(--k-iching); }
.timeline li.tl-palm { --k: var(--k-palm); } .timeline li.tl-runes { --k: var(--k-runes); } .timeline li.tl-observer { --k: var(--k-observer); }
.timeline li > button { border-left: 4px solid var(--k); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 12%, transparent), transparent 70%), var(--velvet); }
.timeline li .when { color: var(--k); }
/* The filter chips (the timeline and "Писма от бъдещето") and the jump to a date. */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.list-tools .chips { gap: 6px; }
.list-tools .chip { --k: var(--gilt-dim); font-family: var(--display-sc); letter-spacing: 0.06em; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--k); background: transparent; color: var(--text); cursor: pointer; }
.list-tools .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--k) 28%, transparent); color: var(--bone); }
.list-tools .chip.tl-tarot { --k: var(--k-tarot); } .list-tools .chip.tl-daycard { --k: var(--k-daycard); } .list-tools .chip.tl-cup { --k: var(--k-cup); }
.list-tools .chip.tl-sky { --k: var(--k-sky); } .list-tools .chip.tl-calendar { --k: var(--k-calendar); } .list-tools .chip.tl-numbers { --k: var(--k-numbers); }
.list-tools .chip.tl-dreams { --k: var(--k-dreams); } .list-tools .chip.tl-beans { --k: var(--k-beans); } .list-tools .chip.tl-iching { --k: var(--k-iching); }
.list-tools .chip.tl-palm { --k: var(--k-palm); } .list-tools .chip.tl-runes { --k: var(--k-runes); } .list-tools .chip.tl-observer { --k: var(--k-observer); }
.list-tools .chip.chip-tale { --k: var(--paper-edge); } .list-tools .chip.chip-note { --k: var(--dusk-glow); } .list-tools .chip.chip-letter { --k: var(--gilt); }
.list-tools .jump { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-family: var(--display-sc); font-size: 0.85rem; color: var(--muted); }
.list-tools .jump input { font: inherit; color: var(--text); background: var(--velvet); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; color-scheme: dark; }
/* The evening summary: its own short card under the tale, at dusk. */
.note-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--dusk-glow) 45%, transparent);
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--dusk-glow) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--dusk-2), var(--dusk-1)); }
.note-card[hidden] { display: none; }
.note-card-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.note-card-mark { width: 40px; height: 40px; justify-self: center; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dusk-glow) 60%, transparent)); }
.note-card-mark svg { width: 40px; height: 40px; }
.note-card-mark svg path { fill: var(--dusk-glow); }
.note-card-mark svg path.hz { fill: none; stroke: var(--dusk-glow); stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.note-card-kicker { margin: 0; font-family: var(--display-sc); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--dusk-glow); }
.note-card-title { margin: 0; font-family: var(--display); font-size: 1.2rem; color: var(--bone); }
.note-card-lede { margin: 0; color: var(--text); font-style: italic; }
.note-card-body { display: none; }
.note-card.open .note-card-lede { display: none; }
.note-card.open .note-card-body { display: block; }
.note-card-body p { margin: 0 0 0.7em; max-width: none; }
.note-card .note-card-toggle { align-self: flex-start; border-color: color-mix(in srgb, var(--dusk-glow) 60%, transparent); color: var(--bone); }
/* "Писма от бъдещето": each kind keeps its look — the tale on paper, the summary at dusk, the letter in gold. */
.future-list { gap: 10px; }
.future-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.future-item[hidden] { display: none; }
.future-item.future-tale { background: radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.35), transparent 55%), var(--paper); border-color: var(--paper-edge); color: var(--ink-dark); }
.future-item.future-tale .future-kind, .future-item.future-tale .future-when { color: var(--ink-sepia); }
.future-item.future-tale .future-what, .future-item.future-tale .future-body p { color: var(--ink-dark); }
.future-item.future-tale .future-body p.lettrine::first-letter { color: var(--ink); }
.future-item.future-note { background: linear-gradient(160deg, var(--dusk-2), var(--dusk-1)); border-color: color-mix(in srgb, var(--dusk-glow) 40%, transparent); }
.future-item.future-note .future-kind { color: var(--dusk-glow); }
.future-item.future-letter { border-color: var(--gilt-dim); background: linear-gradient(160deg, color-mix(in srgb, var(--gilt) 10%, transparent), transparent 60%), var(--velvet); }
.future-item.flash { outline: 2px solid var(--gilt); outline-offset: 2px; }

/* 18 Oct (Ivan): the weather on the paper itself, always under the ink. */
.tale > :not(.paper-wx) { position: relative; z-index: 1; }
.paper-wx { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; -webkit-clip-path: inset(0 round 6px); clip-path: inset(0 round 6px); }
.paper-wx-view { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.paper-wx-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper-wx-view i { position: absolute; display: block; }
/* Rain: a drop lands, darkens the paper with a slightly darker rim, then dries. */
.paper-wx b { position: absolute; left: var(--x); top: var(--y); width: var(--d); height: calc(var(--d) * var(--e)); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, rgba(110, 78, 40, 0.10) 0, rgba(110, 78, 40, 0.14) 55%, rgba(85, 58, 28, 0.26) 66%, rgba(85, 58, 28, 0) 74%);
  animation: paper-drop var(--t) ease-out forwards; }
@keyframes paper-drop { 0% { opacity: 0; transform: scale(0.5); } 6% { opacity: 1; transform: scale(1); } 45% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.06); } }
/* Mist: the edges of the sheet fogged, breathing slowly. */
.wx-mist .paper-wx-view { box-shadow: inset 0 0 70px 26px rgba(246, 246, 250, 0.55); animation: paper-fog 9s ease-in-out infinite alternate; }
.wx-mist i { width: 90%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(250, 250, 253, 0.5), transparent 68%); filter: blur(8px); }
.wx-mist .pm-a { top: 4%; left: -45%; animation: paper-mist 34s linear infinite; }
.wx-mist .pm-b { top: 46%; left: -60%; animation: paper-mist 46s linear infinite -16s; }
.wx-mist .pm-c { top: 76%; left: -50%; animation: paper-mist 40s linear infinite -28s; }
@keyframes paper-fog { from { box-shadow: inset 0 0 60px 18px rgba(246, 246, 250, 0.45); } to { box-shadow: inset 0 0 90px 34px rgba(246, 246, 250, 0.62); } }
@keyframes paper-mist { from { transform: translateX(0); } to { transform: translateX(170%); } }
/* Heat: the sheet warms from below. */
.wx-haze i { inset: 0; background: radial-gradient(ellipse 100% 60% at 50% 108%, rgba(225, 125, 45, 0.42), transparent 72%), radial-gradient(ellipse 70% 35% at 50% -6%, rgba(255, 180, 95, 0.24), transparent 70%); box-shadow: inset 0 0 50px 10px rgba(220, 140, 60, 0.18);
  animation: paper-heat 6s ease-in-out infinite alternate; }
@keyframes paper-heat { from { opacity: 0.65; } to { opacity: 1; } }
/* Sun: a warm patch of light drifting across the page. */
.wx-glow i { width: 120%; height: 70%; top: 5%; left: -60%; background: radial-gradient(ellipse at center, rgba(255, 226, 160, 0.5), rgba(255, 214, 140, 0.18) 45%, transparent 70%);
  animation: paper-sun 40s ease-in-out infinite alternate; }
@keyframes paper-sun { from { transform: translate(0, 0); } to { transform: translate(90%, 30%); } }
@media (prefers-reduced-motion: reduce) { .paper-wx i, .paper-wx-view { animation: none; } .wx-glow i { left: -10%; } }
.theatre.still .paper-wx i, .theatre.still .paper-wx-view { animation: none; }

/* ---------- 19 Oct quick lane (Ivan): on a wide screen the tale and the evening summary sit side by side; the daily strip's buttons line up at the bottom ---------- */
@media (min-width: 900px) {
  #v-menu { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  #v-menu > * { flex: 1 1 100%; min-width: 0; }
  #v-menu > .story-card, #v-menu > .note-card { flex: 1 1 calc(50% - 12px); box-sizing: border-box; }
}
.note-card.empty .note-card-lede { color: var(--muted); }
.today-items .today-item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; position: relative; }
.today-items .today-item > .today-mark { position: absolute; top: 16px; left: 16px; }
.today-items .today-item > .today-mark.card { top: 15px; left: 23px; }
.today-items .today-item > h3 { min-height: 52px; display: flex; align-items: center; align-self: stretch; text-align: left; padding-left: 64px; }
.today-items .today-item > .row { margin-top: auto; padding-top: 4px; }
.today-items .today-item > .row .btn { flex: 1 1 auto; }

/* ---------- 21 Oct quick lane (Ivan): the weather behind the tale a little easier to see ---------- */
.layer-mist i { background: radial-gradient(ellipse at center, rgba(205, 200, 214, 0.26), transparent 65%); }
.layer-glow i { background: radial-gradient(ellipse 70% 45% at 70% -5%, rgba(255, 210, 140, 0.34), transparent 70%); }

/* ---------- charter 6 · build-6: Stars and Numbers for someone else, and a match from one's own screen ---------- */
.other-form { display: flex; flex-direction: column; gap: 14px; }
.other-form > h2, .other-form > p { margin: 0; }
.other-form .label { margin: 0 0 6px; font-family: var(--display-sc); letter-spacing: 0.1em; font-size: 0.85rem; color: var(--gilt-dim); }
.other-form input[type="date"], .other-form input[type="text"], .other-form input[type="time"] { caret-color: var(--gilt); min-height: 44px; box-sizing: border-box; }
.other-form .topics button { min-height: 44px; }
.other-form .topics button:disabled { opacity: 0.4; cursor: not-allowed; }
.other-form .row .btn, .other-form .place-chosen .btn { min-height: 44px; }
.other-form .check { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.other-recent .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.other-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--gilt-dim); background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.other-chip:hover, .other-chip:focus-visible { border-color: var(--gilt); border-style: solid; }
#otherNote { border-left: 2px solid var(--gilt); padding-left: 10px; }
.match-view .pos-list li { line-height: 1.6; }
.match-view .pos-list b { font-weight: 600; color: var(--bone); }
.match-view .pos-list { grid-template-columns: 1fr; }

/* 23 Oct (Charter 6 quick lane): the "not enough credits" panel is a column, so its lines take their own height, not 240 px */
.topup > p { flex: 0 0 auto; }

/* 27 Oct (opening for sales): the seller on the landing page's foot */
.foot .seller { font-size: 0.8rem; color: var(--muted); }