/* ==========================================================================================================
   HOME (2026-10-27): the painted cards are the protagonist. Loaded after theme.css.
   hero cards beside the rite · card of the day · plays grouped by intent · major arcana gallery · first-look fixes
   ========================================================================================================== */

/* ---------- fixes: arch no longer cuts through the title, no duplicate numbers, quota clear of the deck ---------- */
.altar:not([data-phase="draw"]):not([data-phase="read"]) .rite { padding-top: 54px; }
.altar:not([data-phase="draw"]):not([data-phase="read"]) .rite::after { border-radius: 50% 50% 4px 4px / 150px 150px 4px 4px; }
@media (min-width: 761px) and (max-height: 820px) {
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .rite { padding-top: 28px; }
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .rite::after { border-radius: 50% 50% 4px 4px / 110px 110px 4px 4px; } }
.ink-pos:not(.two) b { display: none; }
.quota { margin-top: 18px; }
.panel .ink-field input::placeholder { color: rgba(246,241,229,0.68); }
/* the side pools of light lower down read as stray blotches: keep one calm column of light */
.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%),
    linear-gradient(180deg, #11221d 0px, #0d1b17 1400px, #0b1714 3000px, #08110f 100%); }

/* ---------- hero: rite on the left, three painted cards on the right (wide screens, ask mode, before drawing) ---------- */
.hero-art { display: none; }
@media (min-width: 1180px) {
  .altar[data-mode="ask"]:not([data-phase="draw"]):not([data-phase="read"]) .altar-inner {
    max-width: 1360px; grid-template-columns: minmax(0, 760px) minmax(0, 470px); column-gap: clamp(48px, 5vw, 110px); justify-content: center; align-items: center; }
  .altar[data-mode="ask"]:not([data-phase="draw"]):not([data-phase="read"]) .altar-inner > * { grid-column: 1 / -1; }
  .altar[data-mode="ask"]:not([data-phase="draw"]):not([data-phase="read"]) .rite { grid-column: 1; grid-row: 1; width: 760px; max-width: 100%; margin: 0; }
  .altar[data-mode="ask"]:not([data-phase="draw"]):not([data-phase="read"]) .hero-art { grid-column: 2; grid-row: 1; display: grid; justify-items: center; }
}
.ha-fan { position: relative; width: 100%; height: clamp(420px, 34vw, 520px); }
.ha-card { position: absolute; top: 50%; left: 50%; display: block; width: clamp(170px, 13.5vw, 214px); perspective: 900px; border-radius: 10px;
  transform: translate(-50%, -50%) translateX(var(--dx)) rotate(var(--rot)) translateY(var(--dy)); transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); }
.ha-card .tc { box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,192,130,0.25); border-radius: 10px; }
.ha-0 { --dx: -56%; --rot: -9deg; --dy: 18px; z-index: 1; }
.ha-1 { --dx: 0%; --rot: 0deg; --dy: -10px; z-index: 2; width: clamp(196px, 15.5vw, 244px); }
.ha-2 { --dx: 56%; --rot: 9deg; --dy: 18px; z-index: 1; }
.ha-card:hover, .ha-card:focus-visible { z-index: 3; outline: none; }
.ha-0:hover, .ha-0:focus-visible { --dx: -64%; --dy: 4px; }
.ha-2:hover, .ha-2:focus-visible { --dx: 64%; --dy: 4px; }
.ha-1:hover, .ha-1:focus-visible { --dy: -22px; }
@media (prefers-reduced-motion: reduce) { .ha-card { transition: none; } }

