/* ==========================================================================================================
   THE RITE (2026-10-26): the book is gone. At rest the play is inscribed straight onto the dome painting: a dark pool of
   shadow behind the centre keeps the type readable, the spread glows as gold outlines, a fanned deck waits under the seal.
   Loaded after style.css and overrides its book / parchment rules (same selectors).
   ========================================================================================================== */
.rite { position: relative; isolation: isolate; max-width: 980px; margin: 0 auto; }
.rite::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1500px, 150vw); height: 125%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,9,7,0.82) 0%, rgba(5,9,7,0.66) 46%, rgba(5,9,7,0.3) 74%, rgba(5,9,7,0) 100%); }
.altar[data-phase="draw"] .rite::before, .altar[data-phase="read"] .rite::before { opacity: 0.55; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .panel { position: relative; inset: auto; display: block; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; filter: none;
  --ivory: #f3ead2; --muted: #c9bea3; --dim: #a99d84; --gold: #d8b46a; --gold-hi: #f4e1a6; --line: rgba(216,180,106,0.28); --line-2: rgba(216,180,106,0.5); }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .panel > *, .altar:not([data-phase="draw"]):not([data-phase="read"]) .stage { display: block; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .stage .table { display: none; }
.altar { padding-top: 84px; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .altar-inner { display: grid; align-content: center; min-height: calc(100dvh - 150px); }

/* everything inscribed is lit type on the painting: no multiply, light palette */
.leaf .rubric, .leaf .rubric-sub, .ink-field label, .ink-field input, .ink-ex, .ink-k, .ink-map, .ink-pos, .leaf .help, .leaf .method, .birth-ph p,
.today-text .kicker, .today-text .today-name, .today-text .today-advice, .today-text .today-meta, .leaf .field label, .leaf .bcard-role, .leaf .bcard-name, .leaf .bcard-text, .leaf .birth-note { mix-blend-mode: normal; }
.rubric { font: 400 clamp(46px, 5.6vw, 76px) / 1.1 var(--display); letter-spacing: 0.14em; text-indent: 0.14em; color: transparent;
  background: linear-gradient(180deg, #fff3cf 0%, #f0d48c 48%, #c99a48 100%); -webkit-background-clip: text; background-clip: text;
  text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 22px rgba(240,200,120,0.18)); }
html[lang=en] .rubric { font-family: var(--fell); letter-spacing: 0.02em; text-indent: 0; font-size: clamp(40px, 4.8vw, 64px); }
.rubric-sub { font: 400 clamp(16px, 1.55vw, 19px) / 1.65 var(--kai); color: #efe2c0; text-shadow: var(--halo); max-width: 34ch; margin: 0 auto; }
html[lang=en] .rubric-sub { font-family: var(--fell); font-style: italic; }
.leaf .rubric-sub::after { width: 180px; background: radial-gradient(circle, var(--gold-hi) 0 2.5px, transparent 3px) center / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(216,180,106,0.7) 30%, rgba(216,180,106,0.7) 70%, transparent) center / 100% 1px no-repeat; }

/* the question: one gilded line */
.panel .ink-field { justify-items: center; }
.panel .ink-field label { text-align: center; font: 400 15px var(--display); letter-spacing: 0.32em; text-indent: 0.32em; color: #d9b874; text-shadow: var(--halo); }
html[lang=en] .panel .ink-field label { font-family: var(--fell); letter-spacing: 0.12em; text-indent: 0.12em; }
.panel .ink-field input { width: min(640px, 100%); height: 58px; text-align: center; color: #fbf3dc; font: 400 clamp(19px, 1.9vw, 23px) var(--kai); letter-spacing: 0.03em;
  border-bottom: 1.5px solid rgba(216,180,106,0.55); background-image: linear-gradient(90deg, transparent, rgba(216,180,106,0.16) 20%, rgba(216,180,106,0.16) 80%, transparent);
  background-size: 100% 1px; background-position: 0 calc(100% - 5px); background-repeat: no-repeat; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
html[lang=en] .panel .ink-field input { font-family: var(--fell); }
.panel .ink-field input::placeholder { color: rgba(239,226,192,0.5); }
.panel .ink-field input:hover { border-bottom-color: rgba(244,225,166,0.8); }
.panel .ink-field input:focus { border-bottom-color: var(--gold-hi); box-shadow: 0 10px 24px -18px rgba(244,225,166,0.9); }
.ink-ex { color: #d8ccae; font: 400 15px / 1.7 var(--kai); text-shadow: var(--halo); }
.ink-ex span { color: #b9ab8c; }
.ink-ex button { color: #f1e4c2; text-decoration-color: rgba(216,180,106,0.6); }
.ink-ex button:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }
.ink-ex button:focus-visible { outline-color: var(--gold-hi); }

/* the spread: gold outlines that breathe */
.ink-k { color: #d9b874; font-size: 15px; letter-spacing: 0.36em; text-indent: 0.36em; text-shadow: var(--halo); }
.ink-svg { height: clamp(96px, 15vh, 160px); filter: drop-shadow(0 0 8px rgba(240,200,120,0.35)); }
.ink-svg rect { fill: rgba(216,180,106,0.07); stroke: #e9c97f; stroke-width: 0.03; }
.ink-svg g:nth-child(2n) rect { fill: rgba(216,180,106,0.04); }
.ink-svg text { fill: #f4e1a6; }
@media (prefers-reduced-motion: no-preference) { .ink-svg .m-card { animation: slotBreath 3.6s ease-in-out infinite; } .ink-svg .m-card:nth-child(2n) { animation-delay: -1.2s; } .ink-svg .m-card:nth-child(3n) { animation-delay: -2.4s; } }
@keyframes slotBreath { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
.ink-pos { color: #ece0c2; font-family: var(--kai); text-shadow: var(--halo); }
html[lang=en] .ink-pos { font-family: var(--fell); }
.ink-pos b { color: var(--gold); }
.ink-pos:not(.two) { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.quota { color: #c9bea3; text-shadow: var(--halo); }
.quota .link-btn { color: var(--gold-hi); }
.quota .link-btn:hover { color: #fff3cf; }

/* the waiting deck: a fan of card backs, the seal pressed onto its centre */
.seal-wrap { position: relative; display: grid; place-items: center; height: 150px; margin: 4px auto 0; width: min(420px, 100%); }
.rest-fan { position: absolute; left: 50%; bottom: 8px; width: 0; height: 0; pointer-events: none; }
.rest-fan i { position: absolute; left: -32px; bottom: 0; width: 64px; aspect-ratio: 9 / 16; border-radius: 5px; transform-origin: 50% 170%;
  background: url(../assets/ui/card_back_sm.webp) center / cover; box-shadow: 0 6px 14px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,180,106,0.35); transform: rotate(calc((var(--i) - 4) * 9deg)); opacity: 0.92; }
.rest-fan i:nth-child(1) { --i: 0; } .rest-fan i:nth-child(2) { --i: 1; } .rest-fan i:nth-child(3) { --i: 2; } .rest-fan i:nth-child(4) { --i: 3; } .rest-fan i:nth-child(5) { --i: 4; }
.rest-fan i:nth-child(6) { --i: 5; } .rest-fan i:nth-child(7) { --i: 6; } .rest-fan i:nth-child(8) { --i: 7; } .rest-fan i:nth-child(9) { --i: 8; }
.seal-wrap .btn.seal { position: relative; z-index: 1; margin: 0; width: 112px; height: 116px; font-size: 24px; }
.panel .btn.seal:focus-visible { outline-color: var(--gold-hi); }

/* layout at rest: one centred column (the two "leaves" stack) */
.altar:not([data-phase="draw"]):not([data-phase="read"]) .spread2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 30px); max-width: 860px; margin: 0 auto; text-align: center; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .spread2 > .leaf { gap: clamp(12px, 2vh, 20px); justify-content: flex-start; align-items: center; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .spread2.ask .leaf.r { gap: clamp(8px, 1.4vh, 14px); }
.ink-pos.two { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.ink-pos.dense { grid-template-columns: repeat(3, minmax(0, 210px)); }

/* today / birth: two columns again (card and words), light type */
@media (min-width: 761px) {
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .today.spread2, .altar:not([data-phase="draw"]):not([data-phase="read"]) [data-panel="birth"] .spread2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 64px); max-width: 940px; }
  .today.spread2 .today-card { width: clamp(180px, 20vw, 250px); }
}
.panel .today-name, .panel .bcard-name { color: var(--gold-hi); text-shadow: var(--halo); }
.panel .today-advice, .panel .bcard-text, .panel .birth-note { color: #ece0c2; text-shadow: var(--halo); }
.panel .kicker, .panel .bcard-role, .panel .field label, .panel .seg-legend { color: #d9b874; }
.panel .help, .panel .today-meta, .panel .method, .birth-ph p { color: #c9bea3; text-shadow: var(--halo); }
.panel .alm { background: rgba(10,18,16,0.55); }
.panel .btn-ghost { background: rgba(10,18,16,0.45); color: var(--ivory); border-color: var(--line-2); }
.panel .date3 select { background-color: rgba(10,18,16,0.6); border: 1px solid var(--line-2); color: var(--ivory); }
.panel .date3 select:invalid { color: #a99d84; }
.panel .today-card:not(.flipped)::after { color: var(--gold-hi); }

/* switching plays: re-inscribed, line by line */
@media (prefers-reduced-motion: no-preference) {
  .rite.swap .panel:not([hidden]) .leaf > * { animation: inscribe 0.7s var(--ease) both; }
  .rite.swap .panel:not([hidden]) .leaf > :nth-child(2) { animation-delay: 0.06s; } .rite.swap .panel:not([hidden]) .leaf > :nth-child(3) { animation-delay: 0.12s; }
  .rite.swap .panel:not([hidden]) .leaf > :nth-child(4) { animation-delay: 0.18s; } .rite.swap .panel:not([hidden]) .leaf.r > * { animation-delay: 0.22s; }
  .rite.swap .panel:not([hidden]) .leaf.r > :nth-child(2) { animation-delay: 0.3s; } .rite.swap .panel:not([hidden]) .leaf.r > :nth-child(3) { animation-delay: 0.36s; }
}
@keyframes inscribe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .altar { padding-top: 76px; }
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .altar-inner { min-height: 0; }
  .rite::before { top: 40%; height: 112%; width: 190vw; }
  .rubric { font-size: 44px; }
  .panel .ink-field input { height: 52px; font-size: 18px; }
  .ink-svg { height: 104px; }
  .ink-pos.two, .ink-pos.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal-wrap { height: 132px; }
  .rest-fan i { width: 54px; left: -27px; }
  .seal-wrap .btn.seal { width: 100px; height: 104px; font-size: 22px; }
}

/* ==========================================================================================================
   PLAYS AS CONSTELLATIONS (2026-10-26): each tile is a patch of night sky with its spread drawn as a constellation
   (card outlines, a star per position, joined in reading order); card art glows faintly behind. Bento rhythm: a few big tiles.
   ========================================================================================================== */
.plays .lead { max-width: 36ch; }
.cons-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 30px auto 26px; }
.cons-filter button { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8,15,13,0.55); color: #d9cfb6; cursor: pointer;
  font: 400 16px var(--display); letter-spacing: 0.12em; transition: border-color .2s, color .2s, background .2s; }
html[lang=en] .cons-filter button { font-family: var(--fell); letter-spacing: 0.02em; }
.cons-filter button:hover { border-color: var(--gold-lo); color: var(--gold-hi); }
.cons-filter button[aria-pressed="true"] { border-color: var(--gold); color: #1a1206; background: linear-gradient(180deg, #f4e1a6, #c99a48); }
.cons-filter button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.cons-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 232px; grid-auto-flow: dense; gap: 14px; }
.cons { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; border-radius: 14px; cursor: pointer;
  color: var(--ivory); border: 1px solid rgba(216,180,106,0.2); background: radial-gradient(120% 90% at 50% 18%, #13231e 0%, #0a1411 55%, #060b09 100%);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.cons[hidden] { display: none; }
.cons.w2 { grid-column: span 2; } .cons.h2 { grid-row: span 2; }
.cons-bg { position: absolute; inset: -10%; z-index: -2; background: center 42% / 175% auto no-repeat; opacity: 0.24; transition: opacity .4s, transform .8s var(--ease); }
.cons::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,11,9,0.35) 0%, rgba(6,11,9,0.15) 35%, rgba(6,11,9,0.88) 78%, rgba(6,11,9,0.96) 100%); }
.cons-map { position: absolute; left: 10%; top: 9%; width: 80%; height: 46%; overflow: visible; }
.cons.h2 .cons-map { top: 8%; height: 58%; } .cons.w2:not(.h2) .cons-map { height: 48%; }
.c-cards rect { fill: rgba(216,180,106,0.035); stroke: rgba(233,201,127,0.42); stroke-width: 0.025; transition: fill .35s, stroke .35s; }
.c-line polyline { fill: none; stroke: rgba(244,225,166,0.55); stroke-width: 0.022; stroke-dasharray: 0.07 0.06; stroke-linecap: round; transition: stroke .35s; }
.c-star circle { fill: #fff6dc; }
.c-star { filter: drop-shadow(0 0 3px rgba(244,225,166,0.95)); }
.c-dust circle { fill: rgba(232,226,255,0.55); }
@media (prefers-reduced-motion: no-preference) {
  .c-star circle { animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
}
@keyframes twinkle { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
.cons-txt { position: relative; display: grid; gap: 4px; }
.cons-k { font: 400 12.5px var(--kai); letter-spacing: 0.2em; color: #bfae86; }
.cons-k i { font-style: normal; letter-spacing: 0.06em; color: #9f957c; }
.cons-k i::before { content: "/"; margin: 0 8px 0 4px; color: var(--gold-lo); }
html[lang=en] .cons-k { font-family: var(--fell); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; }
.cons-txt b { font: 400 25px / 1.2 var(--display); letter-spacing: 0.1em; color: var(--gold-hi); text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
html[lang=en] .cons-txt b { font-family: var(--fell); letter-spacing: 0.01em; font-size: 23px; }
.cons.h2.w2 .cons-txt b { font-size: 34px; }
.cons-txt small { font: 400 14px / 1.55 var(--kai); color: #d8cdb1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[lang=en] .cons-txt small { font-family: var(--fell); }
.cons:hover { border-color: rgba(216,180,106,0.55); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(216,180,106,0.12); }
.cons:hover .cons-bg { opacity: 0.32; transform: scale(1.04); }
.cons:hover .c-cards rect { fill: rgba(216,180,106,0.09); stroke: rgba(244,225,166,0.8); }
.cons:hover .c-line polyline { stroke: rgba(255,243,207,0.9); }
.cons:active { transform: translateY(-1px) scale(0.99); }
.cons:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.cons.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216,180,106,0.4); }
@media (max-width: 1000px) { .cons-grid { grid-auto-rows: 200px; gap: 12px; } .cons { padding: 16px; } .cons:not(.w2) .cons-txt small { display: none; } }
@media (max-width: 720px) {
  .cons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 188px; gap: 10px; }
  .cons { padding: 14px; border-radius: 12px; } .cons-txt b { font-size: 21px; } .cons.h2.w2 .cons-txt b { font-size: 28px; }
  .cons-txt small { font-size: 13px; } .cons:not(.w2) .cons-txt small { display: none; }
  .cons-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 22px -16px 18px; padding: 0 16px 4px; scrollbar-width: none; }
  .cons-filter::-webkit-scrollbar { display: none; }
  .cons-filter button { flex: none; height: 38px; padding: 0 15px; font-size: 15px; }
}
@media (hover: none) { .cons:hover { transform: none; } }

/* fit fixes (2026-10-26): the shadow pool must not widen the page; big spreads must keep the seal on the first screen */
.altar { overflow-x: clip; }
.rubric { font-size: clamp(40px, min(5.6vw, 8.4vh), 76px); }
.ink-svg { height: clamp(78px, 13vh, 160px); }
.seal-wrap { height: clamp(112px, 16.5vh, 150px); }
.rest-fan i { width: clamp(50px, 7vh, 64px); left: calc(clamp(50px, 7vh, 64px) / -2); }
.seal-wrap .btn.seal { width: clamp(92px, 12.6vh, 112px); height: clamp(96px, 13vh, 116px); font-size: clamp(20px, 2.7vh, 24px); }
@media (min-width: 761px) {
  .ink-pos.two { grid-template-columns: repeat(3, minmax(0, 220px)); }
  .ink-pos.dense { grid-template-columns: repeat(4, minmax(0, 190px)); }
  .ink-pos.two, .ink-pos.dense { grid-template-rows: none !important; grid-auto-flow: row; gap: 2px 18px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .spread2 { gap: 12px; }
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .spread2 > .leaf { gap: 10px; }
  .leaf .rubric-sub::after { margin-top: 6px; }
  .panel .ink-field input { height: 48px; }
  .ink-k { display: none; }
}
@media (min-width: 761px) { html[lang=en] .ink-pos.two { grid-template-columns: repeat(4, minmax(0, 200px)); font-size: 14.5px; line-height: 1.4; } }
@media (min-width: 761px) and (max-height: 760px) { .ink-svg { height: 11vh; } }
.panel .alm-v { color: #ece0c2; text-shadow: var(--halo); } .panel .alm { border: 1px solid var(--line); }

/* perf (2026-10-26): no endless animations and no live filters on the constellations or the slot map (they repainted
   every frame and made the whole page stutter on integrated GPUs); the glow is a static halo, hover lights one tile only */
.ink-svg .m-card, .c-star circle { animation: none !important; }
.c-star { filter: none; }
.c-star circle.h { opacity: 0.85; transition: opacity .35s; }
.cons:hover .c-star circle.h { opacity: 1; }
.c-star circle:not(.h) { transition: transform .35s var(--ease); transform-box: fill-box; transform-origin: center; }
.cons:hover .c-star circle:not(.h) { transform: scale(1.3); }

/* ---------- lighter, cleaner page (2026-10-26): user found the page dark and "dirty" ----------
   nav: deep lapis lacquer with a gilt hairline instead of black; painting brighter; vignette, pool and grain eased off */
.nav { background: linear-gradient(180deg, #1b332c 0%, #162923 55%, #12221d 100%); box-shadow: 0 1px 0 rgba(216,180,106,0.42), 0 10px 30px rgba(6,11,10,0.45); }
.nav::before { display: none; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,225,166,0.35) 30%, rgba(244,225,166,0.35) 70%, transparent); pointer-events: none; }
.page-bg-in { opacity: 0.88; filter: none; }
.page-vignette { background: radial-gradient(90% 75% at 50% 45%, rgba(11,20,18,0) 0%, rgba(11,20,18,0.22) 70%, rgba(5,10,8,0.5) 100%); }
.grain { display: none; }
.rite::before { background: radial-gradient(closest-side, rgba(8,15,13,0.62) 0%, rgba(8,15,13,0.46) 46%, rgba(8,15,13,0.18) 74%, rgba(8,15,13,0) 100%); }

/* ---------- background (2026-10-26): one sharp photograph of a real ceiling instead of the upscaled AI scroll ---------- */
.page-bg { background: #0c1613; }
.page-bg .ceil { position: absolute; top: 0; left: 50%; width: max(100%, 940px); height: auto; transform: translateX(-50%); opacity: 0.94;
  background: url(../assets/bg/ceil_lq.webp) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,0.5) 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,0.5) 88%, transparent 100%); }
.page-bg .night { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 2560 / 3250; background: url(../assets/bg/night_2560.webp) bottom center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); }
@media (max-width: 760px) { .page-bg .night { background-image: url(../assets/bg/night_1600.webp); aspect-ratio: auto; height: 1400px; background-size: cover; } }
.foot-credit { margin: 10px auto 0; max-width: 70ch; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.foot-credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.foot-credit a:hover { color: var(--gold-hi); }
.rite::before { background: radial-gradient(closest-side, rgba(8,15,13,0.74) 0%, rgba(8,15,13,0.6) 45%, rgba(8,15,13,0.26) 74%, rgba(8,15,13,0) 100%); }
@media (max-width: 760px) { .page-bg .ceil { width: max(100%, 1400px); } }

/* ---------- sign-in dialog: tabs, password field (2026-10-26) ---------- */
.acct-g { display: grid; gap: 8px; justify-items: stretch; }
.acct-gnote { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 6px; border-bottom: 1px solid var(--line); }
.acct-tabs[hidden] { display: none; }
.acct-tabs button { height: 44px; border: 0; background: none; cursor: pointer; color: var(--muted); font: 400 18px var(--display); letter-spacing: 0.12em; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
html[lang=en] .acct-tabs button { font-family: var(--fell); letter-spacing: 0.02em; }
.acct-tabs button[aria-selected="true"] { color: var(--gold-hi); border-bottom-color: var(--gold); }
.acct-tabs button:hover { color: var(--gold-hi); }
.acct-tabs button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 64px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 34px; min-width: 50px; padding: 0 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--muted); font: 400 13px var(--sans); }
.pw-eye:hover { color: var(--gold-hi); }
.pw-eye:focus-visible { outline: 2px solid var(--gold-hi); }
.acct-step .help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.acct-sub { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.acct-sub b { display: block; margin-bottom: 4px; font: 400 19px var(--display); letter-spacing: 0.1em; color: var(--gold-hi); }
html[lang=en] .acct-sub b { font-family: var(--fell); letter-spacing: 0.02em; }
.acct-step [hidden], .acct-mailbox[hidden], .acct-g[hidden] { display: none !important; }

/* ---------- background, option B (2026-10-26): the photograph made the UI and text hard to see. Now: deep lapis, a soft
   golden dome light at the top, two thin star layers tiled at different sizes (no visible repeat), the night sky at the end ---------- */
.page-bg { background:
    radial-gradient(1200px 560px at 50% -60px, rgba(230,188,108,0.2) 0%, rgba(230,188,108,0.07) 45%, rgba(230,188,108,0) 72%),
    linear-gradient(180deg, #1c352e 0px, #172b25 700px, #11201b 1800px, #0c1714 3200px, #0c1613 100%); }
.page-bg::before, .page-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
.page-bg::before { opacity: 0.85; background-size: 560px 560px; background-image:
    radial-gradient(1.2px 1.2px at 7% 11%, #fff4d6, transparent), radial-gradient(1px 1px at 31% 23%, #fff4d6, transparent), radial-gradient(1.6px 1.6px at 58% 7%, #fff4d6, transparent),
    radial-gradient(1px 1px at 79% 34%, #fff4d6, transparent), radial-gradient(1.3px 1.3px at 92% 71%, #fff4d6, transparent), radial-gradient(1px 1px at 44% 52%, #fff4d6, transparent),
    radial-gradient(1px 1px at 18% 66%, #fff4d6, transparent), radial-gradient(1.5px 1.5px at 66% 88%, #fff4d6, transparent), radial-gradient(1px 1px at 3% 93%, #fff4d6, transparent); }
.page-bg::after { opacity: 0.5; background-size: 910px 910px; background-position: 230px 140px; background-image:
    radial-gradient(1px 1px at 13% 37%, #dfe6ff, transparent), radial-gradient(1.4px 1.4px at 47% 14%, #dfe6ff, transparent), radial-gradient(1px 1px at 71% 59%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 88% 21%, #dfe6ff, transparent), radial-gradient(1.2px 1.2px at 26% 84%, #dfe6ff, transparent), radial-gradient(1px 1px at 57% 76%, #dfe6ff, transparent); }
.page-bg .night { z-index: 1; opacity: 0.9; }
.page-vignette { background: radial-gradient(100% 80% at 50% 40%, rgba(6,11,10,0) 60%, rgba(6,11,10,0.35) 100%); }
.rite::before { opacity: 0.4; }

/* ---------- premium finish for option B (2026-10-26): an engraved gold astrolabe behind the rite, light falling from an oculus,
   deep edges. All static (drawn once): no filters, no endless animation ---------- */
.page-bg { background:
    radial-gradient(42% 30% at 50% 0%, rgba(244,214,150,0.26) 0%, rgba(244,214,150,0.08) 55%, rgba(244,214,150,0) 100%),
    radial-gradient(1400px 900px at 50% 260px, rgba(64,92,190,0.22) 0%, rgba(64,92,190,0) 70%),
    linear-gradient(180deg, #1b332c 0px, #162a24 800px, #101f1b 1900px, #0c1714 3300px, #0a1310 100%); }
.astro { position: absolute; z-index: 0; left: 50%; top: calc(50% + 10px); width: min(1180px, 118vh, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: url(../assets/ui/astrolabe.svg) center / contain no-repeat; opacity: 0.13;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.5) 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.5) 82%, transparent 100%); }
.altar > .altar-inner { position: relative; z-index: 1; }
.altar[data-phase="draw"] .astro, .altar[data-phase="read"] .astro { opacity: 0.07; }
.page-vignette { background: radial-gradient(120% 90% at 50% 35%, rgba(5,10,8,0) 55%, rgba(5,10,8,0.42) 100%); }
.rite::before { opacity: 0.3; }
@media (max-width: 760px) { .astro { width: 165vw; top: 46%; opacity: 0.12; } }
.astro { opacity: 0.16; -webkit-mask-image: radial-gradient(closest-side, #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%); }
.page-bg { background:
    radial-gradient(42% 30% at 50% 0%, rgba(244,214,150,0.24) 0%, rgba(244,214,150,0.07) 55%, rgba(244,214,150,0) 100%),
    radial-gradient(1400px 900px at 50% 260px, rgba(64,92,190,0.2) 0%, rgba(64,92,190,0) 70%),
    linear-gradient(180deg, #182d27 0px, #142620 800px, #101d19 1900px, #0c1613 3300px, #09110f 100%); }
/* stars as small pre-drawn tiles (tiled gradients over the 5000 px page stalled scrolling) */
.page-bg::before { background-image: url(../assets/ui/stars_a.webp); background-size: 560px 560px; opacity: 0.8; }
.page-bg::after { background-image: url(../assets/ui/stars_b.webp); background-size: 910px 910px; background-position: 230px 140px; opacity: 0.55; }