:root {
  --bg: #04050a;
  --ink: #f4ead6;
  --ink-soft: rgba(244, 234, 214, 0.66);
  --ink-faint: rgba(244, 234, 214, 0.3);
  --gold: #e8c68a;
  --line: rgba(232, 198, 138, 0.16);
  --line-focus: rgba(240, 210, 150, 0.6);
  --cinnabar: #b0352a;
  /* per-script faces are set below; --local leads, the rest are fallbacks */
  --local: "Cormorant Garamond";
  --brush: var(--local);
  --serif: var(--local), "Cormorant Garamond", "Noto Serif", "Songti SC", "Hiragino Mincho ProN", Georgia, serif;
  --inscription: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --kb: 0px;
}
html[lang="zh-Hans"] { --local: "Noto Serif SC"; --brush: "Ma Shan Zheng"; }
html[lang="zh-Hant"] { --local: "Noto Serif TC"; --brush: "LXGW WenKai TC"; }
html[lang="ja"] { --local: "Shippori Mincho"; --brush: "Yuji Syuku"; }
html[lang="ko"] { --local: "Nanum Myeongjo"; }
html[lang="ar"], html[lang="fa"] { --local: "Amiri"; }
html[lang="he"] { --local: "Frank Ruhl Libre"; }
html[lang="hi"], html[lang="ne"] { --local: "Tiro Devanagari Hindi"; }
html[lang="th"] { --local: "Noto Serif Thai"; }
html[lang="si"] { --local: "Noto Serif Sinhala"; }
html[lang="my"] { --local: "Noto Serif Myanmar"; }
html[lang="km"] { --local: "Noto Serif Khmer"; }
html[lang="lo"] { --local: "Noto Serif Lao"; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--serif);
  background:
    radial-gradient(ellipse 50% 42% at 50% 38%, rgba(214, 170, 100, 0.06), transparent 70%),
    radial-gradient(ellipse 110% 80% at 50% 40%, rgba(18, 20, 44, 0.7), transparent 75%),
    var(--bg);
}

html[lang^="zh"] body, html[lang="ja"] body, html[lang="ko"] body { letter-spacing: 0.05em; }

#enso, #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#stage { touch-action: none; pointer-events: auto; }
/* slow, breathing nebula clouds */
.nebula {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 30%, rgba(72, 64, 160, 0.16), transparent),
    radial-gradient(closest-side at 80% 24%, rgba(40, 80, 150, 0.12), transparent),
    radial-gradient(closest-side at 70% 78%, rgba(120, 70, 140, 0.1), transparent),
    radial-gradient(closest-side at 30% 82%, rgba(170, 120, 60, 0.07), transparent);
  filter: blur(40px);
  opacity: 0;
  animation: drift 60s ease-in-out infinite alternate;
  transition: opacity 5s ease;
}
.awake .nebula { opacity: 1; }
@keyframes drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }
#enso { mix-blend-mode: screen; }

/* ─────────── mark: a cinnabar seal */
#mark {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 20px);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
#mark .seal {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--cinnabar);
  color: #f6ecdc;
  filter: url(#deckle);
  opacity: 0;
  transform: scale(1.6) rotate(-6deg);
  box-shadow: 0 0 18px rgba(176, 53, 42, 0.35);
}
#mark .glyph { font: 400 16px/1 var(--brush); display: none; }
html[lang^="zh"] #mark .glyph, html[lang="ja"] #mark .glyph { display: block; }
#mark .slipmark { width: 22px; height: 22px; fill: #f6ecdc; }
#mark .slipmark circle { fill: var(--cinnabar); }
html[lang^="zh"] #mark .slipmark, html[lang="ja"] #mark .slipmark { display: none; }
.awake #mark .seal { animation: stamp 0.7s 2.4s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.6) rotate(-6deg); }
  60% { opacity: 0.95; transform: scale(0.94) rotate(-2deg); }
  100% { opacity: 0.9; transform: scale(1) rotate(-2deg); }
}
#mark .word {
  font: 400 0.68rem/1 var(--inscription);
  letter-spacing: 0.55em;
  padding-left: 0.1em;
  color: rgba(244, 234, 214, 0.5);
  opacity: 0;
  transition: opacity 2.4s 2.8s ease;
}
.awake #mark .word { opacity: 1; }