/* ---------- card of the day ---------- */
.todaysec { position: relative; padding: clamp(70px, 9vw, 120px) clamp(18px, 4vw, 48px); }
.todaysec::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1080px, 90vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.td-wrap { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.td-card { position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px; border-radius: 12px; }
.td-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }
.td-inner { display: block; position: relative; aspect-ratio: 9 / 16; transform-style: preserve-3d; transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1); }
.td-card.flipped .td-inner { transform: rotateY(180deg); }
.td-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,192,130,0.25); }
.td-face .tc { width: 100%; height: 100%; border-radius: 12px; }
.td-front { transform: rotateY(180deg); }
.td-card:not(.flipped):hover .td-inner { transform: translateY(-6px) rotateY(-6deg); }
.td-k { margin: 0 0 18px; font: 500 14px var(--display); letter-spacing: 0.4em; color: var(--gold-hi); }
.td-k span { margin-left: 14px; letter-spacing: 0.12em; font-weight: 400; color: var(--muted); }
html[lang=en] .td-k { font-family: var(--latin); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; }
html[lang=en] .td-k span { text-transform: none; letter-spacing: 0.02em; font-size: 15px; }
.td-h { margin: 0 0 16px; text-align: left; font-size: clamp(30px, 3vw, 42px); letter-spacing: 0.14em; line-height: 1.3; }
html[lang=en] .td-h { letter-spacing: 0.01em; }
.td-lead { margin: 0 0 26px; max-width: 34em; font: 400 18px / 1.85 var(--display); letter-spacing: 0.06em; color: var(--ivory); }
html[lang=en] .td-lead { font-family: var(--latin); font-size: 20px; letter-spacing: 0.01em; }
.td-kw { margin: -6px 0 18px; font: 400 15px var(--display); letter-spacing: 0.24em; color: var(--gold); }
html[lang=en] .td-kw { font-family: var(--latin); letter-spacing: 0.08em; }
.td-alm { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0 0 30px; }
.td-alm div { display: flex; align-items: baseline; gap: 12px; }
.td-alm dt { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font: 500 14px var(--display); color: var(--gold-hi); }
.td-alm dt.ji { color: #e3a593; border-color: rgba(227,165,147,0.5); }
.td-alm dd { margin: 0; font: 400 17px var(--display); color: var(--ivory); letter-spacing: 0.06em; }
.td-acts { display: flex; flex-wrap: wrap; gap: 14px; }
.td-note { margin: 22px 0 0; font: 400 14px var(--display); color: var(--dim); letter-spacing: 0.08em; }
.td-in > * { animation: tdIn .7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.td-in > *:nth-child(2) { animation-delay: .08s; } .td-in > *:nth-child(3) { animation-delay: .16s; } .td-in > *:nth-child(4) { animation-delay: .24s; } .td-in > *:nth-child(5) { animation-delay: .32s; }
@keyframes tdIn { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px) {
  .td-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 30px; }
  .td-card { width: min(230px, 62vw); }
  .td-h { text-align: center; font-size: 28px; }
  .td-alm, .td-acts { justify-content: center; }
  .td-k span { display: block; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .td-inner { transition: none; } .td-in > * { animation: none; } }

/* ---------- plays: grouped index, representative card beside each play ---------- */
#consFilter, #playsGrid { display: none !important; }
.plays-idx { max-width: 1200px; margin: 46px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 40px 56px; }
.pg-h { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 500 15px var(--display); letter-spacing: 0.4em; color: var(--gold-hi); }
html[lang=en] .pg-h { font-family: var(--latin); letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px; }
.pg ul { list-style: none; margin: 0; padding: 0; }
.pr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(220,192,130,0.12); transition: background .25s; }
.pr:hover, .pr:focus-visible { background: rgba(220,192,130,0.06); outline: none; }
.pr:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-hi); }
.pr-art { display: block; width: 48px; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(220,192,130,0.4), 0 8px 18px rgba(0,0,0,0.4); background: #0f1f1a; }
.pr-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.pr:hover .pr-art img { transform: scale(1.06); }
.pr-t { display: grid; gap: 4px; min-width: 0; }
.pr-t b { font: 500 18px var(--display); letter-spacing: 0.14em; color: var(--ivory); transition: color .25s; }
html[lang=en] .pr-t b { font-family: var(--latin); font-size: 20px; letter-spacing: 0.01em; font-weight: 600; }
.pr:hover .pr-t b { color: var(--gold-hi); }
.pr-t small { font: 400 14px / 1.6 var(--display); letter-spacing: 0.04em; color: var(--muted); }
html[lang=en] .pr-t small { font-family: var(--latin); font-size: 16px; letter-spacing: 0; }
.pr-n { font: 400 13px var(--display); letter-spacing: 0.1em; color: var(--gold); white-space: nowrap; }
html[lang=en] .pr-n { font-family: var(--latin); font-size: 15px; letter-spacing: 0.02em; }
@media (max-width: 760px) {
  .plays-idx { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .pr { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 12px 2px; }
  .pr-art { width: 40px; }
  .pr-t b { font-size: 17px; }
}

/* ---------- gallery: major arcana strip ---------- */
.gallery { padding: clamp(70px, 9vw, 110px) 0 clamp(40px, 5vw, 70px); }
.gal-wrap { position: relative; max-width: 1320px; margin: 40px auto 0; padding: 0 clamp(16px, 4vw, 56px); }
.gal { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(132px, 12vw, 172px); gap: clamp(16px, 1.6vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 12px 4px 18px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.gal::-webkit-scrollbar { display: none; }
.gal:focus-visible { outline: 1px dashed var(--line-2); outline-offset: 4px; }
.gc { scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; text-decoration: none; color: inherit; }
.gc .tc { width: 100%; border-radius: 8px; box-shadow: 0 18px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(220,192,130,0.22); transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.gc:hover .tc, .gc:focus-visible .tc { transform: translateY(-8px); }
.gc:focus-visible { outline: none; }
.gc-n { margin-top: 10px; font: 400 13px var(--latin); letter-spacing: 0.24em; color: var(--gold); }
.gc-name { font: 400 16px var(--display); letter-spacing: 0.12em; color: var(--ivory); }
html[lang=en] .gc-name { font-family: var(--latin); font-size: 17px; letter-spacing: 0.01em; }
.gal-nav { position: absolute; top: 40%; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(10,21,18,0.85);
  color: var(--gold-hi); font-size: 20px; cursor: pointer; transition: opacity .2s, border-color .2s; }
.gal-nav:hover { border-color: var(--gold); }
.gal-nav:disabled { opacity: 0; pointer-events: none; }
.gal-nav.prev { left: clamp(4px, 1.5vw, 20px); } .gal-nav.next { right: clamp(4px, 1.5vw, 20px); }
.gal-all { text-align: center; margin: 34px 0 0; }
@media (max-width: 760px) { .gal-nav { display: none; } .gal { grid-auto-columns: 38vw; } }
@media (prefers-reduced-motion: reduce) { .gc .tc, .pr-art img { transition: none; } }
@media (min-width: 761px) and (max-height: 740px) {
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .rite { padding-top: 16px; }
  .altar:not([data-phase="draw"]):not([data-phase="read"]) .rite::after { border-radius: 50% 50% 4px 4px / 90px 90px 4px 4px; } }

/* ---------- type scale up (2026-10-27), desktop only: phones keep their earlier sizes ---------- */
@media (min-width: 761px) {
  .more-btn { font-size: 16px; } .acct { font-size: 15px; } .brand-sub { font-size: 13.5px; }
  .lead { font-size: 19px; line-height: 1.75; max-width: 52ch; }
  .h2, .section-title .h2 { font-size: clamp(34px, 3.6vw, 54px); }
  .guide-list li { font-size: 18px; line-height: 1.8; } .guide-list b { font-size: 22px; }
  .foot-small { font-size: 14.5px; }
  .rubric-sub { font-size: 19px; }
  .ink-k, .panel .ink-field label { font-size: 16px; }
  .panel .ink-field input { font-size: 22px; }
  .ink-ex { font-size: 16px; } .ink-pos { font-size: 17px; }
  .quota { font-size: 15px; } .btn { font-size: 16px; }
  .td-k { font-size: 16px; } .td-h { font-size: clamp(34px, 3.4vw, 48px); } .td-lead { font-size: 20px; }
  .td-kw { font-size: 17px; } .td-alm dd { font-size: 19px; } .td-alm dt { width: 34px; height: 34px; font-size: 15px; } .td-note { font-size: 15.5px; }
  .plays-idx { width: min(1320px, calc(100vw - 80px)); max-width: none; position: relative; left: 50%; transform: translateX(-50%);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 52px 72px; margin-top: 56px; }
  .pg-h { font-size: 19px; padding-bottom: 14px; }
  .pr { grid-template-columns: 66px minmax(0, 1fr) auto; gap: 22px; padding: 18px 6px; }
  .pr-art { width: 66px; border-radius: 5px; } .pr-t { gap: 6px; }
  .pr-t b { font-size: 22px; } .pr-t small { font-size: 16.5px; line-height: 1.6; } .pr-n { font-size: 15.5px; }
  .gal { grid-auto-columns: clamp(150px, 13vw, 200px); }
  .gc-n { font-size: 14px; } .gc-name { font-size: 19px; }
  .ink-pos.two { font-size: 15px; }                 /* 6+ positions: two columns, kept compact so the seal stays on screen */
  .ink-pos.two + .seal-wrap { margin-top: -6px; }

  /* English on desktop: Cormorant has a small x-height, so it reads a size smaller than Chinese at the same px. About +20%. */
  html[lang=en] body { font-size: 20px; }
  html[lang=en] .brand-sub { font-size: 14px; } html[lang=en] .more-btn { font-size: 18px; letter-spacing: 0.08em; } html[lang=en] .acct { font-size: 17px; }
  html[lang=en] .lang button { font-size: 13px; }
  html[lang=en] .lead { font-size: 24px; }
  html[lang=en] .rubric-sub { font-size: 22px; }
  html[lang=en] .panel .ink-field label, html[lang=en] .ink-k { font-size: 15px; letter-spacing: 0.18em; }
  html[lang=en] .panel .ink-field input { font-size: 26px; }
  html[lang=en] .ink-ex { font-size: 19px; }
  html[lang=en] .ink-pos { font-size: 21px; } html[lang=en] .ink-pos.two { font-size: 17.5px; }
  html[lang=en] .quota { font-size: 18px; }
  html[lang=en] .btn { font-size: 18px; } html[lang=en] .btn.seal, html[lang=en] .seal-wrap .btn.seal { font-size: 16px; }
  html[lang=en] .hint, html[lang=en] .slot-legend { font-size: 18px; }
  html[lang=en] .td-k { font-size: 16px; } html[lang=en] .td-k span { font-size: 20px; }
  html[lang=en] .td-lead { font-size: 25px; } html[lang=en] .td-kw { font-size: 20px; } html[lang=en] .td-alm dd { font-size: 22px; } html[lang=en] .td-note { font-size: 18px; }
  html[lang=en] .pg-h { font-size: 18px; }
  html[lang=en] .pr-t b { font-size: 28px; } html[lang=en] .pr-t small { font-size: 21px; } html[lang=en] .pr-n { font-size: 19px; }
  html[lang=en] .gc-n { font-size: 16px; } html[lang=en] .gc-name { font-size: 23px; }
  html[lang=en] .guide-list li { font-size: 21px; } html[lang=en] .guide-list b { font-size: 25px; }
  html[lang=en] .foot-small { font-size: 17px; } html[lang=en] .foot-links { font-size: 16px; }
  html[lang=en] .summary p, html[lang=en] .summary.ai .ai-body p { font-size: 21px; } html[lang=en] .summary.ai li { font-size: 20.5px; }
  html[lang=en] .summary h3, html[lang=en] .summary.ai h4 { font-size: 24px; }
  html[lang=en] .pi-text p { font-size: 20px; } html[lang=en] .pi-text h3, html[lang=en] .pi-pos h3 { font-size: 25px; }
  html[lang=en] .panel .today-advice, html[lang=en] .panel .bcard-text, html[lang=en] .panel .birth-note { font-size: 21px; }
  html[lang=en] .panel .help, html[lang=en] .panel .today-meta, html[lang=en] .panel .method, html[lang=en] .birth-ph p { font-size: 18px; }
}
.pr-t small, .td-lead, .lead, .guide-list span { text-wrap: pretty; }
@media (min-width: 761px) and (max-height: 920px) {   /* English long spreads on laptop screens: keep the seal on the first screen */
  html[lang=en] .rubric-sub { font-size: 20px; line-height: 1.5; }
  html[lang=en] .ink-pos.two { font-size: 16.5px; line-height: 1.45; }
  html[lang=en] .ink-ex { font-size: 18px; }
}

/* nav: Plus link (2026-10-27) */
.nav-plus { font: 400 16px var(--display); letter-spacing: 0.2em; color: var(--gold-hi); text-decoration: none; padding: 6px 4px; }
.nav-plus:hover { color: var(--ivory); }
html[lang=en] .nav-plus { font-family: var(--latin); letter-spacing: 0.06em; font-size: 18px; }
@media (max-width: 380px) { .nav-plus { letter-spacing: 0.08em; font-size: 14px; } }
@media (max-width: 600px) { .nav-plus { display: none; } }   /* phones: Plus moves into the More menu */
@media (min-width: 601px) { .more-plus { display: none !important; } }
.nav-plus[hidden], .more-plus[hidden], #footRefund[hidden] { display: none !important; }

/* More menu, grouped (2026-10-27) */
.more-menu { min-width: 230px; padding: 10px 0 8px; }
.more-h { margin: 10px 18px 4px; font: 500 12.5px var(--display); letter-spacing: 0.3em; color: var(--gold); }
html[lang=en] .more-h { font-family: var(--latin); letter-spacing: 0.16em; text-transform: uppercase; font-size: 12.5px; }
.more-h:first-child { margin-top: 4px; }
.more-menu a b { font-size: 16px; font-weight: 400; }
html[lang=en] .more-menu a b { font-size: 18px; }
.more-menu .more-all { margin-top: 6px; border-top: 1px solid var(--line); }
.more-menu .more-all b { color: var(--gold-hi); }

/* gallery drift (2026-10-27): the strip scrolls itself, so no snapping (it would pull it back every frame) */
.gal.drift { scroll-snap-type: none; }
.gal.drift .gc { scroll-snap-align: none; }

/* the question box (2026-10-27): the user found the bare underline easy to miss. A framed gold plaque with a slow breathing halo
   while it is empty and unfocused (draws the eye to the one thing to do first); the halo stops on focus or once text is in. */
.panel .ink-field label { font-size: 17px; color: var(--gold-hi); }
.q-box { position: relative; display: block; width: min(640px, 100%); isolation: isolate; }
.q-box::before { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(244,225,166,0.35), 0 0 34px rgba(216,180,106,0.38); opacity: 0; }
.panel .ink-field .q-box input { width: 100%; height: 64px; padding: 0 22px; border: 1px solid rgba(216,180,106,0.75); border-radius: 11px;
  background: linear-gradient(180deg, rgba(5,10,8,0.62), rgba(11,20,18,0.5)); background-size: auto; background-position: 0 0;
  box-shadow: inset 0 0 0 3px rgba(5,10,8,0.5), inset 0 0 0 4px rgba(216,180,106,0.22), inset 0 8px 22px rgba(0,0,0,0.35); transition: border-color 0.3s, box-shadow 0.3s; }
.panel .ink-field .q-box input:hover { border-color: var(--gold-hi); }
.panel .ink-field .q-box input:focus { outline: none; border-color: var(--gold-hi);
  box-shadow: inset 0 0 0 3px rgba(5,10,8,0.5), inset 0 0 0 4px rgba(244,225,166,0.4), 0 0 0 4px rgba(216,180,106,0.18), 0 0 30px rgba(216,180,106,0.3); }
@media (prefers-reduced-motion: no-preference) {
  .q-box:has(input:placeholder-shown:not(:focus))::before { animation: qGlow 2.8s ease-in-out infinite; }
}
@keyframes qGlow { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@media (max-width: 760px) { .panel .ink-field .q-box input { height: 56px; padding: 0 14px; } .q-box::before { inset: -5px; } }