/* Preview-only foundation: production continues to use /css/base.css. */
:root { --line: rgba(226,180,86,.42); --gold: #efc66b; --ivory: #f3e7cf; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: Garamond, Georgia, 'Times New Roman', serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 16px; top: 16px; z-index: 999; background: #fff; color: #111; padding: 10px 14px; border-radius: 10px; }
.brand-mini { display: flex; align-items: center; gap: 12px; font-size: 1rem; letter-spacing: .08em; color: var(--ivory); }
.mini-sigil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); font-size: 1.35rem; box-shadow: 0 0 0 1px rgba(239,198,107,.12) inset; }

/* Tarot portal v16.59 — isolated layers: persistent artwork / entrance / reading.
   HTML owns structure, tarot-state owns cards, tarot-app owns transitions. */
:root {
  --tarot-gold: #e8c87a;
  --tarot-ivory: #f5ecda;
  --tarot-panel: rgba(10, 8, 24, .77);
  --tarot-transition: 680ms;
}
[hidden] { display: none !important; }
.tarot-page { margin: 0; min-height: 100vh; background: #080714; color: var(--tarot-ivory); overflow-x: hidden; }
.tarot-shell { position: relative; min-height: 100svh; isolation: isolate; }
.tarot-main { position: relative; min-height: 100svh; isolation: isolate; }
.tarot-portal { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: grid; place-items: end center; }
.tarot-portal-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Artwork AND its initial shade stay mounted and visually unchanged throughout entry. */
.tarot-portal-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(4,3,12,.08) 25%,rgba(4,3,12,.28) 55%,rgba(4,3,12,.92) 100%),radial-gradient(circle at center 30%,transparent 20%,rgba(4,3,12,.18) 100%); }

/* Entrance text only: dissolve/blur without touching any image pixels. */
.tarot-header { position: absolute; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); width: min(1500px,calc(100% - 40px)); display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
.tarot-header .brand-mini,.tarot-home-link { color: #fff; text-shadow: 0 2px 16px #000; }
.tarot-home-link { font-family: Cinzel,serif; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.tarot-portal-copy { position: relative; z-index: 2; text-align: center; padding: 0 24px clamp(58px,9vh,110px); max-width: 760px; }
.tarot-kicker { font-family: Cinzel,serif; letter-spacing: .28em; font-size: .7rem; color: var(--tarot-gold); margin: 0 0 8px; }
.tarot-portal h1 { font-family: Cinzel,serif; font-weight: 400; font-size: clamp(3.7rem,9vw,8rem); line-height: .9; margin: 0; color: #fff5dd; text-shadow: 0 3px 30px #000; }
.tarot-portal-copy>p:not(.tarot-kicker) { font-family: 'Cormorant Garamond',serif; font-size: clamp(1.15rem,2vw,1.45rem); margin: 20px auto 28px; color: #eee3d5; }
.tarot-portal-copy { transition: opacity var(--tarot-transition) ease, filter var(--tarot-transition) ease, translate var(--tarot-transition) ease; }
.is-entering .tarot-portal-copy { opacity: 0; filter: blur(16px); translate: 0 -10px; pointer-events: none; }

/* ==========================================================================
   TAROT READING — quiet side rails + unobstructed Oracle + lower crescent fan
   Preview-only layout. Desktop, tablet and mobile own independent rules.
   ========================================================================== */
:root {
  --tarot-rail-x: clamp(20px, 3.25vw, 66px);
  --tarot-rail-width: clamp(204px, 21vw, 286px);
}
/* Desktop-only: bring the complete left reading rail 110px toward the Oracle.
   Tablet/mobile retain their own independent placement rules. */

.tarot-reading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 620ms ease, transform 620ms ease;
}
.is-reading .tarot-reading { opacity: 1; transform: none; pointer-events: auto; }
/* Only the SIDE EDGES get a subtle readability wash. The Oracle's face stays clear. */
.tarot-reading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 6, 25, .35), transparent 29%,
                                    transparent 71%, rgba(10, 6, 25, .35));
  pointer-events: none;
}
.tarot-reading-head, .tarot-modes, .tarot-question, .tarot-table-status,
.tarot-drawn, .tarot-deck-zone, .tarot-fan, 
.tarot-flying-card {
  position: fixed;
  z-index: 9999;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  transform-origin: center;
  transition: left 430ms cubic-bezier(.22,.78,.2,1), top 430ms cubic-bezier(.22,.78,.2,1), width 430ms cubic-bezier(.22,.78,.2,1), height 430ms cubic-bezier(.22,.78,.2,1), transform 430ms cubic-bezier(.22,.78,.2,1), filter 430ms ease;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.55));
}
.tarot-flying-card .tarot-fan-card-face { display:block; width:100%; height:100%; }
.tarot-flying-card { position: fixed !important; z-index: 20000 !important; pointer-events: none !important; transition: left 440ms cubic-bezier(.2,.78,.2,1), top 440ms cubic-bezier(.2,.78,.2,1), width 440ms cubic-bezier(.2,.78,.2,1), height 440ms cubic-bezier(.2,.78,.2,1), transform 440ms cubic-bezier(.2,.78,.2,1) !important; filter: drop-shadow(0 18px 25px rgba(0,0,0,.6)); }
.tarot-fan-card.is-pick-blocked { animation: tarot-pick-blocked 320ms ease; }
.tarot-question.is-attention { animation: tarot-question-attention 460ms ease; }
@keyframes tarot-pick-blocked { 0%,100%{transform:translateX(-50%) rotate(calc(var(--angle)*1deg));} 35%{transform:translateX(-50%) translateY(-10px) rotate(calc(var(--angle)*1deg));} 65%{transform:translateX(-50%) translateY(-4px) rotate(calc(var(--angle)*1deg));} }
@keyframes tarot-question-attention { 0%,100%{box-shadow:none;} 50%{box-shadow:0 0 0 2px rgba(232,200,122,.7),0 0 28px rgba(232,200,122,.22);} }