/* ─────────── conversation */
#ui {
  position: fixed;
  left: 0; right: 0; top: 0;
  bottom: var(--kb);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px calc(env(safe-area-inset-bottom) + 18px);
  pointer-events: none;
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.drawing #ui { opacity: 0.1; filter: blur(2px); }
.drawing #ui * { pointer-events: none !important; }

#messages {
  width: min(34rem, 100%);
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.1rem;
  overflow: hidden;
  padding: 2.5rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
          mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
}

.msg {
  position: relative;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-shadow: 0 0 22px #04050a, 0 0 8px #04050a;
  pointer-events: auto;
  transition: opacity 0.9s ease, max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), margin 0.8s ease, padding 0.8s ease;
  max-height: 60vh;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

.msg.user { color: var(--ink-soft); font-size: 1.05rem; font-style: italic; line-height: 1.6; }
html:not([lang^="en"]):not([lang="fr"]):not([lang="de"]):not([lang="es"]):not([lang="pt"]):not([lang="it"]):not([lang="nl"]) .msg.user { font-style: normal; }
html[lang^="zh"] .msg.user, html[lang="ja"] .msg.user, html[lang="ko"] .msg.user { font-size: 0.96rem; }

.msg.buddha {
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.7;
  padding-bottom: 12px;
  text-shadow: 0 0 22px #04050a, 0 0 8px #04050a, 0 0 1px rgba(255, 230, 180, 0.4);
}
html[lang^="zh"] .msg.buddha, html[lang="ja"] .msg.buddha, html[lang="ko"] .msg.buddha {
  font-size: 1.1rem; font-weight: 400; line-height: 2; letter-spacing: 0.08em;
}
html[lang="ar"] .msg.buddha, html[lang="fa"] .msg.buddha, html[lang="th"] .msg.buddha, html[lang="hi"] .msg.buddha, html[lang="ne"] .msg.buddha { font-weight: 400; line-height: 1.95; }

.msg .chunk { animation: ink 0.8s ease both; }
@keyframes ink { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }

.msg .life {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.6rem;
  height: 1px;
  transform: translateX(-50%) scaleX(var(--life, 1));
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.msg.counting .life { opacity: 0.55; }

.msg.dissolving {
  -webkit-mask-image: linear-gradient(var(--dir, 90deg), transparent calc(var(--p, 0) * 135% - 28%), #000 calc(var(--p, 0) * 135% - 3%));
          mask-image: linear-gradient(var(--dir, 90deg), transparent calc(var(--p, 0) * 135% - 28%), #000 calc(var(--p, 0) * 135% - 3%));
  animation: none;
}
.msg.gone { max-height: 0 !important; margin-top: -1.1rem; padding: 0; opacity: 0; }

.thinking { display: inline-flex; gap: 7px; height: 1.6rem; align-items: center; }
.thinking i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); animation: breathe 1.8s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: 0.3s; }
.thinking i:nth-child(3) { animation-delay: 0.6s; }
@keyframes breathe { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.3); } }

/* ─────────── composer */
#composer {
  width: min(32rem, 100%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 2.2s 3s ease, transform 2.2s 3s ease;
}
.awake #composer { opacity: 1; transform: none; pointer-events: auto; }
.skipped #composer, .skipped #mark .word { transition-delay: 0.5s; transition-duration: 1.2s; }
.skipped #mark .seal { animation-delay: 0.3s !important; }
.skipped .nebula { transition-duration: 2s; }

.field { position: relative; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.field::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-focus), transparent);
  transition: left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), right 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.field:focus-within::after { left: 0; right: 0; }
