/* ==========================================================================================================
   SPRUCE (2026-10-26): the site's look. Near-black spruce green with a hint of malachite where the light falls at the top,
   ivory type set in a light serif, antique-gold hairlines; no glows, no gradient lettering, no star fields.
   Loaded last on every page (home + card pages) and overrides the earlier lapis/gold looks.
   ========================================================================================================== */
:root {
  --ink: #0a1512; --lapis: #0f1f1a; --lapis-2: #152a23; --lapis-3: #1d362d;
  --gold: #c8a96a; --gold-hi: #e6d2a3; --gold-lo: #8c7546; --line: rgba(200,169,106,0.2); --line-2: rgba(200,169,106,0.36);
  --ivory: #ece6d6; --muted: #aeac9b; --dim: #82847a; --vermilion: #b9503d;
  --gilt: linear-gradient(180deg, #e9d6a8 0%, #c8a96a 52%, #a3864e 100%);
  --halo: none;
  --display: "Serif", "Songti SC", "SimSun", serif; --brush: "Serif", "Songti SC", serif; --kai: "Serif", "Songti SC", serif;
  --sans: "Serif", "Songti SC", "SimSun", serif; --latin: "Corm", "Serif", serif; --fell: "Corm", "Serif", serif;
  --spruce-top: #1d3a33; --spruce: #12241f; --spruce-deep: #0a1512;
}
html[lang=en] { --display: "Corm", "Serif", serif; --sans: "Corm", "Serif", serif; --brush: "Corm", "Serif", serif; --kai: "Corm", "Serif", serif; --latin: "Corm", "Serif", serif; }
html { background: var(--spruce-deep); }
body { background: transparent; }   /* a body background would no longer propagate to the canvas and would cover .page-bg (z-index -2) */
body { color: var(--ivory); }
body *, body *::before, body *::after { text-shadow: none; }
html[lang=en] body { font-size: 17px; }

/* ---------- backdrop: light from above, a breath of malachite in it, deep edges ---------- */
.page-bg { background:
    radial-gradient(760px 420px at 50% 120px, rgba(44,92,86,0.42) 0%, rgba(44,92,86,0) 72%),
    radial-gradient(1500px 1100px at 50% 360px, var(--spruce-top) 0%, var(--spruce) 52%, var(--spruce-deep) 100%) no-repeat,
    var(--spruce-deep); }
.page-bg::before, .page-bg::after, .astro, #dust, .grain { display: none !important; }
.page-vignette { background: radial-gradient(120% 90% at 50% 38%, rgba(4,9,7,0) 58%, rgba(4,9,7,0.45) 100%); }
.rite::before { display: none; }

/* ---------- nav ---------- */
.nav { background: rgba(10,21,18,0.94); box-shadow: 0 1px 0 rgba(200,169,106,0.24); }
.nav::after { display: none; }
.brand-word { font: 500 22px var(--latin); letter-spacing: 0.08em; color: var(--ivory); }
.brand-sub { font-family: var(--display); font-weight: 400; letter-spacing: 0.32em; font-size: 12px; color: var(--muted); }
.more-btn { font: 400 14px var(--display); letter-spacing: 0.24em; color: var(--muted); }
.more-btn:hover, .more.open .more-btn { color: var(--ivory); }
.more-menu { background: #0f1f1a; border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.more-menu b { font-family: var(--display); font-weight: 500; letter-spacing: 0.1em; color: var(--ivory); }
.acct { font-family: var(--display); border-color: var(--line-2); color: var(--ivory); background: transparent; letter-spacing: 0.14em; }
.acct:hover { border-color: var(--gold); }
.acct.in { background: var(--gold); color: #13241f; }

/* ---------- the rite: an arched gold frame around it, light serif type ---------- */
.altar:not([data-phase="draw"]):not([data-phase="read"]) .rite { padding: 46px 0 34px; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .rite::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; width: min(760px, 94vw); transform: translateX(-50%); pointer-events: none;
  border: 1px solid rgba(200,169,106,0.2); border-radius: 380px 380px 4px 4px; box-shadow: 0 0 0 9px rgba(200,169,106,0), 0 0 0 10px rgba(200,169,106,0.08); }
.rubric { background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; color: #f2ecdd;
  font: 300 clamp(42px, min(5vw, 8vh), 68px) / 1.15 var(--display); letter-spacing: 0.34em; text-indent: 0.34em; }
html[lang=en] .rubric { font-family: var(--latin); font-weight: 400; letter-spacing: 0.04em; text-indent: 0; font-size: clamp(44px, 5vw, 70px); }
.rubric-sub { max-width: none; font: 400 17px / 1.7 var(--display); letter-spacing: 0.14em; color: var(--muted); }
html[lang=en] .rubric-sub { font-family: var(--latin); font-style: italic; letter-spacing: 0.02em; font-size: 19px; }
.leaf .rubric-sub::after { width: 120px; margin-top: 18px; background: linear-gradient(90deg, transparent, rgba(200,169,106,0.6), transparent) center / 100% 1px no-repeat; }
.panel .ink-field label, .ink-k { font: 400 13px var(--display); letter-spacing: 0.46em; text-indent: 0.46em; color: var(--gold); }
html[lang=en] .panel .ink-field label, html[lang=en] .ink-k { font-family: var(--latin); letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; font-size: 12.5px; }
.panel .ink-field input { font: 300 20px var(--display); letter-spacing: 0.06em; color: var(--ivory); border-bottom: 1px solid rgba(236,230,214,0.22); background-image: none; }
html[lang=en] .panel .ink-field input { font-family: var(--latin); font-size: 21px; }
.panel .ink-field input::placeholder { color: rgba(236,230,214,0.42); }
.panel .ink-field input:hover { border-bottom-color: rgba(236,230,214,0.4); }
.panel .ink-field input:focus { border-bottom-color: var(--gold); box-shadow: none; }
.ink-ex { font: 400 14px / 1.8 var(--display); letter-spacing: 0.06em; color: var(--muted); }
.ink-ex span { color: var(--dim); }
.ink-ex button { color: var(--ivory); text-decoration-color: rgba(200,169,106,0.45); }
.ink-ex button:hover { color: var(--gold-hi); }
.ink-svg { filter: none; }
.ink-svg rect, .ink-svg g:nth-child(2n) rect { fill: rgba(200,169,106,0.03); stroke: rgba(200,169,106,0.75); stroke-width: 0.022; }
.ink-svg text { fill: var(--gold); font-family: var(--latin); font-weight: 400; }
.ink-pos { font: 400 15px / 1.6 var(--display); letter-spacing: 0.1em; color: var(--ivory); }
html[lang=en] .ink-pos { font-family: var(--latin); letter-spacing: 0.02em; font-size: 16px; }
.ink-pos b { color: var(--gold); font-family: var(--latin); }
.quota { color: var(--muted); font-family: var(--display); letter-spacing: 0.06em; }
.quota .link-btn { color: var(--ivory); font-family: var(--display); }
.rest-fan i { box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,169,106,0.3); }
.seal-wrap { margin-top: 14px; }

/* today / birth */
.panel .today-name, .panel .bcard-name { font-family: var(--display); font-weight: 400; letter-spacing: 0.14em; color: #f2ecdd; }
.panel .today-advice, .panel .bcard-text, .panel .birth-note { font-family: var(--display); color: var(--ivory); }
.panel .kicker, .panel .bcard-role, .panel .field label { color: var(--gold); font-family: var(--display); letter-spacing: 0.3em; }
.panel .help, .panel .today-meta, .panel .method, .birth-ph p { color: var(--muted); font-family: var(--display); }
.panel .alm { background: rgba(15,31,26,0.7); border-color: var(--line); }
.panel .date3 select { background-color: #0f1f1a; border-color: var(--line-2); color: var(--ivory); font-family: var(--display); }

/* ---------- buttons: matte gilt plaque, ghost with a hairline ---------- */
.btn-gold { font-family: var(--display); font-weight: 500; letter-spacing: 0.26em; color: #13241f; background: var(--gilt); filter: none; }
html[lang=en] .btn-gold { font-family: var(--latin); letter-spacing: 0.14em; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--ivory); border-color: var(--line-2); font-family: var(--display); letter-spacing: 0.18em; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.to-top { background: #0f1f1a; border-color: var(--line-2); color: var(--gold); }

/* ---------- sections ---------- */
.h2, .section-title .h2 { font-family: var(--display); font-weight: 300; letter-spacing: 0.32em; color: #f2ecdd; }
html[lang=en] .h2 { font-family: var(--latin); font-weight: 400; letter-spacing: 0.03em; }
.lead { color: var(--muted); font-family: var(--display); letter-spacing: 0.1em; }
.plays .lead { max-width: none; }

/* plays: the art shows in its own colours under a neutral dark veil, so the page is not green-on-green */
.cons-filter button { background: transparent; border-color: var(--line); color: var(--muted); font-family: var(--display); letter-spacing: 0.22em; }
html[lang=en] .cons-filter button { font-family: var(--latin); letter-spacing: 0.04em; }
.cons-filter button:hover { color: var(--ivory); border-color: var(--line-2); }
.cons-filter button[aria-pressed="true"] { background: var(--ivory); color: #13241f; border-color: var(--ivory); }
.cons { background: #0b0f0d; border: 1px solid rgba(200,169,106,0.2); border-radius: 4px; }
.cons-bg { opacity: 0.58; inset: 0; background-size: cover; }
.cons::before { background: linear-gradient(180deg, rgba(8,10,9,0.12) 0%, rgba(8,10,9,0.24) 40%, rgba(8,10,9,0.86) 80%, rgba(8,10,9,0.95) 100%); }
.cons:hover { border-color: rgba(200,169,106,0.5); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.cons:hover .cons-bg { opacity: 0.72; }
.c-cards rect, .cons:hover .c-cards rect { fill: transparent; stroke: rgba(200,169,106,0.7); stroke-width: 0.02; }
.c-line polyline, .cons:hover .c-line polyline { stroke: rgba(230,210,163,0.75); }
.c-star circle { fill: #e9d6a8; } .c-star circle.h, .c-dust { display: none; }
.cons-txt b { font-family: var(--display); font-weight: 400; letter-spacing: 0.16em; color: #f2ecdd; }
html[lang=en] .cons-txt b { font-family: var(--latin); font-weight: 500; letter-spacing: 0.02em; }
.cons-txt small, .cons-k, .cons-k i { font-family: var(--display); color: var(--muted); }
.cons-k { letter-spacing: 0.3em; font-size: 11.5px; }
.cons.on { border-color: var(--gold); }

/* draw / reading: plain surfaces in the same greens */
.slot-frame { border-color: rgba(200,169,106,0.45); }
.hint, .slot-legend { color: var(--muted); font-family: var(--display); }
.reading-list .ritem, .summary, .verdict { background: rgba(15,31,26,0.72); border-color: var(--line); }
.summary h3, .summary.ai h4, .rname, .verdict-word { font-family: var(--display); font-weight: 400; color: #f2ecdd; letter-spacing: 0.12em; }
.rpos { color: var(--gold); font-family: var(--display); }

/* dialogs, guide, footer */
.modal-body { background: linear-gradient(180deg, #13261f, #0c1814); border-color: var(--line-2); }
.share-title { font-family: var(--display); font-weight: 400; letter-spacing: 0.16em; color: #f2ecdd; }
.acct-tabs button { font-family: var(--display); letter-spacing: 0.24em; }
.acct-tabs button[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--gold); }
.guide-list b, .facet-k { font-family: var(--display); font-weight: 500; color: var(--gold-hi); }
.foot-quote { font-family: var(--display); font-weight: 300; letter-spacing: 0.12em; color: var(--ivory); }
.foot-brand { font-family: var(--latin); letter-spacing: 0.2em; }

/* card pages (/cards/...): no photographic dome behind them any more */
body.pg { background: transparent; }
body.pg::before { inset: 0 !important; height: auto !important; opacity: 1 !important; background: url(../assets/ui/sky_tile.webp) 0 0 / 1200px 1200px repeat, radial-gradient(760px 420px at 50% 120px, rgba(44,92,86,0.42) 0%, rgba(44,92,86,0) 72%), radial-gradient(1400px 900px at 50% 200px, var(--spruce-top) 0%, var(--spruce) 52%, var(--spruce-deep) 100%) !important; }

/* fixes after the first look (2026-10-26) */
.altar:not([data-mode="ask"]) .rite::after { display: none; }
[data-panel="today"] .rubric, [data-panel="birth"] .rubric { font-size: clamp(36px, 3.6vw, 52px); letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap; }
html[lang=en] .btn.seal, html[lang=en] .seal-wrap .btn.seal { font: 600 14px var(--latin); letter-spacing: 0.1em; text-indent: 0.1em; }
.cons-txt small { letter-spacing: 0.04em; text-align: left; word-spacing: normal; }
html[lang=en] .cons-txt small { letter-spacing: 0; }
@media (min-width: 761px) and (max-height: 820px) {
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .rite { padding: 16px 0 8px; }
  .rubric { font-size: clamp(38px, min(4.6vw, 7vh), 60px); }
  .seal-wrap { margin-top: 4px; }
}


/* ==========================================================================================================
   PLAYS (2026-10-26): desktop = one large star chart, every play a constellation in its real shape (positions set by
   app.js as --x/--y); phones = tarot-card tiles in two columns. No card art behind either.
   ========================================================================================================== */
.cons-bg, .cons::before, .c-dust { display: none !important; }
.c-cards rect, .cons:hover .c-cards rect { fill: rgba(200,169,106,0.03); stroke: rgba(200,169,106,0.6); stroke-width: 0.024; }
.c-line polyline, .cons:hover .c-line polyline { stroke: rgba(230,210,163,0.55); }
.c-star circle { fill: #f0e2bd; }
#playsGrid .chart-bg { display: none; }

@media (min-width: 761px) {
  .cons-filter { display: none; }
  #playsGrid { position: relative; display: block; height: clamp(720px, 78vw, 880px); margin-top: 34px; grid-template-columns: none; }
  #playsGrid .chart-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #playsGrid .cons, #playsGrid .cons[hidden] { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -42%); display: flex !important; flex-direction: column; align-items: center;
    padding: 6px 4px 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; overflow: visible; text-align: center; z-index: 1; transition: none; }
  #playsGrid .cons:hover, #playsGrid .cons:focus-visible { transform: translate(-50%, -42%); z-index: 3; box-shadow: none; outline: none; }
  #playsGrid .cons-map { position: static; width: 100%; height: var(--mh); top: auto; left: auto; }
  #playsGrid .cons-txt { margin-top: 10px; justify-items: center; position: static; }
  #playsGrid .cons-k { display: none; }
  #playsGrid .cons-txt b { font-size: 17px; letter-spacing: 0.24em; color: #e9e2cf; transition: color .25s; }
  html[lang=en] #playsGrid .cons-txt b { font-size: 18px; letter-spacing: 0.03em; }
  #playsGrid .cons.core .cons-txt b { font-size: 24px; }
  /* the description: a small plate under the name, shown on hover / keyboard focus */
  #playsGrid .cons-txt small { position: absolute; left: 50%; top: calc(100% + 8px); width: 220px; transform: translate(-50%, -4px); display: block; -webkit-line-clamp: unset; overflow: visible;
    padding: 10px 14px; border: 1px solid rgba(200,169,106,0.32); border-radius: 4px; background: #0f1f1a; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
  #playsGrid .cons.low .cons-txt small { top: auto; bottom: calc(100% + 4px); }
  #playsGrid .cons:hover .cons-txt small, #playsGrid .cons:focus-visible .cons-txt small { opacity: 1; transform: translate(-50%, 0); }
  #playsGrid .cons:hover .c-cards rect, #playsGrid .cons:focus-visible .c-cards rect { stroke: rgba(240,220,170,1); fill: rgba(200,169,106,0.1); }
  #playsGrid .cons:hover .cons-txt b, #playsGrid .cons:focus-visible .cons-txt b { color: var(--gold-hi); }
  #playsGrid .cons:focus-visible .cons-map { outline: 1px dashed rgba(230,210,163,0.6); outline-offset: 6px; }
  #playsGrid .cons.on .cons-txt b { color: var(--gold-hi); }
}

@media (max-width: 760px) {
  #playsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; }
  #playsGrid .cons { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 9 / 15; justify-content: flex-end; align-items: center; text-align: center;
    padding: 16px 12px 18px; border-radius: 10px; border: 1px solid rgba(200,169,106,0.5); background: linear-gradient(180deg, #13261f, #0c1814);
    outline: 1px solid rgba(200,169,106,0.2); outline-offset: -7px; }
  #playsGrid .cons::after { content: ""; position: absolute; left: 50%; top: 8%; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgba(200,169,106,0.7); }
  #playsGrid .cons-map { left: 20%; width: 60%; top: 16%; height: 40%; }
  #playsGrid .cons-txt { justify-items: center; }
  #playsGrid .cons-txt b { order: 1; font-size: 18px; letter-spacing: 0.14em; }
  #playsGrid .cons-k { order: 2; margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; }
  #playsGrid .cons-txt small { display: none; }
  #playsGrid .cons:active { transform: scale(0.98); }
}
@media (min-width: 761px) and (max-width: 1240px) {
  #playsGrid .cons, #playsGrid .cons[hidden] { left: calc(50% + (var(--x) - 50%) * 0.9); width: calc(var(--w) * 0.82); }
  #playsGrid .cons-map { height: calc(var(--mh) * 0.85); }
  #playsGrid .cons-txt b { font-size: 15px; letter-spacing: 0.16em; }
}

/* ---------- night sky (2026-10-26): user found the plain green flat. A natural star field (mostly faint dust, a few brighter
   stars, uneven density, no gold) and a faint grey-teal milky way across the top. Both pre-drawn images: no runtime cost ---------- */
.page-bg::before { display: block !important; content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(../assets/ui/sky_tile.webp) 0 0 / 1200px 1200px repeat; opacity: 0.75; }
.page-bg::after { display: block !important; content: ""; position: absolute; left: 50%; top: -120px; width: max(1600px, 110vw); aspect-ratio: 1600 / 2200; transform: translateX(-50%); pointer-events: none;
  background: url(../assets/ui/milkyway.webp) center top / 100% 100% no-repeat; opacity: 0.55; }
@media (max-width: 760px) { .page-bg::after { width: 1300px; } .page-bg::before { background-size: 900px 900px; } }
.page-bg::before { opacity: 0.55; }


/* ---------- back button, bigger English tips, card-page zoom (2026-10-26) ---------- */
.rite-back { position: absolute; z-index: 5; left: 0; top: 4px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10,21,18,0.6); color: var(--muted); font: 400 15px var(--display); letter-spacing: 0.14em; cursor: pointer; transition: color .2s, border-color .2s; }
.rite-back[hidden] { display: none; }
.rite-back:hover { color: var(--ivory); border-color: var(--line-2); }
.rite-back:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
html[lang=en] .rite-back { font-family: var(--latin); letter-spacing: 0.04em; font-size: 16px; }
.altar-inner { position: relative; }
@media (max-width: 760px) { .rite-back { top: -2px; height: 36px; font-size: 14px; } }
@media (min-width: 761px) {
  html[lang=en] #playsGrid .cons-txt small { width: 270px; font-size: 16.5px; line-height: 1.5; padding: 12px 16px; color: #d6d2c2; }
  #playsGrid .cons-txt small { font-size: 14px; color: #c9c6b6; }
}
.cp-lb { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; display: grid; place-items: center; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.cp-lb.on { opacity: 1; }
.cp-lb::backdrop { background: rgba(5,10,8,0.88); }
.cp-lb img { max-width: min(92vw, 640px); max-height: 92dvh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }

/* star field v2 (2026-10-26): crisp 2x pinpoints instead of soft dots, smooth milky way haze */
.page-bg::before { opacity: 0.95; }
.page-bg::after { opacity: 0.85; }
body.pg::before { background-size: 1200px 1200px, auto, auto !important; }

/* ---------- gilded star atlas (2026-10-26): white specks on green read as dust. Now gold stars graded by magnitude, real
   constellations in fine gold lines around the edges, the green falling to green-black. Motion: a few stars breathe
   (opacity only), the constellation layer drifts slower than the page (scroll-driven, compositor only, desktop only) ---------- */
html { background: #071210; }
.page-bg { background: radial-gradient(1300px 900px at 50% 260px, #1a352e 0%, #10241f 45%, #081411 100%) no-repeat, #071210; }
.page-vignette { background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%); }
.page-bg::before { background: url(../assets/ui/atlas_field.webp) 0 0 / 1200px 1200px repeat; opacity: 0.8; }
.page-bg::after { display: block !important; content: ""; position: absolute; left: 0; right: 0; top: -25%; bottom: 0; width: auto; aspect-ratio: auto; transform: none;
  background: url(../assets/ui/atlas_cons.webp) 0 0 / 1900px 1900px repeat; opacity: 0.85;
  -webkit-mask-image: radial-gradient(460px 520px at 50% calc(20% + 520px), rgba(0,0,0,.1), #000 100%); mask-image: radial-gradient(460px 520px at 50% calc(20% + 520px), rgba(0,0,0,.1), #000 100%); }
@media (max-width: 760px) {
  .page-bg::before { background-size: 900px 900px; }
  .page-bg::after { top: 0; background-size: 1300px 1300px; -webkit-mask-image: radial-gradient(300px 560px at 50% 520px, rgba(0,0,0,0) 40%, #000 100%); mask-image: radial-gradient(300px 560px at 50% 520px, rgba(0,0,0,0) 40%, #000 100%); }
}
@keyframes atlasDrift { from { transform: translateY(0); } to { transform: translateY(20%); } }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .page-bg::after { will-change: transform; animation: atlasDrift linear both; animation-timeline: scroll(root); }
  }
}
.twinkle { position: absolute; inset: 0; pointer-events: none; }
.twinkle i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: 0.55;
  background: radial-gradient(circle, #f6eace 0 1.3px, rgba(232,206,148,0.45) 2px, rgba(232,206,148,0) 70%); }
@keyframes breathe { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .twinkle i { animation: breathe var(--d) ease-in-out var(--l) infinite; } }
body.pg::before { background: url(../assets/ui/atlas_cons.webp) 0 0 / 1900px 1900px repeat, url(../assets/ui/atlas_field.webp) 0 0 / 1200px 1200px repeat,
  radial-gradient(1300px 900px at 50% 200px, #1a352e 0%, #10241f 45%, #081411 100%) !important; }

/* ---------- plain colour with depth (2026-10-26): stars removed at the user's request. No texture: only light. A pool of
   malachite light at the top, the spruce lit around the rite, softer pools further down that alternate sides so a long
   scroll keeps changing, the floor falling to green-black ---------- */
html { background: #08110f; }
.page-bg { background:
    radial-gradient(900px 520px at 50% 40px, rgba(58,116,104,0.38) 0%, rgba(58,116,104,0.12) 50%, rgba(58,116,104,0) 100%),
    radial-gradient(1500px 1100px at 50% 420px, #1d3b33 0%, rgba(22,44,38,0.85) 40%, rgba(14,28,24,0) 100%),
    radial-gradient(1100px 900px at 18% 1900px, rgba(30,60,52,0.55) 0%, rgba(30,60,52,0) 100%),
    radial-gradient(1200px 900px at 84% 3100px, rgba(32,64,56,0.5) 0%, rgba(32,64,56,0) 100%),
    radial-gradient(1100px 900px at 22% 4400px, rgba(28,56,49,0.45) 0%, rgba(28,56,49,0) 100%),
    linear-gradient(180deg, #11221d 0px, #0d1b17 1400px, #0b1714 3000px, #08110f 100%); }
.page-bg::before, .page-bg::after, .twinkle { display: none !important; animation: none !important; }
.page-vignette { background: radial-gradient(130% 100% at 50% 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.38) 100%); }
body.pg::before { background:
    radial-gradient(900px 520px at 50% 40px, rgba(58,116,104,0.38) 0%, rgba(58,116,104,0.12) 50%, rgba(58,116,104,0) 100%),
    radial-gradient(1500px 1100px at 50% 360px, #1d3b33 0%, rgba(22,44,38,0.85) 40%, rgba(14,28,24,0) 100%),
    linear-gradient(180deg, #11221d 0px, #0b1714 900px, #08110f 100%) !important; }
@media (max-width: 760px) {
  .page-bg { background:
    radial-gradient(520px 420px at 50% 20px, rgba(58,116,104,0.36) 0%, rgba(58,116,104,0) 100%),
    radial-gradient(800px 900px at 50% 380px, #1d3b33 0%, rgba(22,44,38,0.8) 40%, rgba(14,28,24,0) 100%),
    radial-gradient(700px 700px at 0% 1900px, rgba(30,60,52,0.55) 0%, rgba(30,60,52,0) 100%),
    radial-gradient(700px 700px at 100% 3300px, rgba(32,64,56,0.5) 0%, rgba(32,64,56,0) 100%),
    linear-gradient(180deg, #11221d 0px, #0d1b17 1400px, #0b1714 3000px, #08110f 100%); }
}

/* ---------- legibility on green (2026-10-26): text and hairlines were too close to the ground. Brighter ivory, muted and
   dim lifted to clear AA on the darkest green, gold and lines stronger ---------- */
:root { --ivory: #f6f1e5; --muted: #d2cebf; --dim: #aaa999; --gold: #dcc082; --gold-hi: #f2dfae; --gold-lo: #a88d57;
  --line: rgba(220,192,130,0.34); --line-2: rgba(220,192,130,0.56); }
body { color: var(--ivory); }
.panel .ink-field input::placeholder, .field input::placeholder { color: rgba(246,241,229,0.6); }
#playsGrid .chart-bg g[stroke] { stroke: #e2c88e; }
#playsGrid .chart-bg g[fill]:not([fill="none"]) { fill: #f6ead0; }
.c-cards rect { stroke: rgba(226,200,142,0.85); }
.c-line polyline { stroke: rgba(240,222,180,0.75); }
.c-star circle { fill: #fbf0d2; }
#playsGrid .cons-txt b { color: #f6f1e5; }
@media (min-width: 761px) { #playsGrid .cons-txt small, html[lang=en] #playsGrid .cons-txt small { color: #e6e2d4; background: #10221c; border-color: rgba(220,192,130,0.5); } }
.ink-k, .panel .ink-field label { font-size: 14.5px; font-weight: 500; color: var(--gold-hi); }
#playEx span { color: var(--muted); }
#playEx button { color: var(--ivory); }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .rite::after { border-color: rgba(220,192,130,0.36); box-shadow: 0 0 0 9px rgba(220,192,130,0), 0 0 0 10px rgba(220,192,130,0.14); }