.tarot-button-ghost {
  position: absolute;
}
/* A single crisp vector card-back shared by the deck, the 30-card fan and drawn slots. */
.tarot-drawn-card-back, .tarot-card-back, .tarot-fan-card-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(232, 198, 134, .88);
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 30%, rgba(87, 55, 134, .9), rgba(39, 21, 83, .99) 47%, #1c1139 95%);
  box-shadow: inset 0 0 0 3px rgba(17, 8, 40, .84), inset 0 0 0 4px rgba(234, 196, 126, .18),
              0 10px 19px rgba(8, 5, 23, .51), 0 0 0 1px rgba(247, 218, 163, .1);
}
.tarot-drawn-card-back::before, .tarot-card-back::before, .tarot-fan-card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%20fill%3D%22none%22%3E%0A%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2292%22%20height%3D%22142%22%20rx%3D%227%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.78%22%20stroke-width%3D%22.8%22%2F%3E%0A%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2284%22%20height%3D%22134%22%20rx%3D%225%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%22.5%22%2F%3E%0A%3Cpath%20d%3D%22M50%2021v12%20M50%20117v12%20M24%2075h9%20M67%2075h9%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.38%22%20stroke-width%3D%22.6%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2275%22%20r%3D%2223%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.31%22%20stroke-width%3D%22.7%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2275%22%20r%3D%2218%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%22.6%22%2F%3E%0A%3Cpath%20d%3D%22M26%2075Q50%2055%2074%2075Q50%2095%2026%2075Z%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.80%22%20stroke-width%3D%22.9%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2275%22%20r%3D%226.8%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.9%22%20stroke-width%3D%22.9%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2275%22%20r%3D%222%22%20fill%3D%22%23dec08a%22%20fill-opacity%3D%22.7%22%2F%3E%0A%3Cpath%20d%3D%22M50%2039l2.1%205.9L58%2047l-5.9%202.1L50%2055l-2.1-5.9L42%2047l5.9-2.1L50%2039ZM50%2095l2.1%205.9L58%20103l-5.9%202.1L50%20111l-2.1-5.9L42%20103l5.9-2.1L50%2095Z%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%0A%3Cpath%20d%3D%22M20%2019c6%202%208%204%209%2010-6-1-8-3-9-10ZM80%2019c-6%202-8%204-9%2010%206-1%208-3%209-10ZM20%20131c6-2%208-4%209-10-6%201-8%203-9%2010ZM80%20131c-6-2-8-4-9-10%206%201%208%203%209%2010Z%22%20stroke%3D%22%23dec08a%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.6%22%2F%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%2242%22%20r%3D%22.75%22%20fill%3D%22%23dec08a%22%2F%3E%3Ccircle%20cx%3D%2279%22%20cy%3D%2242%22%20r%3D%22.75%22%20fill%3D%22%23dec08a%22%2F%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%22108%22%20r%3D%22.75%22%20fill%3D%22%23dec08a%22%2F%3E%3Ccircle%20cx%3D%2279%22%20cy%3D%22108%22%20r%3D%22.75%22%20fill%3D%22%23dec08a%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.tarot-drawn-card-back::after, .tarot-card-back::after, .tarot-fan-card-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(241, 214, 165, .04) 47%, transparent 66%);
  pointer-events: none;
}
.tarot-drawn-card-back > span, .tarot-card-back > span, .tarot-fan-card-face > span {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ORACLE VOICE — balanced SVG auspicious-cloud silhouette (xiangyun-inspired).
   Keep all cloud geometry within its single SVG; do not build the outline with CSS blobs. */
.tarot-oracle-voice {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: calc(49% + 50px);
  transform: translate(-50%, -50%) translateY(10px) scale(.98);
  width: clamp(265px, 25vw, 366px);
  aspect-ratio: 640 / 225;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  box-shadow: none;
  color: #fff9f5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  transition: opacity .42s ease, transform .42s ease;
}
.tarot-oracle-cloud-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 5px 9px rgba(26,11,44,.23));
}
.is-reading .tarot-oracle-voice:not(.is-dismissed) {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: .24s;
}
.is-reading .tarot-oracle-voice.is-muted:not(.is-dismissed) {
  opacity: .5;
}
.is-reading .tarot-oracle-voice.is-dismissed {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-8px);
  transition-delay: 0s;
}
.tarot-oracle-voice-text {
  position: relative;
  z-index: 1;
  display: block;
  width: 75%;
  margin-top: 6px;
  font: 500 clamp(16px, 1.2vw, 19px)/1.15 'EB Garamond', Georgia, serif;
  letter-spacing: .01em;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(36,17,63,.35);
}
@media (max-width: 1024px) and (min-width: 641px) {
  .tarot-oracle-voice { width: clamp(240px, 34vw, 340px); }
}
@media (max-width: 640px) and (orientation: portrait) {
  /* Welcome stays below mode row, matching the prior approved mobile position. */
  .tarot-oracle-voice { top: 58%; width: min(47vw, 265px); }
  .tarot-oracle-voice-text { font-size: clamp(12px, 2.6vw, 15px); width: 80%; margin-top: 3px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .tarot-oracle-voice { top: 52%; width: min(30vw, 315px); }
  .tarot-oracle-voice-text { font-size: clamp(12px, 1.5vw, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-oracle-voice { transition: none; }
}

/* LEFT RAIL — a celestial reading selector, illustrated with fine gold filigree.
   Everything remains on the artwork's side; no ornament covers the Oracle. */
.tarot-reading-head {
  z-index: 6;
  top: clamp(78px, 13vh, 142px);
  left: var(--tarot-rail-x);
  width: var(--tarot-rail-width);
  text-align: left;
  margin: 0;
  text-shadow: 0 2px 14px rgba(7, 4, 19, .8);
}
.tarot-reading-head .tarot-kicker { font-size: .60rem; letter-spacing: .22em; margin-bottom: 9px; }
.tarot-reading-head h2 {
  font: 400 clamp(1.17rem, 1.8vw, 1.56rem) Cinzel, serif;
  color: #fff0d4;
  margin: 0;
  line-height: 1.35;
}
/* A thin connected golden thread makes the three readings feel like choices
   on an astrolabe rather than ordinary navigation boxes. */
.tarot-modes {
  z-index: 20;
  pointer-events: auto;
  top: clamp(169px, 26vh, 260px);
  left: var(--tarot-rail-x);
  width: var(--tarot-rail-width);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  isolation: isolate;
}
.tarot-modes::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 20px;
  bottom: 20px;
  left: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(238,202,139,.45) 18%, rgba(238,202,139,.45) 82%, transparent);
  pointer-events: none;
}
.tarot-mode {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  align-content: center;
  text-align: left;
  width: 100%;
  min-height: 53px;
  padding: 7px 6px 8px 0;
  color: #f8efdd;
  background: linear-gradient(90deg, rgba(22,10,49,.21), rgba(20,11,36,.03) 90%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  cursor: pointer;
  transition: background .28s ease, translate .28s ease, filter .28s ease;
}
.tarot-mode::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 50%;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(237,203,144,.45);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(61,38,103,.72), rgba(14,9,35,.9) 72%);
  box-shadow: inset 0 0 0 3px rgba(224,185,120,.055), 0 1px 12px rgba(9,5,24,.32);
  pointer-events: none;
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.tarot-mode::after {
  content: '';
  position: absolute;
  left: 42px;
  right: 5px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(227,190,126,.36), rgba(227,190,126,.1) 72%, transparent);
  pointer-events: none;
}
.tarot-mode:last-child::after { display: none; }
.tarot-mode-index {
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  text-align: center;
  font: .65rem Cinzel, serif;
  color: #e9ca8d;
  text-shadow: 0 0 10px rgba(239,196,109,.25);
}
.tarot-mode strong {
  grid-column: 2;
  grid-row: 1;
  font: 500 clamp(.72rem, .96vw, .85rem) Cinzel, serif;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tarot-mode > span:last-child {
  grid-column: 2;
  grid-row: 2;
  font: italic .88rem 'Cormorant Garamond', serif;
  color: #e2d6e8;
}
.tarot-mode:hover, .tarot-mode:focus-visible, .tarot-mode.is-active {
  background: linear-gradient(90deg, rgba(69,39,99,.54), rgba(30,18,56,.15) 80%, transparent);
  border: 0;
  box-shadow: none;
  translate: 2px 0;
  filter: none;
}
.tarot-mode:hover::before, .tarot-mode:focus-visible::before, .tarot-mode.is-active::before {
  border-color: rgba(255,229,169,.95);
  background: radial-gradient(circle, rgba(104,68,146,.82), rgba(34,17,66,.98) 72%);
  box-shadow: 0 0 0 3px rgba(231,190,119,.10), 0 0 17px rgba(240,200,126,.37), inset 0 0 10px rgba(227,193,134,.1);
}
.tarot-mode.is-active strong { color: #ffeac0; text-shadow: 0 0 12px rgba(245,210,146,.28); }
.tarot-mode:focus-visible { outline: 1px solid rgba(251,220,164,.7); outline-offset: 2px; }

/* ORACLE INVITATION — one gentle, sequential gold-lavender cue, never a loop.
   No resize, translation, or movement; a visitor's choice cancels the cue. */
.tarot-mode.is-oracle-inviting {
  translate: 0 0;
  background: linear-gradient(90deg, rgba(95,58,137,.68), rgba(48,28,85,.34) 78%, transparent);
  animation: tarot-oracle-mode-glow 750ms ease-in-out 1 both;
}
.tarot-mode.is-oracle-inviting::before {
  border-color: rgba(255,234,182,.98);
  background: radial-gradient(circle, rgba(111,75,158,.94), rgba(37,20,73,.96) 75%);
  box-shadow: 0 0 0 3px rgba(231,190,119,.12), 0 0 20px rgba(246,207,134,.50), inset 0 0 10px rgba(231,193,134,.12);
}
.tarot-mode.is-oracle-inviting strong {
  color: #ffedcb;
  text-shadow: 0 0 11px rgba(255,232,171,.72), 0 0 24px rgba(204,158,255,.28);
}
.tarot-mode.is-oracle-inviting .tarot-mode-index {
  color: #ffefc4;
  text-shadow: 0 0 12px rgba(255,224,155,.74);
}
@keyframes tarot-oracle-mode-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(242,204,133,0); filter: brightness(1); }
  48% { box-shadow: 0 0 22px 4px rgba(237,200,126,.28), inset 0 0 17px rgba(184,139,238,.10); filter: brightness(1.15); }
}