.field .shimmer {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 22%;
  height: 3px;
  background: radial-gradient(closest-side, rgba(255, 226, 170, 0.95), rgba(255, 210, 140, 0.25) 60%, transparent);
  filter: blur(0.6px);
  animation: travel 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes travel {
  0% { transform: translateX(-30%); opacity: 0; }
  15% { opacity: 1; }
  50% { opacity: 1; }
  65%, 100% { transform: translateX(480%); opacity: 0; }
}

#input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1.14rem/1.6 var(--serif);
  text-align: center;
  padding: 10px 40px;
  max-height: 7.2rem;
  caret-color: var(--gold);
  letter-spacing: inherit;
  position: relative;
  z-index: 1;
}
#input::placeholder { color: transparent; }
.field.empty #input { caret-color: transparent; }

.ph {
  position: absolute;
  inset: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-faint);
  font: italic 400 1.14rem/1.6 var(--serif);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
}
html:not([lang^="en"]):not([lang="fr"]):not([lang="de"]):not([lang="es"]):not([lang="pt"]):not([lang="it"]):not([lang="nl"]) .ph { font-style: normal; }
html[lang^="zh"] .ph, html[lang="ja"] .ph, html[lang="ko"] .ph { font-size: 1.02rem; letter-spacing: 0.12em; }
.field.empty .ph { opacity: 1; }
.caret {
  flex: none;
  width: 1.5px;
  height: 1.15em;
  border-radius: 1px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240, 200, 130, 0.9), 0 0 18px rgba(240, 200, 130, 0.45);
  animation: blink 1.25s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 0.1; } 45%, 60% { opacity: 1; } }
.field:focus-within .caret { animation-duration: 0.9s; }

#send {
  position: absolute;
  bottom: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html[dir="rtl"] #send { right: auto; left: 2px; }
#send {
  right: 2px;
  width: 30px;
  height: 30px;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.field.ready #send { opacity: 1; transform: none; pointer-events: auto; }
#send:hover { border-color: var(--line-focus); background: rgba(240, 210, 150, 0.06); box-shadow: 0 0 16px rgba(240, 200, 130, 0.25); }


/* the slip, on its own: a quiet invitation above the words */
#draw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px 18px 6px 8px;
  border: 1px solid rgba(232, 198, 138, 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 240, 210, 0.05), rgba(255, 240, 210, 0.015));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--ink-soft);
  font: 400 0.92rem/1 var(--serif);
  letter-spacing: 0.2em;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: opacity 2.2s 3.4s ease, transform 2.2s 3.4s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.6s ease, background 0.6s ease;
}
.awake #draw { opacity: 1; transform: none; pointer-events: auto; }
.skipped #draw { transition-delay: 0.7s, 0.7s, 0s, 0s, 0s, 0s; transition-duration: 1.2s, 1.2s, 0.5s, 0.5s, 0.6s, 0.6s; }
#draw:hover, #draw:focus-visible { border-color: rgba(232, 198, 138, 0.34); color: var(--ink); box-shadow: 0 0 24px rgba(240, 200, 130, 0.14); outline: none; }
#draw.holding {
  border-color: rgba(240, 210, 150, calc(0.3 + var(--hold, 0) * 0.5));
  color: var(--ink);
  box-shadow: 0 0 calc(18px + var(--hold, 0) * 30px) rgba(240, 200, 130, calc(0.12 + var(--hold, 0) * 0.3));
  background: linear-gradient(180deg, rgba(255, 240, 210, calc(0.05 + var(--hold, 0) * 0.08)), rgba(255, 240, 210, 0.02));
}
#draw .icon { display: grid; place-items: center; width: 40px; height: 40px; }
#draw .track { fill: none; stroke: rgba(232, 198, 138, 0.12); stroke-width: 1; }
#draw .ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--hold, 0));
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
  opacity: calc(var(--hold, 0) * 1.4);
  filter: drop-shadow(0 0 3px rgba(240, 200, 130, 0.9));
}
#draw .slip { fill: var(--cinnabar); filter: drop-shadow(0 0 4px rgba(210, 70, 50, 0.55)); transform-origin: 22px 34px; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
#draw .hole { fill: var(--bg); }
#draw:hover .slip { transform: rotate(-7deg); }
#draw.holding .slip { animation: shake 0.24s ease-in-out infinite alternate; }
@keyframes shake { from { transform: rotate(-5deg) translateY(-1px); } to { transform: rotate(5deg); } }
#draw .label { padding-top: 1px; }
html:not([lang^="zh"]):not([lang="ja"]):not([lang="ko"]) #draw .label { letter-spacing: 0.08em; font-size: 0.98rem; }
html[lang="en"] #draw .label, html[lang="fr"] #draw .label, html[lang="es"] #draw .label, html[lang="it"] #draw .label, html[lang="pt"] #draw .label, html[lang="de"] #draw .label { font-style: italic; }

#hint {
  margin-top: 13px;
  text-align: center;
  font: 400 0.62rem/1.6 var(--inscription);
  letter-spacing: 0.26em;
  color: var(--ink-faint);
  user-select: none;
  text-transform: uppercase;
}
html:not([lang^="en"]):not([lang="fr"]):not([lang="de"]):not([lang="es"]):not([lang="pt"]):not([lang="it"]):not([lang="nl"]):not([lang="sv"]):not([lang="nb"]):not([lang="da"]):not([lang="id"]):not([lang="ms"]) #hint {
  font-family: var(--serif); font-size: 0.72rem; text-transform: none; letter-spacing: 0.2em;
}
html[lang^="zh"] #hint, html[lang="ja"] #hint { letter-spacing: 0.3em; }

#toast {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 100px);
  font-size: 0.86rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 0 12px #04050a;
}
#toast.on { opacity: 1; transform: none; }

/* ─────────── the slip: a leaf of lit paper in the night */
#lot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px);
  z-index: 5;
}
#lot[hidden] { display: none; }
#lot .card {
  position: relative;
  width: min(20rem, 86vw);
  max-height: 80vh;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  outline: none;
  color: var(--ink);
  border-radius: 3px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 228, 176, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(255, 244, 222, 0.085), rgba(255, 244, 222, 0.025));
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
          backdrop-filter: blur(26px) saturate(1.1);
  box-shadow:
    inset 0 0 0 1px rgba(240, 210, 150, 0.24),
    inset 0 1px 0 rgba(255, 240, 210, 0.22),
    inset 0 0 48px rgba(240, 200, 130, 0.06),
    0 0 90px rgba(240, 200, 130, 0.12);
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  filter: blur(10px);
  overflow: hidden;
}
html[lang^="zh"] #lot .card, html[lang="ja"] #lot .card { width: min(15rem, 80vw); }
/* a single glint of light passes across as the slip arrives */
#lot .card::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 196, 0.16) 50%, transparent 58%);
  transform: translateX(-60%);
  pointer-events: none;
}
#lot.in .card::after { animation: glint 2.6s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes glint { to { transform: translateX(60%); } }
#lot .card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(240, 210, 150, 0.13); border-radius: 2px; pointer-events: none; }
#lot.in .card { animation: rise-slip 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes rise-slip {
  0% { opacity: 0; transform: translateY(46px) scale(0.96); filter: blur(12px); }
  55% { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; transform: none; filter: none; }
}
#lot.gone .card { visibility: hidden; animation: none; }
#lot.dissolving .card {
  animation: none; opacity: 1; filter: none; transform: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--p, 0) * 150% - 40%), #000 calc(var(--p, 0) * 150% - 4%));
          mask-image: linear-gradient(to bottom, transparent calc(var(--p, 0) * 150% - 40%), #000 calc(var(--p, 0) * 150% - 4%));
}
#lot.dissolving .return { opacity: 0; transition-duration: 0.4s; }