/* The question is an inscribed, translucent oracle panel—not a browser form. */
.tarot-question {
  z-index: 10;
  pointer-events: auto;
  top: clamp(309px, 49vh, 485px);
  left: var(--tarot-rail-x);
  width: var(--tarot-rail-width);
  margin: 0;
  padding: 17px 15px 14px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 12px 3px 12px 3px;
  background: linear-gradient(150deg, rgba(28,15,54,.86), rgba(10,8,29,.80)) padding-box,
              linear-gradient(130deg, rgba(255,222,162,.72), rgba(236,201,136,.23) 45%, rgba(198,162,235,.47) 100%) border-box;
  box-shadow: inset 0 0 20px rgba(137,93,174,.065), 0 17px 34px rgba(4,3,13,.29);
  backdrop-filter: blur(9px);
}
.tarot-question::before {
  content: '✧';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 9px;
  background: radial-gradient(circle at center, #291b46 0%, #291b46 38%, rgba(41,27,70,0) 73%);
  color: #efce91;
  font: 19px Georgia,serif;
  text-shadow: 0 0 12px rgba(243,202,120,.4);
  pointer-events: none;
}
.tarot-question::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241,205,146,.30), transparent);
  pointer-events: none;
}
.tarot-question label {
  display: block;
  font: 500 18px Cinzel, serif;
  color: #f3d29a;
  letter-spacing: .17em;
  margin: 0 0 11px;
}
.tarot-question label::before { content: '✦'; font: .65rem Georgia, serif; margin-right: 8px; color: #ddbb85; }
/* Flash only the YOUR QUESTION lettering as the question form becomes visible.
   The inscription returns to its original gold after one soft pulse. */
.tarot-question.is-label-flashing label {
  animation: tarot-question-label-flash 950ms ease-in-out 1;
}
.tarot-question.is-label-flashing label::before {
  animation: tarot-question-symbol-flash 950ms ease-in-out 1;
}
@keyframes tarot-question-label-flash {
  0%, 100% { color: #f3d29a; text-shadow: none; filter: brightness(1); }
  40% { color: #f8d996;
    text-shadow: 0 0 5px rgba(248,202,103,.54),
                 0 0 13px rgba(246,204,118,.48),
                 0 0 24px rgba(232,185,103,.22);
    filter: brightness(1.04);
  }
}
@keyframes tarot-question-symbol-flash {
  0%, 100% { color: #ddbb85; text-shadow: none; }
  40% { color: #f8d996;
    text-shadow: 0 0 5px rgba(248,202,103,.52),
                 0 0 13px rgba(246,204,118,.43),
                 0 0 23px rgba(232,185,103,.19);
  }
}
.tarot-question textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 132px;
  resize: none;
  overflow-y: auto;
  scrollbar-width: none; /* Scroll with wheel/touch without a visible white bar. */
  -ms-overflow-style: none;
  padding: 2px 1px 7px;
  margin: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(237,199,135,.38);
  border-radius: 0;
  outline: none;
  color: #fff3df;
  background: transparent;
  box-shadow: none;
  /* EB Garamond: requested 18px/300; font source supports 400 as its lightest true weight. */
  font: 300 18px/1.52 'EB Garamond', Georgia, serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tarot-question textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tarot-question textarea::placeholder { color: rgba(225,205,223,.68); font-style: italic; font-size: 14px; font-weight: 400; }
.tarot-question textarea:focus {
  outline: none;
  border-bottom-color: #f4d5a0;
  box-shadow: 0 7px 8px -9px rgba(255,224,159,.8);
}
.tarot-button { border: 1px solid rgba(231,200,135,.55); padding: 9px 13px; color: #f6e7c5; cursor: pointer; font: .72rem Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; background: transparent; -webkit-appearance: none; appearance: none; }
.tarot-button-primary { background: linear-gradient(180deg, rgba(31, 20, 58, .88), rgba(13, 9, 29, .92)); color: #f7e8bd; border-color: rgba(232, 200, 122, .68); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 28px rgba(4, 2, 12,.22); }
.tarot-button-primary:hover { background: linear-gradient(180deg, rgba(45, 28, 78, .94), rgba(18, 11, 38, .96)); border-color: #f0d491; color: #fff2ce; }
.tarot-button:hover { transform: none; border-color: #fae4ac; }
.tarot-question .tarot-button {
  display: block;
  margin: 0 0 0 auto;
  padding: 8px 11px 8px 13px;
  font-size: .63rem;
  letter-spacing: .13em;
  border: 1px solid rgba(233,198,135,.56);
  border-radius: 2px;
  background: linear-gradient(115deg, rgba(107,72,129,.32), rgba(43,28,75,.52));
  box-shadow: inset 0 0 0 1px rgba(243,209,150,.04);
}
.tarot-question .tarot-button::after { content: '✧'; margin-left: 10px; color: #edd095; font: .78rem Georgia,serif; }
.tarot-question .tarot-button:hover, .tarot-question .tarot-button:focus-visible {
  background: linear-gradient(115deg, rgba(133,91,149,.45), rgba(52,32,85,.73));
  border-color: #f5dba6;
  box-shadow: 0 0 16px rgba(236,200,132,.18);
}
/* RIGHT RAIL — progress, selected cards and Shuffle. Never cover the face. */
.tarot-table {
  position: absolute;
  inset: 0;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  text-align: initial;
  pointer-events: none;
}
.tarot-table-status {
  z-index: 6;
  top: clamp(87px, 15vh, 158px);
  right: var(--tarot-rail-x);
  width: var(--tarot-rail-width);
  margin: 0;
  text-align: right;
  text-shadow: 0 2px 16px rgba(6, 3, 18, .9);
}
.tarot-table-status .tarot-kicker { margin: 0 0 7px; font-size: .61rem; }
.tarot-table-status #mode-label:empty { display: none; }
.tarot-table-status h2 {
  margin: 0;
  font: 400 clamp(1.02rem, 1.4vw, 1.24rem) Cinzel, serif;
  line-height: 1.42;
  color: #fff0d4;
}
.tarot-table-status #draw-counter { margin: 8px 0 0; font: .96rem 'Cormorant Garamond', serif; color: #f2e6d6; }
.tarot-drawn {
  z-index: 7;
  left: 50%;
  bottom: clamp(158px, 31vh, 300px);
  width: min(430px, 38vw);
  min-height: clamp(142px, 19.2vh, 192px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 1.1vw, 16px);
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.tarot-draw-placeholder {
  width: clamp(93.6px, 7.44vw, 124.8px);
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(232,200,122,.34);
  border-radius: 12px;
  background: rgba(14,9,31,.16);
  box-shadow: inset 0 0 0 1px rgba(255,242,202,.05), 0 8px 24px rgba(0,0,0,.16);
  position: relative;
}
.tarot-draw-placeholder::before {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(232,200,122,.42);
  font-size: 1rem;
}
.tarot-draw-placeholder::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(232,200,122,.18);
  border-radius: 8px;
}
/* The destination border flashes ONCE, precisely when the flying card lands.
   Separate overlay: never changes card geometry, flip, or the Oracle artwork. */
.tarot-drawn-card { position: relative; width: clamp(93.6px, 7.44vw, 124.8px); text-align: center; perspective: 900px; }
.tarot-drawn-card.is-arriving::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  aspect-ratio: 2 / 3;
  border: 2px solid transparent;
  border-radius: 14px;
  pointer-events: none;
  animation: tarot-slot-arrival 820ms ease-out 1 both;
}
@keyframes tarot-slot-arrival {
  0%   { border-color: rgba(255,238,177,0); box-shadow: 0 0 0 0 rgba(236,196,116,0); opacity: 0; }
  19%  { border-color: rgba(255,238,183,.98); box-shadow: 0 0 10px 2px rgba(245,204,126,.8), 0 0 24px 6px rgba(185,133,235,.37); opacity: 1; }
  45%  { border-color: rgba(250,223,164,.76); box-shadow: 0 0 8px 2px rgba(240,201,125,.46), 0 0 16px 4px rgba(185,133,235,.2); opacity: .85; }
  100% { border-color: rgba(255,238,177,0); box-shadow: 0 0 0 0 rgba(236,196,116,0); opacity: 0; }
}
.tarot-drawn-card p { font: .58rem Cinzel, serif; letter-spacing: .05em; color: #f4e7f8; margin: 5px 0 0; }
.tarot-card-reveal { position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform 760ms cubic-bezier(.2,.72,.2,1); }
.tarot-drawn-card.is-revealed .tarot-card-reveal { transform: rotateY(180deg); }
.tarot-card-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; }
.tarot-card-side.back { }
.tarot-card-side.front { transform: rotateY(180deg); border: 1px solid rgba(231,199,124,.82); background: #150e2b; box-shadow: 0 14px 30px rgba(0,0,0,.34); }
/* Full-bleed illustrated face. 1024×1536 original ratio equals the existing 2:3 card. */
.tarot-card-image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.tarot-drawn-card.is-reversed .tarot-card-image { transform: rotate(180deg); }
.tarot-drawn-card.is-revealed .tarot-card-reveal { pointer-events: auto; cursor: zoom-in; }
.tarot-drawn-card.is-revealed .tarot-card-reveal:focus-visible { outline: 2px solid #f2d793; outline-offset: 4px; }
.tarot-drawn-card.is-drawing { animation: tarot-draw-in 520ms cubic-bezier(.2,.75,.2,1) both; }
@keyframes tarot-draw-in { from { opacity:0; transform:translateY(42px) scale(.76) rotate(-3deg); } to { opacity:1; transform:none; } }

.tarot-reading-note {
  position: absolute;
  z-index: 6;
  top: clamp(320px, 49vh, 430px);
  right: var(--tarot-rail-x);
  width: var(--tarot-rail-width);
  margin: 0;
  font: italic .88rem 'Cormorant Garamond', serif;
  line-height: 1.25;
  text-align: right;
  color: #f1e0ca;
  text-shadow: 0 2px 8px #0a0619;
}

.tarot-interpretation {
  position: absolute;
  z-index: 22;
  right: clamp(18px, 3.2vw, 54px);
  top: clamp(155px, 18vh, 205px);
  width: min(370px, 28vw);
  max-height: min(58vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 18px 20px 20px;
  border: 1px solid rgba(232,200,122,.28);
  border-radius: 16px;
  background: rgba(30, 21, 54, .70);
  box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(9px);
  text-align: left;
}
.tarot-interpretation::-webkit-scrollbar { width: 9px; }
.tarot-interpretation::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
.tarot-interpretation::-webkit-scrollbar-thumb { background: rgba(232,200,122,.48); border: 2px solid rgba(13,8,35,.86); border-radius: 999px; }
.tarot-interpretation::-webkit-scrollbar-thumb:hover { background: rgba(232,200,122,.72); }
.tarot-interpretation { scrollbar-width: thin; scrollbar-color: rgba(232,200,122,.55) rgba(255,255,255,.035); }
.tarot-interpretation-state { font: italic 1.2rem 'Cormorant Garamond',serif; color: #f7eefa; text-align:center; }
.tarot-interpretation .tarot-kicker { margin-bottom: 5px; }
.tarot-interpretation h3 { margin: 0 0 12px; font: 500 1.35rem/1.35 Cinzel,serif; color:#fff1c9; }
.tarot-verdict { display:inline-block; margin: 0 0 14px; padding: 6px 11px; border:1px solid rgba(232,200,122,.46); border-radius:999px; font:500 .78rem Cinzel,serif; letter-spacing:.1em; color:#f7df99; }
.tarot-reading-summary,.tarot-reading-section p,.tarot-card-meaning p,.tarot-closing { margin:0; font: 300 16px/1.6 'Source Sans 3', Arial, sans-serif; color:#faf1fa; text-shadow:none; }
.tarot-card-meanings { display:grid; gap:10px; margin:15px 0; }
.tarot-card-meaning { padding-top:10px; border-top:1px solid rgba(232,200,122,.15); }
.tarot-card-meaning strong { display:block; margin-bottom:6px; font:500 .82rem/1.4 Cinzel,serif; letter-spacing:.05em; color:#f0d48d; }
.tarot-reading-section { margin-top:14px; }
.tarot-reading-section h4 { margin:0 0 6px; font:500 .82rem/1.4 Cinzel,serif; letter-spacing:.06em; text-transform:uppercase; color:#f0d48d; }
.tarot-closing { margin-top:16px; padding-top:12px; border-top:1px solid rgba(232,200,122,.18); font-style:italic; color:#d9cce2; }
.tarot-interpretation.is-loading::after { content:''; display:block; width:28px; height:28px; margin:14px auto 0; border:1px solid rgba(232,200,122,.25); border-top-color:#e8c87a; border-radius:50%; animation: tarot-reading-spin .8s linear infinite; }
@keyframes tarot-reading-spin { to { transform:rotate(360deg); } }
/* ASK A QUESTION ONLY: next three-card round inside the current Oracle session. */
.tarot-question-next { display: grid; gap: 9px; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(232,200,122,.25); }
.tarot-question-next p { margin: 0; color: #f3dfb6; font: 500 .74rem Cinzel, serif; letter-spacing: .09em; }
.tarot-question-next .tarot-button { justify-self: start; white-space: normal; text-align: center; }
@media (max-width: 980px) {
  .tarot-interpretation { position:relative; top:auto; right:auto; width:min(620px,calc(100% - 28px)); max-height:none; margin:18px auto 220px; }
}

.tarot-table.is-complete .tarot-deck-zone { display: none; }
.tarot-deck-zone {
  z-index: 8;
  /* Bring desktop SHUFFLE 36px inward from the right edge. */
  right: calc(var(--tarot-rail-x) + 36px);
  bottom: clamp(159px, 29vh, 290px);
  width: var(--tarot-rail-width);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  pointer-events: auto;
}
.tarot-deck { position: relative; width: clamp(63.75px, 5.95vw, 90.1px); aspect-ratio: 2 / 3; border: 0; background: none; padding: 0; cursor: pointer; }
.tarot-card-back { position: absolute; inset: 0; }
.tarot-card-back-shadow { transform: translate(5px,5px); opacity: .55; }
.tarot-deck-label { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: #fff0cc; font: .63rem Cinzel, serif; letter-spacing: .12em; text-shadow: 0 2px 8px #100820; white-space: nowrap; }
.tarot-deck.is-shuffling .tarot-card-back:first-child { animation: shuffle-left .55s ease; }
.tarot-deck.is-shuffling .tarot-card-back:nth-child(2) { animation: shuffle-right .55s ease; }
/* SHUFFLE guidance shared across modes: Yes/No after confirmation,
   Ask a Question on each new round (and after confirmation), Divine Message on selection.
   The glow clears when the visitor shuffles, draws or changes mode. */
.tarot-deck.is-guided { animation: tarot-shuffle-guide 1.7s ease-in-out infinite; }
.tarot-deck.is-guided .tarot-card-back:not(.tarot-card-back-shadow) {
  border-color: #ffedb5;
  box-shadow: inset 0 0 0 3px rgba(17, 8, 40, .84),
              inset 0 0 0 4px rgba(249, 223, 161, .34),
              0 0 0 2px rgba(255, 229, 157, .65),
              0 0 19px 6px rgba(248, 202, 103, .57),
              0 0 40px 13px rgba(198, 144, 255, .36);
}
.tarot-deck.is-guided .tarot-deck-label { color: #fff0af; text-shadow: 0 0 13px rgba(255,220,133,.85), 0 2px 8px #100820; }
@keyframes tarot-shuffle-guide {
  0%,100% { filter: drop-shadow(0 0 3px rgba(246, 204, 118, .37)); }
  50% { filter: drop-shadow(0 0 13px rgba(246, 204, 118, .91)); }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-deck.is-guided { animation: none; filter: drop-shadow(0 0 8px rgba(246,204,118,.72)); }
}
.tarot-deck:disabled { opacity: .45; cursor: default; }
/* BOTTOM FAN — cards curve across the dress, not across the Oracle's face. */
.tarot-fan {
  z-index: 5;
  left: 50%;
  bottom: 9px;
  width: min(1120px, calc(100% - 140px));
  height: clamp(205px, 36vh, 340px);
  margin: 0;
  transform: translateX(-50%);
  perspective: 1400px;
  isolation: isolate;
  pointer-events: auto;
}
.tarot-fan::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  width: min(91%, 1020px); height: 64%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(17, 10, 43, .35), transparent 70%);
  filter: blur(7px);
  pointer-events: none;
}
.tarot-fan-card {
  position: absolute;
  pointer-events: auto;
  left: calc(50% + var(--x) * 1%);
  bottom: calc(16px + var(--y) * 1%);
  width: clamp(63.75px, 5.95vw, 90.1px);
  aspect-ratio: 2 / 3;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  transform-origin: 50% 155%;
  transform: translateX(-50%) rotate(calc(var(--angle) * 1deg));
  transition: transform .24s ease, filter .24s ease;
  z-index: var(--stack);
}
.tarot-fan-card:hover, .tarot-fan-card:focus-visible {
  transform: translateX(-50%) translateY(-22px) rotate(calc(var(--angle) * 1deg)) scale(1.045);
  z-index: 150;
  outline: none; /* No rectangular browser highlight around lifted card. */
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.5));
}
.tarot-fan-card:disabled { cursor: default; }
/* OPENING ONLY — reveal the existing fan in its normal geometry, left to
   right. Each new card travels ONE small card-step from its neighbour, not
   all the way from a shared left-hand pile. Cards still waiting are hidden.
   The fan's left/bottom coordinates and its 30-card layout never animate. */
.tarot-fan.is-opening-prep,
.tarot-fan.is-opening-spread,
.tarot-fan.is-opening-prep .tarot-fan-card,
.tarot-fan.is-opening-spread .tarot-fan-card { pointer-events: none; }
.tarot-fan.is-opening-prep .tarot-fan-card { opacity: 0; }
.tarot-fan.is-opening-spread .tarot-fan-card {
  animation: tarot-opening-hand-spread 410ms cubic-bezier(.24,.66,.30,1) both;
  animation-delay: calc(var(--spread-index) * 39ms);
  transition: none;
}
@keyframes tarot-opening-hand-spread {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - clamp(12px, 2vw, 25px))) translateY(4px)
               rotate(calc(var(--angle) * 1deg + 2deg));
  }
  18% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(calc(var(--angle) * 1deg));
  }
}

/* ARCANE SHUFFLE — cinematic light across a stationary 30-card fan.
   Motion design: a single moonlit sweep + fine gold edge glints, with just
   three cards breathing 5px together. No sequential 37px lift / centipede.
   The actual shuffle is still handled ONLY by TarotState.shuffle(). */
.tarot-fan.is-arcane-shuffling { pointer-events: none; }
.tarot-fan.is-arcane-shuffling .tarot-fan-card { pointer-events: none; }
.tarot-fan.is-arcane-shuffling .tarot-fan-card:hover,
.tarot-fan.is-arcane-shuffling .tarot-fan-card:focus-visible {
  outline: none; filter: none;
  transform: translateX(-50%) rotate(calc(var(--angle) * 1deg));
}
/* A very faint, contained sweep. It never reaches the Oracle's face. */
.tarot-fan.is-arcane-shuffling::after {
  content: '';
  position: absolute;
  z-index: 145;
  pointer-events: none;
  top: 20%; left: 23%; width: 18%; height: 77%;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255,232,177,.24) 0%, rgba(197,160,246,.15) 32%, transparent 75%);
  filter: blur(11px);
  mix-blend-mode: screen;
  animation: tarot-arcane-sweep 1080ms cubic-bezier(.36,0,.55,1) both;
}
/* Card backs do not travel; only their gold details catch the light. */
.tarot-fan.is-arcane-shuffling .tarot-fan-card-face {
  animation: tarot-arcane-edge 345ms ease-out both;
  animation-delay: calc(var(--arcane-order) * 34ms);
}
.tarot-fan.is-arcane-shuffling .tarot-fan-card-face::after {
  background: linear-gradient(115deg, transparent 9%,
    rgba(255,243,206,.16) 44%, rgba(249,211,135,.28) 51%,
    rgba(185,150,231,.12) 61%, transparent 85%);
  animation: tarot-arcane-detail 345ms ease-out both;
  animation-delay: calc(var(--arcane-order) * 34ms);
}
/* Three tiny, simultaneous levitations: an accent, not a 30-part caterpillar. */
.tarot-fan.is-arcane-shuffling .tarot-fan-card[data-arcane-accent="true"] {
  animation: tarot-arcane-breathe 640ms cubic-bezier(.22,.7,.22,1) 210ms both;
}
.tarot-deck.is-shuffling:disabled { opacity: 1; cursor: progress; }
@keyframes tarot-arcane-sweep {
  0% { left: 23%; opacity: 0; }
  15% { opacity: .45; }
  65% { opacity: .43; }
  100% { left: 77%; opacity: 0; }
}
@keyframes tarot-arcane-edge {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.21) drop-shadow(0 0 6px rgba(245,202,122,.48)); }
}
@keyframes tarot-arcane-detail {
  0%, 100% { opacity: .05; }
  42% { opacity: .85; }
}
@keyframes tarot-arcane-breathe {
  0%, 100% { transform: translateX(-50%) rotate(calc(var(--angle) * 1deg)); }
  45% { transform: translateX(-50%) translateY(-5px) rotate(calc(var(--angle) * 1deg)); }
}

.tarot-fan-card-face { position: relative; width: 100%; height: 100%; }
.tarot-button-ghost {
  z-index: 9;
  right: var(--tarot-rail-x);
  bottom: 17px;
  max-width: var(--tarot-rail-width);
  padding: 8px 11px;
  color: #f4e4cf;
  background: rgba(13, 7, 28, .38);
  border-color: rgba(231, 200, 135, .36);
  font-size: .61rem;
  pointer-events: auto;
}
/* v16.77: desktop restart button 75px left and 50px up; mobile/tablet unchanged. */
@media (min-width: 1025px) and (min-height: 521px) {
  .tarot-button-ghost { right: calc(var(--tarot-rail-x) + 75px); bottom: 67px; }
}
.tarot-footer { padding: 14px; text-align: center; background: #070611; color: #9486a5; font-size: .75rem; }
@keyframes shuffle-left { 45% { transform: translate(-48px, 8px) rotate(-10deg); } 100% { transform: translate(5px, 5px); } }
@keyframes shuffle-right { 45% { transform: translate(48px, -5px) rotate(10deg); } 100% { transform: none; } }
/* TABLET — independently tuned left/right rails and fan scale. */
@media (max-width: 1024px) and (min-width: 641px) {
  :root { --tarot-rail-x: 20px; --tarot-rail-width: clamp(166px, 24vw, 215px); }
  .tarot-reading-head { top: 73px; }
  .tarot-modes { top: 156px; }
  .tarot-mode { min-height: 45px; padding-left: 0; }
  .tarot-mode strong { font-size: .68rem; }
  .tarot-question { top: 310px; }
  .tarot-table-status { top: 79px; }
  .tarot-drawn { bottom: clamp(158px, 29vh, 240px); width: min(390px, 48vw); }
  .tarot-deck-zone { right: calc(var(--tarot-rail-x) + 28px); bottom: clamp(143px, 27vh, 260px); }
  .tarot-fan { width: calc(100% - 40px); height: clamp(180px, 37vh, 290px); }
  .tarot-deck, .tarot-fan-card { width: clamp(53.55px, 5.95vw, 71.4px); }
}
/* LANDSCAPE WITH LOW HEIGHT — keep the artwork static, compress only controls. */
@media (max-height: 520px) and (orientation: landscape) {
  .tarot-reading-head { top: 48px; }
  .tarot-modes { top: 115px; gap: 0; }
  .tarot-modes::before { top: 15px; bottom: 15px; }
  .tarot-mode { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
  .tarot-mode::before { width: 26px; height: 26px; left: 5px; }
  .tarot-question { top: 238px; padding: 11px 12px 10px; }
  .tarot-question label { margin-bottom: 4px; }
  .tarot-question textarea { margin-bottom: 6px; padding-bottom: 5px; }
  .tarot-question textarea { min-height: 34px; max-height: 66px; }
  .tarot-table-status { top: 50px; }
  .tarot-drawn { bottom: 148px; width: min(330px, 46vw); }
  .tarot-deck-zone { bottom: 101px; }
  .tarot-deck { width: 52.7px; }
  .tarot-fan { height: 183px; bottom: 0; }
  .tarot-fan-card { width: 52.7px; }
  .tarot-button-ghost { bottom: 5px; }
}
/* MOBILE PORTRAIT — no desktop side-rail leakage. */
@media (max-width: 640px) and (orientation: portrait) {
  :root { --tarot-rail-x: 13px; --tarot-rail-width: calc(100% - 26px); }
  .tarot-header { width: calc(100% - 26px); }
  .tarot-header .brand-mini span:last-child { display: none; }
  .tarot-portal-art { object-position: 53% top; }
  .tarot-portal-copy { padding-bottom: 55px; }
  .tarot-reading { min-height: max(730px, 100svh); }
  .tarot-reading::before { background: linear-gradient(180deg, transparent 0 29%, rgba(9, 6, 26, .24) 38%, transparent 61%, rgba(9, 6, 26, .2)); }
  .tarot-reading-head { top: 35%; left: 14px; width: calc(100% - 28px); }
  .tarot-reading-head .tarot-kicker { font-size: .55rem; }
  .tarot-reading-head h2 { font-size: 1.18rem; }
  .tarot-modes { top: calc(35% + 58px); left: 11px; width: calc(100% - 22px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .tarot-modes::before { display: none; }
  .tarot-mode { min-height: 59px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(232,200,122,.3); border-radius: 8px 2px 8px 2px; background: linear-gradient(155deg,rgba(34,19,66,.69),rgba(11,8,29,.44)); }
  .tarot-mode::before, .tarot-mode::after { display: none; }
  .tarot-mode:hover, .tarot-mode:focus-visible, .tarot-mode.is-active { border: 1px solid rgba(250,220,162,.8); background: linear-gradient(155deg,rgba(91,52,115,.8),rgba(24,14,53,.62)); translate: 0 -2px; }
  .tarot-mode.is-oracle-inviting { border-color: rgba(255,234,182,.90); background: linear-gradient(155deg,rgba(112,75,156,.83),rgba(42,23,81,.75)); translate: 0 0; }
  .tarot-mode-index { display: none; }
  .tarot-mode strong { white-space: normal; font-size: .57rem; line-height: 1.3; }
  .tarot-mode > span:last-child { font-size: .75rem; line-height: 1.1; }
  .tarot-question { top: calc(35% + 124px); left: 11px; width: calc(100% - 22px); padding: 13px 12px 10px; }
  .tarot-question label { margin-bottom: 5px; }
  .tarot-question textarea { margin-bottom: 6px; padding-bottom: 5px; }
  .tarot-question textarea { min-height: 43px; max-height: 85px; }
  .tarot-table-status { top: calc(35% + 133px); right: 13px; width: calc(100% - 26px); text-align: center; }
  .tarot-table-status h2 { font-size: .91rem; }
  .tarot-table-status #draw-counter { margin-top: 3px; }
  .tarot-table.is-question-open .tarot-table-status { top: calc(35% + 243px); }
  .tarot-drawn { left: 50%; right: auto; bottom: 226px; width: calc(100% - 80px); min-height: 74px; justify-content: center; gap: 7px; transform: translateX(-50%); }
  .tarot-table.is-question-open .tarot-drawn { bottom: 214px; }
  .tarot-drawn-card, .tarot-draw-placeholder { width: 49.2px; }
  .tarot-deck-zone { bottom: 190px; left: 16px; right: auto; width: 104px; align-items: flex-start; }
  .tarot-reading-note { top: calc(35% + 272px); right: 13px; width: 134px; font-size: .80rem; }
  .tarot-deck { width: clamp(40.8px, 11.9vw, 53.55px); }
  .tarot-deck-label { font-size: .53rem; }
  .tarot-fan { width: 100%; height: 215px; bottom: 8px; }
  .tarot-fan-card { width: clamp(40.8px, 11.9vw, 53.55px); }
  .tarot-button-ghost { bottom: 5px; right: 8px; font-size: .49rem; padding: 5px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarot-header,.tarot-portal-copy,.tarot-reading,.tarot-button,.tarot-mode,.tarot-fan-card { transition: none !important; }
  .tarot-deck.is-shuffling .tarot-card-back { animation: none !important; }
  .tarot-mode.is-oracle-inviting { animation: none !important; }
  .tarot-fan.is-arcane-shuffling .tarot-fan-card,
  .tarot-fan.is-arcane-shuffling .tarot-fan-card-face,
  .tarot-fan.is-arcane-shuffling .tarot-fan-card-face::after,
  .tarot-fan.is-arcane-shuffling::after { animation: none !important; }
  .is-entering .tarot-header,.is-entering .tarot-portal-copy { filter: none; translate: none; }
}


/* EXPANDED READING — the SAME live interpretation panel moves to a top-level
   overlay. No duplicated text, card state, interpretation, or session history. */
.tarot-reading-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30001;
  background: rgba(6, 4, 19, .76);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.tarot-reading-expanded { overflow: hidden; }
.tarot-interpretation-toolbar {
  position: sticky;
  top: -9px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  margin: -9px -10px 5px 0;
  pointer-events: auto;
}
/* A miniature royal-gold medallion with the familiar two outward arrows.
   Preserve its accessible name and the exact same expand/close functionality. */
.tarot-reading-expand {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(244,210,145,.78);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 24%, rgba(90,57,119,.97), rgba(30,17,56,.98) 75%);
  color: #ffedbf;
  box-shadow: 0 0 15px rgba(220,181,114,.12), inset 0 0 10px rgba(232,193,129,.09);
  cursor: pointer;
  transition: background 170ms ease, border-color 170ms ease, box-shadow 170ms ease, color 170ms ease;
}
.tarot-reading-expand::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(242,205,142,.23);
  border-radius: 50%;
  pointer-events: none;
}
.tarot-reading-expand:hover, .tarot-reading-expand:focus-visible {
  background: radial-gradient(circle at 38% 24%, rgba(119,75,150,.99), rgba(49,25,83,.99) 77%);
  color: #fff6dc;
  border-color: #ffe4a5;
  box-shadow: 0 0 20px rgba(242,207,132,.44), inset 0 0 14px rgba(237,201,139,.15);
}
.tarot-reading-expand:focus-visible { outline: 2px solid #f6e0b1; outline-offset: 3px; }
.tarot-reading-expand svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.tarot-reading-expand .tarot-icon-close { display: none; }
.tarot-interpretation.is-expanded .tarot-icon-expand { display: none; }
.tarot-interpretation.is-expanded .tarot-icon-close { display: block; }
.tarot-interpretation.is-expanded {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 30002;
  width: min(840px, calc(100vw - 48px));
  height: min(82svh, 820px);
  max-height: calc(100svh - 32px);
  margin: 0;
  padding: 25px 32px 34px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(246, 211, 148, .65);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(36, 25, 64, .70), rgba(18, 12, 39, .70));
  box-shadow: 0 30px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(241,205,141,.12) inset;
  backdrop-filter: blur(13px);
  pointer-events: auto;
  touch-action: pan-y;
}
.tarot-interpretation.is-expanded .tarot-interpretation-toolbar { top: -16px; margin: -16px -22px 8px 0; }
.tarot-interpretation.is-expanded .tarot-interpretation-content { max-width: 72ch; margin: 0 auto; }
@media (max-width: 600px), (max-height: 550px) {
  .tarot-interpretation.is-expanded {
    width: calc(100vw - 20px);
    height: calc(100svh - 20px);
    max-height: calc(100svh - 20px);
    padding: 16px 17px 22px;
    border-radius: 12px;
  }
  .tarot-interpretation.is-expanded .tarot-interpretation-toolbar { top: -9px; margin: -9px -9px 8px 0; }
}

/* Keep the existing SZ emblem clickable above the reading UI. */
.tarot-header { z-index: 20010; pointer-events: none; }
.tarot-header .brand-mini, .tarot-header .tarot-home-link { pointer-events: auto; }
.is-entering .tarot-header { opacity: 1; filter: none; translate: none; }

/* Desktop reading rail: override base positioning after all component rules. */
@media (min-width: 1025px) and (min-height: 521px) {
  .tarot-reading-head, .tarot-modes, .tarot-question {
    left: calc(var(--tarot-rail-x) + 110px);
  }
}

/* v16.75: Move desktop deck 50px left and 50px down from v16.74.
   Desktop only; mobile and tablet retain their independent layout. */
@media (min-width: 1025px) {
  .tarot-deck-zone {
    /* Move the desktop SHUFFLE deck 50px further left from v16.74. */
    right: calc(var(--tarot-rail-x) + 249px - clamp(31.875px, 2.975vw, 45.05px));
    /* Lower the deck 50px from v16.74. */
    top: calc(clamp(169px, 26vh, 260px) + 76.5px - clamp(47.8125px, 4.4625vw, 67.575px));
    bottom: auto;
  }
}

/* Optional language switch, rendered only when several languages are enabled. */
.tarot-header-actions { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 25px); pointer-events: auto; }
.tarot-lang-switch { display: flex; gap: 6px; align-items: center;
  font: 500 .72rem Cinzel, Georgia, serif; color: #f3e1c0;
  text-shadow: 0 2px 10px #000; pointer-events: auto; }
.tarot-lang-switch a { padding: 5px; }
.tarot-lang-switch a[aria-current="page"] { color: #fff0a8; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:640px) { .tarot-lang-switch { font-size: .66rem; } .tarot-header-actions { gap: 4px; } }


/* ============================================================================
   TAROT TYPOGRAPHY — LANGUAGE SCOPED (v16.82)
   Source of truth for EN/VI. Keep geometry and mobile/tablet layout elsewhere.
   EN: Cinzel UI, italic Garamond Oracle/input, Cormorant Garamond reading.
   VI: uppercase Lora UI, italic Lora Oracle/input, regular Lora reading.
   Generated answer lang is scoped separately from the interface language.
   Every textual element has weight 400. No font binaries are bundled.
   ============================================================================ */
:root {
  --tarot-font-interface: 'Cinzel', Georgia, serif;
  --tarot-font-editorial: 'Cormorant Garamond', Georgia, serif;
  --tarot-font-voice: Garamond, 'EB Garamond', Georgia, serif;
  --tarot-font-input: Garamond, 'EB Garamond', Georgia, serif;
  --tarot-font-body: 'Cormorant Garamond', Georgia, serif;
}
html[lang="vi"] {
  --tarot-font-interface: 'Lora', Georgia, serif;
  --tarot-font-editorial: 'Lora', Georgia, serif;
  --tarot-font-voice: 'Lora', Georgia, serif;
  --tarot-font-input: 'Lora', Georgia, serif;
  --tarot-font-body: 'Lora', Georgia, serif;
}
.tarot-page { font-family: var(--tarot-font-interface); }
/* Overrides earlier 300/500/600 font shorthands and semantic <strong>.
   Scoped to Tarot only, so other pages retain their approved typography. */
.tarot-page, .tarot-page * { font-weight: 400 !important; }

/* Interface titles, labels, actions, card-face labels and brand. */
.tarot-page .brand-mini,
.tarot-page .mini-sigil,
.tarot-home-link, .tarot-lang-switch,
.tarot-kicker, .tarot-portal h1, .tarot-reading-head h2,
.tarot-mode-index, .tarot-mode strong, .tarot-mode > span:last-child,
.tarot-question label, .tarot-button, .tarot-table-status h2,
.tarot-drawn-card p, .tarot-card-number, .tarot-card-name,
.tarot-reading-section h4, .tarot-question-next p, .tarot-deck-label,
.tarot-interpretation h3, .tarot-verdict, .tarot-card-meaning strong {
  font-family: var(--tarot-font-interface);
  font-style: normal;
}
/* Oracle and question text: actual italic face, not synthesized bold. */
.tarot-oracle-voice-text, .tarot-question textarea,
.tarot-question textarea::placeholder {
  font-family: var(--tarot-font-voice);
  font-style: italic;
}
.tarot-question textarea, .tarot-question textarea::placeholder {
  font-family: var(--tarot-font-input);
}
/* Reader prose stays regular, including the concluding message. */
.tarot-reading-summary, .tarot-reading-section p, .tarot-card-meaning p,
.tarot-closing, .tarot-interpretation-state,
.tarot-portal-copy>p:not(.tarot-kicker), .tarot-table-status #draw-counter,
.tarot-reading-note, .tarot-card-orientation {
  font-family: var(--tarot-font-body);
  font-style: normal;
}

/* Vietnamese UI headings/actions are uppercase. Do not uppercase the Oracle,
   the question field or reading paragraphs. Typography-only: no layout edits. */
html[lang="vi"] .tarot-page .brand-mini,
html[lang="vi"] .tarot-home-link,
html[lang="vi"] .tarot-lang-switch,
html[lang="vi"] .tarot-kicker,
html[lang="vi"] .tarot-portal h1,
html[lang="vi"] .tarot-reading-head h2,
html[lang="vi"] .tarot-mode strong,
html[lang="vi"] .tarot-mode > span:last-child,
html[lang="vi"] .tarot-question label,
html[lang="vi"] .tarot-button,
html[lang="vi"] .tarot-table-status h2,
html[lang="vi"] .tarot-drawn-card p,
html[lang="vi"] .tarot-card-name,
html[lang="vi"] .tarot-reading-section h4,
html[lang="vi"] .tarot-question-next p,
html[lang="vi"] .tarot-deck-label {
  text-transform: uppercase;
}
html[lang="vi"] .tarot-kicker,
html[lang="vi"] .tarot-question label,
html[lang="vi"] .tarot-mode strong,
html[lang="vi"] .tarot-mode > span:last-child,
html[lang="vi"] .tarot-button,
html[lang="vi"] .tarot-reading-section h4,
html[lang="vi"] .tarot-question-next p,
html[lang="vi"] .tarot-deck-label { letter-spacing: .025em; }
html[lang="vi"] .tarot-oracle-voice-text { line-height: 1.3; }
html[lang="vi"] .tarot-portal-copy>p:not(.tarot-kicker) { line-height: 1.5; }
html[lang="vi"] .tarot-reading-summary,
html[lang="vi"] .tarot-reading-section p,
html[lang="vi"] .tarot-card-meaning p,
html[lang="vi"] .tarot-closing { line-height: 1.7; }

/* Actual AI-generated text may differ from interface language. These selectors
   use the lang attributes set in renderInterpretation(), not the page locale. */
#tarot-interpretation-title:lang(en), #tarot-verdict:lang(en),
#tarot-card-meanings:lang(en) .tarot-card-meaning strong {
  font-family: 'Cinzel', Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
}
#tarot-interpretation-title:lang(vi), #tarot-verdict:lang(vi),
#tarot-card-meanings:lang(vi) .tarot-card-meaning strong {
  font-family: 'Lora', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}
#tarot-reading-summary:lang(en), #tarot-synthesis:lang(en),
#tarot-guidance:lang(en), #tarot-closing:lang(en),
#tarot-card-meanings:lang(en) .tarot-card-meaning p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  line-height: 1.6;
}
#tarot-reading-summary:lang(vi), #tarot-synthesis:lang(vi),
#tarot-guidance:lang(vi), #tarot-closing:lang(vi),
#tarot-card-meanings:lang(vi) .tarot-card-meaning p {
  font-family: 'Lora', Georgia, serif;
  font-style: normal;
  line-height: 1.7;
}


/* v16.83 — English DESKTOP only. Tablet/mobile and VI retain v16.82 typography.
   The desktop variant is a localized HTML sibling, not a CSS-generated label,
   keeping copy, selection and screen-reader text consistent with the visual UI. */
.tarot-mode-count-desktop { display: none; }
@media (min-width: 1025px) {
  html[lang="en"] .tarot-question textarea::placeholder { font-size: 16px; }
  html[lang="en"] .tarot-reading-summary,
  html[lang="en"] .tarot-reading-section p,
  html[lang="en"] .tarot-card-meaning p,
  html[lang="en"] .tarot-closing { font-size: 18px; }
  html[lang="en"] .tarot-mode-count-default { display: none; }
  html[lang="en"] .tarot-mode-count-desktop { display: inline; }
  html[lang="en"] .tarot-mode-count { text-transform: none; }
}


/* v16.84 — Vietnamese UI, independent of English desktop typography.
   +2px for the three mode titles at each existing viewport breakpoint;
   use numerals and mixed case for only the per-mode card counts;
   -2px only while the reading is loading (not error messages). */
html[lang="vi"] .tarot-mode strong {
  font-size: calc(clamp(.72rem, .96vw, .85rem) + 2px);
}
/* Override the earlier Vietnamese heading uppercase rule for counts only. */
html[lang="vi"] .tarot-mode > .tarot-mode-count:last-child {
  text-transform: none;
}
html[lang="vi"] .tarot-interpretation.is-loading .tarot-interpretation-state {
  font-size: calc(1.2rem - 2px);
}
@media (max-width: 1024px) and (min-width: 641px) {
  html[lang="vi"] .tarot-mode strong { font-size: calc(.68rem + 2px); }
}
@media (max-width: 640px) and (orientation: portrait) {
  html[lang="vi"] .tarot-mode strong { font-size: calc(.57rem + 2px); }
}


/* v16.85 — Vietnamese only: reduce the reading question heading and Oracle
   dialogue by 2px at each original responsive size. No geometry/EN changes. */
html[lang="vi"] .tarot-reading-head h2 {
  font-size: calc(clamp(1.17rem, 1.8vw, 1.56rem) - 2px);
}
html[lang="vi"] .tarot-oracle-voice-text {
  font-size: calc(clamp(16px, 1.2vw, 19px) - 2px);
}
@media (max-width: 640px) and (orientation: portrait) {
  html[lang="vi"] .tarot-reading-head h2 {
    font-size: calc(1.18rem - 2px);
  }
  html[lang="vi"] .tarot-oracle-voice-text {
    font-size: calc(clamp(12px, 2.6vw, 15px) - 2px);
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  html[lang="vi"] .tarot-oracle-voice-text {
    font-size: calc(clamp(12px, 1.5vw, 16px) - 2px);
  }
}


/* v16.86 — simplified Chinese draft, independent from approved EN/VI styles.
   Hanzi remains upright (no synthetic italic), weight 400; no fake uppercase. */
html[lang="zh-CN"] {
  --tarot-font-interface: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  --tarot-font-editorial: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  --tarot-font-voice: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  --tarot-font-input: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  --tarot-font-body: 'Noto Serif SC', 'Songti SC', SimSun, serif;
}
html[lang="zh-CN"] .tarot-page .brand-mini,
html[lang="zh-CN"] .tarot-home-link,
html[lang="zh-CN"] .tarot-kicker,
html[lang="zh-CN"] .tarot-reading-head h2,
html[lang="zh-CN"] .tarot-mode strong,
html[lang="zh-CN"] .tarot-mode-count,
html[lang="zh-CN"] .tarot-question label,
html[lang="zh-CN"] .tarot-button,
html[lang="zh-CN"] .tarot-table-status h2,
html[lang="zh-CN"] .tarot-drawn-card p,
html[lang="zh-CN"] .tarot-card-name,
html[lang="zh-CN"] .tarot-reading-section h4,
html[lang="zh-CN"] .tarot-question-next p,
html[lang="zh-CN"] .tarot-deck-label { text-transform: none; letter-spacing: normal; }
html[lang="zh-CN"] .tarot-oracle-voice-text,
html[lang="zh-CN"] .tarot-question textarea,
html[lang="zh-CN"] .tarot-question textarea::placeholder { font-style: normal; }
html[lang="zh-CN"] .tarot-oracle-voice-text { line-height: 1.4; }
html[lang="zh-CN"] .tarot-portal-copy>p:not(.tarot-kicker),
html[lang="zh-CN"] .tarot-reading-summary,
html[lang="zh-CN"] .tarot-reading-section p,
html[lang="zh-CN"] .tarot-card-meaning p,
html[lang="zh-CN"] .tarot-closing { line-height: 1.75; }
html[lang="zh-CN"] .tarot-mode strong { font-size: clamp(12px, .93vw, 15px); }
html[lang="zh-CN"] .tarot-mode-count { font-size: clamp(12px, .85vw, 14px); }
html[lang="zh-CN"] .tarot-kicker,
html[lang="zh-CN"] .tarot-question label,
html[lang="zh-CN"] .tarot-deck-label { letter-spacing: .03em; }
/* Use answer language, not interface language, for generated passages. */
#tarot-interpretation-title:lang(zh-CN), #tarot-verdict:lang(zh-CN),
#tarot-card-meanings:lang(zh-CN) .tarot-card-meaning strong {
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  text-transform: none;
  letter-spacing: normal;
}
#tarot-reading-summary:lang(zh-CN), #tarot-synthesis:lang(zh-CN),
#tarot-guidance:lang(zh-CN), #tarot-closing:lang(zh-CN),
#tarot-card-meanings:lang(zh-CN) .tarot-card-meaning p {
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  font-style: normal;
  line-height: 1.75;
}
/* Better small-screen Hanzi legibility; scope all changes to zh-CN. */
@media (max-width: 1024px) and (min-width: 641px) {
  html[lang="zh-CN"] .tarot-mode strong { font-size: 12px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  html[lang="zh-CN"] .tarot-mode strong { font-size: 12px; }
  html[lang="zh-CN"] .tarot-mode-count { font-size: 12px; }
  html[lang="zh-CN"] .tarot-reading-head h2 { font-size: 18px; }
  html[lang="zh-CN"] .tarot-oracle-voice-text { font-size: 12px; }
  html[lang="zh-CN"] .tarot-reading-note { font-size: 12px; }
  html[lang="zh-CN"] .tarot-lang-switch { font-size: 11px; gap: 3px; }
  html[lang="zh-CN"] .tarot-lang-switch a { padding: 3px; }
}


/* v16.87 — Japanese UI only. Serif Mincho editorial/Oracle; Sans for compact UI.
   Avoid synthetic italic, capital transformations or character tracking on kana.
   Use :lang(ja) for generated answers even on an EN/VI/ZH interface. */
html[lang="ja-JP"] {
  --tarot-font-interface: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --tarot-font-editorial: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --tarot-font-voice: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --tarot-font-input: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --tarot-font-body: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
html[lang="ja-JP"] .tarot-kicker,
html[lang="ja-JP"] .tarot-reading-head h2,
html[lang="ja-JP"] .tarot-table-status h2,
html[lang="ja-JP"] .tarot-interpretation h3,
html[lang="ja-JP"] .tarot-reading-section h4 {
  font-family: var(--tarot-font-editorial);
}
html[lang="ja-JP"] .tarot-page .brand-mini,
html[lang="ja-JP"] .tarot-home-link,
html[lang="ja-JP"] .tarot-kicker,
html[lang="ja-JP"] .tarot-reading-head h2,
html[lang="ja-JP"] .tarot-mode strong,
html[lang="ja-JP"] .tarot-mode-count,
html[lang="ja-JP"] .tarot-question label,
html[lang="ja-JP"] .tarot-button,
html[lang="ja-JP"] .tarot-table-status h2,
html[lang="ja-JP"] .tarot-drawn-card p,
html[lang="ja-JP"] .tarot-card-name,
html[lang="ja-JP"] .tarot-reading-section h4,
html[lang="ja-JP"] .tarot-question-next p,
html[lang="ja-JP"] .tarot-deck-label {
  text-transform: none;
  letter-spacing: normal;
}
html[lang="ja-JP"] .tarot-oracle-voice-text,
html[lang="ja-JP"] .tarot-question textarea,
html[lang="ja-JP"] .tarot-question textarea::placeholder { font-style: normal; }
html[lang="ja-JP"] .tarot-oracle-voice-text { line-height: 1.5; }
html[lang="ja-JP"] .tarot-portal-copy>p:not(.tarot-kicker),
html[lang="ja-JP"] .tarot-reading-summary,
html[lang="ja-JP"] .tarot-reading-section p,
html[lang="ja-JP"] .tarot-card-meaning p,
html[lang="ja-JP"] .tarot-closing { line-height: 1.75; }
html[lang="ja-JP"] .tarot-mode strong { font-size: clamp(12px, .93vw, 15px); }
html[lang="ja-JP"] .tarot-mode-count { font-size: clamp(12px, .85vw, 14px); }
html[lang="ja-JP"] .tarot-kicker,
html[lang="ja-JP"] .tarot-question label,
html[lang="ja-JP"] .tarot-deck-label { letter-spacing: .03em; }
#tarot-interpretation-title:lang(ja), #tarot-verdict:lang(ja),
#tarot-card-meanings:lang(ja) .tarot-card-meaning strong {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
}
#tarot-reading-summary:lang(ja), #tarot-synthesis:lang(ja),
#tarot-guidance:lang(ja), #tarot-closing:lang(ja),
#tarot-card-meanings:lang(ja) .tarot-card-meaning p {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-style: normal;
  line-height: 1.75;
}
@media (max-width: 1024px) and (min-width: 641px) {
  html[lang="ja-JP"] .tarot-mode strong { font-size: 12px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  html[lang="ja-JP"] .tarot-mode strong { font-size: 12px; }
  html[lang="ja-JP"] .tarot-mode-count { font-size: 12px; }
  html[lang="ja-JP"] .tarot-reading-head h2 { font-size: 18px; }
  html[lang="ja-JP"] .tarot-oracle-voice-text { font-size: 12px; }
  html[lang="ja-JP"] .tarot-reading-note { font-size: 12px; }
  html[lang="ja-JP"] .tarot-lang-switch { font-size: 10px; gap: 2px; }
  html[lang="ja-JP"] .tarot-lang-switch a { padding: 2px; }
}


/* v16.88 — Russian interface (ru-RU), scoped away from EN/VI/ZH/JA.
   Oranienbaum: Cyrillic headings and UI. Cormorant: reading and italic Oracle.
   All 400, no artificial uppercase; 5-language nav may wrap on narrow devices. */
html[lang="ru-RU"] {
  --tarot-font-interface: 'Oranienbaum', Georgia, serif;
  --tarot-font-editorial: 'Oranienbaum', Georgia, serif;
  --tarot-font-voice: 'Cormorant Garamond', Georgia, serif;
  --tarot-font-input: 'Cormorant Garamond', Georgia, serif;
  --tarot-font-body: 'Cormorant Garamond', Georgia, serif;
}
html[lang="ru-RU"] .tarot-page .brand-mini,
html[lang="ru-RU"] .tarot-home-link,
html[lang="ru-RU"] .tarot-kicker,
html[lang="ru-RU"] .tarot-reading-head h2,
html[lang="ru-RU"] .tarot-mode strong,
html[lang="ru-RU"] .tarot-mode-count,
html[lang="ru-RU"] .tarot-question label,
html[lang="ru-RU"] .tarot-button,
html[lang="ru-RU"] .tarot-table-status h2,
html[lang="ru-RU"] .tarot-drawn-card p,
html[lang="ru-RU"] .tarot-card-name,
html[lang="ru-RU"] .tarot-reading-section h4,
html[lang="ru-RU"] .tarot-question-next p,
html[lang="ru-RU"] .tarot-deck-label { text-transform: none; letter-spacing: normal; }
html[lang="ru-RU"] .tarot-oracle-voice-text,
html[lang="ru-RU"] .tarot-question textarea,
html[lang="ru-RU"] .tarot-question textarea::placeholder { font-style: italic; }
html[lang="ru-RU"] .tarot-oracle-voice-text { line-height: 1.45; }
html[lang="ru-RU"] .tarot-portal-copy>p:not(.tarot-kicker),
html[lang="ru-RU"] .tarot-reading-summary,
html[lang="ru-RU"] .tarot-reading-section p,
html[lang="ru-RU"] .tarot-card-meaning p,
html[lang="ru-RU"] .tarot-closing { line-height: 1.65; }
html[lang="ru-RU"] .tarot-mode strong { font-size: clamp(12px, .94vw, 15px); }
html[lang="ru-RU"] .tarot-mode-count { font-size: clamp(12px, .85vw, 14px); }
html[lang="ru-RU"] .tarot-reading-head h2,
html[lang="ru-RU"] .tarot-interpretation h3,
html[lang="ru-RU"] .tarot-reading-section h4 { font-family: var(--tarot-font-editorial); }
#tarot-interpretation-title:lang(ru), #tarot-verdict:lang(ru),
#tarot-card-meanings:lang(ru) .tarot-card-meaning strong {
  font-family: 'Oranienbaum', Georgia, serif;
  font-style: normal; text-transform: none; letter-spacing: normal;
}
#tarot-reading-summary:lang(ru), #tarot-synthesis:lang(ru),
#tarot-guidance:lang(ru), #tarot-closing:lang(ru),
#tarot-card-meanings:lang(ru) .tarot-card-meaning p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal; line-height: 1.65;
}
@media (max-width: 1024px) and (min-width: 641px) {
  html[lang="ru-RU"] .tarot-mode strong { font-size: 12px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  html[lang="ru-RU"] .tarot-mode strong { font-size: 12px; }
  html[lang="ru-RU"] .tarot-mode-count { font-size: 12px; }
  html[lang="ru-RU"] .tarot-reading-head h2 { font-size: 18px; }
  html[lang="ru-RU"] .tarot-oracle-voice-text { font-size: 12px; }
  html[lang="ru-RU"] .tarot-reading-note { font-size: 12px; }
  html[lang="ru-RU"] .tarot-lang-switch { font-size: 10px; gap: 2px; }
  html[lang="ru-RU"] .tarot-lang-switch a { padding: 2px; }
}
/* Five locale links: allow graceful wrap instead of horizontal overflow.
   Applied equally to all locales as a shared header layout safety rule. */
@media (max-width: 640px) {
  .tarot-header-actions { min-width: 0; }
  .tarot-lang-switch { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
  .tarot-lang-switch a { white-space: nowrap; }
}


/* ==========================================================================
   v16.89 — ONE localized reading-text enlargement action in header.
   The reading uses independent font-size variables; artwork, card faces,
   buttons and language switch retain their approved sizes. Scale never
   changes page zoom or applies transform: scale to text containers.
   ========================================================================== */
.tarot-header-actions { min-width: 0; }
.tarot-text-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-shadow: 0 2px 16px #000;
  font: 400 .78rem/1.25 var(--tarot-font-interface);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.tarot-text-size-icon {
  font: 400 15px/1 Georgia, serif;
  color: inherit;
  white-space: nowrap;
}
.tarot-text-size-icon sup { font-size: 10px; vertical-align: super; }
.tarot-text-size:hover { color: #fff0a8; background: transparent; }
.tarot-text-size:focus-visible {
  color: #fff0a8;
  background: transparent;
  outline: 2px solid #fff0b6;
  outline-offset: 3px;
}
html[lang="vi"] .tarot-text-size,
html[lang="zh-CN"] .tarot-text-size,
html[lang="ja-JP"] .tarot-text-size,
html[lang="ru-RU"] .tarot-text-size { text-transform: none; letter-spacing: normal; }
/* At narrow widths the translated action remains next to HOME, while
   the full five-language switch is kept visible in a second aligned row. */
@media (max-width: 700px) {
  .tarot-header { align-items: flex-start; padding-top: 12px; }
  .tarot-header-actions {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 7px;
    row-gap: 2px;
    justify-items: end;
    justify-content: end;
    max-width: calc(100% - 49px);
  }
  .tarot-home-link { align-self: center; }
  .tarot-text-size { max-width: 100%; min-height: 34px; font-size: 12px; padding: 4px 2px; }
  .tarot-text-size-icon { font-size: 15px; }
  .tarot-lang-switch { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 370px) {
  .tarot-text-size { gap: 3px; font-size: 12px; padding-inline: 2px; }
  .tarot-text-size-icon { font-size: 13px; }
  .tarot-header-actions { column-gap: 5px; }
}
/* Reader-only typography. The default scale (1) reproduces prior font sizes. */
:root { --tarot-reader-scale: 1; }
.tarot-page {
  --tarot-reading-base: 16px;
  --tarot-voice-base: clamp(16px, 1.2vw, 19px);
  --tarot-placeholder-base: 14px;
}
@media (min-width: 1025px) {
  html[lang="en"] .tarot-page { --tarot-reading-base: 18px; --tarot-placeholder-base: 16px; }
}
html[lang="vi"] .tarot-page { --tarot-voice-base: calc(clamp(16px, 1.2vw, 19px) - 2px); }
@media (max-width: 640px) and (orientation: portrait) {
  .tarot-page { --tarot-voice-base: clamp(12px, 2.6vw, 15px); }
  html[lang="vi"] .tarot-page { --tarot-voice-base: calc(clamp(12px, 2.6vw, 15px) - 2px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .tarot-page { --tarot-voice-base: clamp(12px, 1.5vw, 16px); }
  html[lang="vi"] .tarot-page { --tarot-voice-base: calc(clamp(12px, 1.5vw, 16px) - 2px); }
}
html .tarot-page .tarot-reading-summary,
html .tarot-page .tarot-reading-section p,
html .tarot-page .tarot-card-meaning p,
html .tarot-page .tarot-closing { font-size: calc(var(--tarot-reading-base) * var(--tarot-reader-scale)); }
html .tarot-page .tarot-interpretation h3 { font-size: calc(21.6px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-interpretation .tarot-kicker,
html .tarot-page .tarot-reading-section h4,
html .tarot-page .tarot-card-meaning strong { font-size: calc(13.12px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-verdict { font-size: calc(12.48px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-interpretation-state { font-size: calc(19.2px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-question-next p { font-size: calc(11.84px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-question textarea { font-size: calc(18px * var(--tarot-reader-scale)); }
html .tarot-page .tarot-question textarea::placeholder { font-size: calc(var(--tarot-placeholder-base) * var(--tarot-reader-scale)); }
html .tarot-page .tarot-oracle-voice-text { font-size: calc(var(--tarot-voice-base) * var(--tarot-reader-scale)); }
html .tarot-page .tarot-portal-copy>p:not(.tarot-kicker) {
  font-size: calc(clamp(1.15rem, 2vw, 1.45rem) * var(--tarot-reader-scale));
}
/* Reflow safely at high text size and in the full reading modal. */
.tarot-interpretation-content, .tarot-card-meanings, .tarot-reading-section {
  min-width: 0;
  overflow-wrap: break-word;
}
.tarot-interpretation { overflow-x: hidden; }

/* Tarot illustrated-card preview. Isolated from the existing reading/modal layers. */
body.tarot-card-preview-open { overflow: hidden; }
.tarot-card-preview {
  position: fixed; inset: 0; z-index: 40000; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(5, 3, 14, .91); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.tarot-card-preview-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(92vw, 730px); max-height: 100%; color: #f4e8d4;
}
.tarot-card-preview-image {
  display: block; flex: 0 1 auto; width: auto; height: auto;
  max-width: 100%; max-height: min(76svh, 1100px); aspect-ratio: 2 / 3;
  object-fit: contain; border: 1px solid rgba(232,200,122,.85); border-radius: 9px;
  box-shadow: 0 16px 55px rgba(0,0,0,.65);
}
.tarot-card-preview.is-reversed .tarot-card-preview-image { transform: rotate(180deg); }
.tarot-card-preview-caption {
  margin: 0; font: 400 clamp(.9rem, 2.6vw, 1.16rem) Cinzel, Georgia, serif;
  line-height: 1.3; text-align: center; text-shadow: 0 2px 14px #000;
}
.tarot-card-preview-close {
  position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border: 1px solid rgba(238,208,142,.7);
  border-radius: 50%; background: rgba(17,10,35,.93); color: #fff0d0;
  font: 32px/1 Georgia, serif; cursor: pointer; transform: translate(36%, -32%);
}
.tarot-card-preview-close:focus-visible { outline: 2px solid #fff0d0; outline-offset: 3px; }
@media (max-width: 600px) {
  .tarot-card-preview-panel { width: min(86vw, 430px); }
  .tarot-card-preview-image { max-height: 72svh; }
  .tarot-card-preview-close { transform: translate(20%, -24%); }
}

/* v16.92: non-intrusive entrance to the separate Learning Tarot library. */
.tarot-footer .tarot-learning-link{color:#f0d7a0;text-decoration:underline;text-underline-offset:3px}.tarot-footer .tarot-learning-link:focus-visible{outline:2px solid #f0d7a0;outline-offset:3px}