#lot .no {
  font: 400 0.95rem/1 var(--brush);
  color: #fbeee0;
  background: rgba(176, 53, 42, 0.72);
  box-shadow: 0 0 22px rgba(200, 60, 45, 0.35);
  padding: 7px 9px 6px;
  border-radius: 2px;
  filter: url(#deckle);
  letter-spacing: 0.1em;
  opacity: 0;
  transform: scale(1.5) rotate(-4deg);
}
#lot.in .no { animation: stamp 0.6s 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
html:not([lang^="zh"]):not([lang="ja"]) #lot .no { font: 500 0.72rem/1 var(--serif); letter-spacing: 0.16em; padding: 8px 10px; }
html[lang="en"] #lot .no, html[lang="fr"] #lot .no, html[lang="de"] #lot .no, html[lang="es"] #lot .no, html[lang="pt"] #lot .no, html[lang="it"] #lot .no { font-family: var(--inscription); }

#lot .title { font: 400 1.7rem/1.25 var(--brush); letter-spacing: 0.24em; text-align: center; color: #f6e2b8; text-shadow: 0 0 18px rgba(240, 200, 130, 0.45); }
html:not([lang^="zh"]):not([lang="ja"]) #lot .title { font: 500 1.5rem/1.3 var(--serif); letter-spacing: 0.02em; }
html[lang="en"] #lot .title, html[lang="fr"] #lot .title, html[lang="de"] #lot .title, html[lang="es"] #lot .title, html[lang="pt"] #lot .title, html[lang="it"] #lot .title, html[lang="nl"] #lot .title { font-style: italic; }

#lot .verse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 500 1.18rem/1.55 var(--serif);
  text-align: center;
  color: var(--ink);
  text-shadow: 0 0 14px rgba(240, 200, 130, 0.3);
}
html[lang="en"] #lot .verse, html[lang="fr"] #lot .verse, html[lang="de"] #lot .verse, html[lang="es"] #lot .verse, html[lang="pt"] #lot .verse, html[lang="it"] #lot .verse, html[lang="nl"] #lot .verse { font-style: italic; }
/* Chinese and Japanese: vertical, read right to left, like a real slip */
html[lang^="zh"] #lot .verse, html[lang="ja"] #lot .verse {
  writing-mode: vertical-rl;
  height: 12.5em;
  gap: 0 1.1em;
  font: 400 1.5rem/1.2 var(--brush);
  letter-spacing: 0.2em;
}
#lot .verse span {
  display: block;
  -webkit-mask-image: linear-gradient(var(--flow, to right), #000 calc(var(--w, 0) * 120% - 20%), transparent calc(var(--w, 0) * 120%));
          mask-image: linear-gradient(var(--flow, to right), #000 calc(var(--w, 0) * 120% - 20%), transparent calc(var(--w, 0) * 120%));
}
html[lang^="zh"] #lot .verse span, html[lang="ja"] #lot .verse span { --flow: to bottom; }

#lot .meaning {
  max-width: 17rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#lot .meaning.on { opacity: 1; }
html[lang^="zh"] #lot .meaning, html[lang="ja"] #lot .meaning, html[lang="ko"] #lot .meaning { font-size: 0.88rem; letter-spacing: 0.06em; }

#lot .loading { display: flex; gap: 9px; padding: 3.5rem 0; }
#lot .loading i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); animation: breathe 1.8s ease-in-out infinite; }
#lot .loading i:nth-child(2) { animation-delay: 0.3s; }
#lot .loading i:nth-child(3) { animation-delay: 0.6s; }

#lot .return { font-size: 0.78rem; letter-spacing: 0.2em; color: var(--ink-faint); opacity: 0; transition: opacity 1.2s ease; }
#lot .return.on { opacity: 1; }
#lot.gone .return { opacity: 0; transition-duration: 0.3s; }

@media (max-width: 520px) {
  .msg.buddha { font-size: 1.18rem; }
  html[lang^="zh"] .msg.buddha, html[lang="ja"] .msg.buddha, html[lang="ko"] .msg.buddha { font-size: 1.02rem; }
  #messages { max-height: 46vh; }
  #hint { font-size: 0.54rem; letter-spacing: 0.16em; }
  html[lang^="zh"] #lot .verse, html[lang="ja"] #lot .verse { font-size: 1.32rem; }
}

@media (prefers-reduced-motion: reduce) {
  .msg, .msg .chunk, .caret, .field .shimmer, .nebula { animation: none; }
}