/* ============================================================
   TÉ Y TAO · TEA & THE TAO — the Red Reading Room
   Royal red walls, gold, parchment scrolls, tea & steam.
   ============================================================ */

:root {
  --red-wall-1: #4a0d12;
  --red-wall-2: #2a0609;
  --red-deep:   #1a0304;
  --red-lacquer:#8e1c22;
  --crimson:    #c0392b;
  --seal-red:   #b3271c;
  --gold:       #d4af37;
  --gold-bright:#f5d576;
  --gold-deep:  #8a6a14;
  --gold-soft:  rgba(212, 175, 55, .45);
  --parch-1:    #f4e5c3;
  --parch-2:    #ecd8ac;
  --parch-3:    #e3cb98;
  --ink:        #3b2a16;
  --ink-soft:   #6b5335;
  --cream:      #fff6df;

  --font-body: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-display: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  --font-zh: "Noto Serif SC", "Kaiti SC", "Kaiti TC", "STKaiti", "Songti SC", "STSong", serif;
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  background-color: var(--red-deep);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(190, 60, 40, .35), transparent 60%),
    radial-gradient(ellipse 90% 55% at 50% 115%, rgba(120, 60, 10, .25), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.055' stroke-width='1.4'%3E%3Cpath d='M74 62a12 12 0 1 0-12-12 12 12 0 0 0 12 12zm0-12a12 12 0 1 1 12 12' /%3E%3Cpath d='M74 86a12 12 0 1 1 12 12 12 12 0 0 1-12-12zm0 12a12 12 0 1 0-12-12' /%3E%3Ccircle cx='74' cy='74' r='5'/%3E%3C/g%3E%3Cg fill='%23d4af37' fill-opacity='0.05'%3E%3Ccircle cx='4' cy='4' r='1.6'/%3E%3Ccircle cx='144' cy='4' r='1.6'/%3E%3Ccircle cx='4' cy='144' r='1.6'/%3E%3Ccircle cx='144' cy='144' r='1.6'/%3E%3Ccircle cx='74' cy='4' r='1.1'/%3E%3Ccircle cx='74' cy='144' r='1.1'/%3E%3Ccircle cx='4' cy='74' r='1.1'/%3E%3Ccircle cx='144' cy='74' r='1.1'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(175deg, var(--red-wall-1), var(--red-wall-2) 55%, var(--red-deep));
  background-attachment: fixed;
}

::selection { background: var(--gold); color: var(--red-deep); }

button { font: inherit; cursor: pointer; }
a { color: var(--gold-bright); text-decoration: none; }

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 4px; }

/* ---------- the room: gold frame around the viewport ---------- */
.room-frame { position: fixed; inset: 10px; pointer-events: none; z-index: 60; }
.room-frame::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(212, 175, 55, .38);
}
.room-frame i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(212, 175, 55, .55); }
.room-frame i:nth-child(1) { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.room-frame i:nth-child(2) { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.room-frame i:nth-child(3) { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.room-frame i:nth-child(4) { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ---------- header ---------- */
.site-head {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem) .6rem;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 1px solid rgba(255, 220, 150, .55);
  border-radius: 7px;
  color: #ffe9c9; font-family: var(--font-zh); font-size: 13px; line-height: 1.05;
  letter-spacing: 1px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 6px rgba(60, 0, 0, .5);
  writing-mode: vertical-rl; padding: 4px;
}
.brand-text {
  font-family: var(--font-display); font-size: 1.06rem; letter-spacing: .12em;
  color: var(--gold-bright); text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.brand-text em { color: var(--gold); font-style: normal; }

.site-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.site-nav a, .site-nav button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .75rem;
  color: var(--cream); font-size: .95rem; letter-spacing: .04em;
  background: rgba(70, 8, 10, .55);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 999px;
  transition: all .25s ease;
}
.site-nav a:hover, .site-nav button:hover {
  background: rgba(140, 25, 25, .8); border-color: var(--gold);
  color: var(--gold-bright);
}
.site-nav .sub { display: block; font-size: .68em; opacity: .75; letter-spacing: .08em; }
.site-nav a, .site-nav button { text-align: left; line-height: 1.15; }

/* ---------- shared layout ---------- */
main { position: relative; z-index: 2; padding: 0 clamp(.8rem, 4vw, 2.5rem) 6rem; max-width: 1060px; margin: 0 auto; }

.view-title {
  font-family: var(--font-display); text-align: center;
  color: var(--gold-bright); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: .14em; text-transform: uppercase;
  margin: 1.6rem 0 .4rem; text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.view-sub { text-align: center; color: rgba(255, 240, 200, .8); font-style: italic; margin-bottom: 2rem; }

.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.9rem;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em;
  color: #40120a; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #a8821f);
  border: 1px solid #f8e6a8; border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 7px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.15rem; font-size: .98rem; letter-spacing: .05em;
  color: var(--gold-bright); background: rgba(70, 8, 10, .5);
  border: 1px solid rgba(212, 175, 55, .45); border-radius: 999px;
  transition: all .25s ease;
}
.btn-ghost:hover { background: rgba(140, 25, 25, .75); }
.btn-ghost[disabled] { opacity: .38; cursor: default; }

/* ============================================================
   COVER — lanterns, plaque, teacup
   ============================================================ */
.cover { position: relative; text-align: center; padding-top: 1.5rem; }

.lantern { position: absolute; top: 0; width: 74px; z-index: 1; transform-origin: top center; animation: sway 5.5s ease-in-out infinite; }
.lantern.l1 { left: max(2%, calc(50% - 430px)); animation-delay: .8s; }
.lantern.l2 { right: max(2%, calc(50% - 430px)); animation-duration: 6.4s; }
@keyframes sway { 0%,100% { transform: rotate(3.2deg); } 50% { transform: rotate(-3.2deg); } }

.plaque {
  position: relative; display: inline-block;
  margin: 2.6rem 0 1.6rem;
  padding: 2.3rem 3.2rem 2rem;
  background:
    linear-gradient(180deg, rgba(255,235,180,.14), transparent 30%),
    linear-gradient(165deg, #f2e2bd, #e7d0a0);
  border: 2px solid #b8860b;
  outline: 1px solid rgba(212,175,55,.5);
  outline-offset: 5px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 34px rgba(166, 118, 38, .25);
}
.plaque .zh-big {
  font-family: var(--font-zh);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  color: #7a1015; letter-spacing: .35em; margin-right: -.35em;
  display: block;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.plaque h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  letter-spacing: .1em; color: #6d4d0e; text-transform: none;
  margin-top: .55rem;
}
.plaque h1 .tea { color: #7a1015; }
.plaque .sub {
  font-style: italic; color: #77613c; font-size: clamp(.95rem, 2.2vw, 1.1rem);
  margin-top: .55rem; max-width: 34ch;
  margin-left: auto; margin-right: auto;
}

.cover-teacup { margin: 1.8rem auto .4rem; width: min(230px, 60vw); }
.cover-actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin: 1.4rem 0 1rem; }
.cover-progress { color: rgba(255, 238, 196, .85); font-style: italic; }
.cover-progress b { color: var(--gold-bright); font-style: normal; }

.cups-row { display: flex; gap: 5px; justify-content: center; margin-top: .4rem; flex-wrap: wrap; }
.cups-row i {
  width: 16px; height: 12px;
  border: 1px solid rgba(212,175,55,.55); border-radius: 2px 2px 5px 5px;
  background: rgba(0,0,0,.25); position: relative; overflow: hidden;
}
.cups-row i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, #f0c04a, #b07a2a); transition: height .5s ease;
}
.cups-row i.full::after { height: 72%; }

/* ============================================================
   CONTENTS — chapter cards
   ============================================================ */
.toc-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  margin-bottom: 2rem;
}
.toc-card {
  position: relative;
  display: flex; gap: .9rem; align-items: center;
  padding: 1rem 1.1rem;
  background: linear-gradient(155deg, var(--parch-1), var(--parch-2) 70%, var(--parch-3));
  border: 1px solid #c8a24e; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  color: var(--ink); text-align: left;
  transition: transform .22s ease, box-shadow .22s ease;
}
.toc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px var(--gold-soft); }
.toc-card .mini-seal {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 8px;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 1px solid rgba(255, 220, 150, .5);
  color: #ffe9c9; font-family: var(--font-zh); font-size: 26px;
  box-shadow: inset 0 0 8px rgba(50,0,0,.55);
}
.toc-card .t { display: block; font-weight: 700; font-size: 1.12rem; color: #5a3a10; }
.toc-card .t2 { display: block; font-style: italic; color: var(--ink-soft); font-size: .98rem; }
.toc-card .n { display: block; font-size: .78rem; letter-spacing: .12em; color: #96691b; margin-top: .15rem; text-transform: uppercase; }
.toc-card .done-seal {
  position: absolute; top: -10px; right: -8px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 1.5px solid rgba(255, 220, 150, .6);
  color: #ffe9c9; font-family: var(--font-zh); font-size: 20px;
  transform: rotate(-11deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 6px rgba(50,0,0,.5);
}

/* ---------- locked (still closed) chapters ---------- */
.toc-card.locked {
  background: linear-gradient(155deg, #d9caa6, #c9b78d);
  border-style: dashed; border-color: #a89166;
  cursor: pointer; user-select: none;
}
.toc-card.locked:hover { transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.toc-card.locked .t { color: #7d6c46; letter-spacing: .04em; }
.toc-card.locked .t2 { color: #8d7c56; }
.toc-card.locked .n { color: #97835a; }
.toc-card.locked .closed-seal {
  background: linear-gradient(160deg, #6f5e3c, #584a2d);
  border-color: rgba(255, 235, 190, .4);
  font-family: var(--font-display); font-size: 1.35rem;
  box-shadow: inset 0 0 8px rgba(30, 20, 0, .5);
}
.toc-card.locked.shake { animation: cardShake .45s ease; }
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}

/* ---------- the closed scroll (locked chapter screen) ---------- */
.closed-scroll .closed-inner { text-align: center; padding: clamp(2rem, 6vw, 3.4rem) 1rem 2.6rem; }
.closed-roll {
  width: 96px; height: 96px; margin: 0 auto 1.3rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-zh); font-size: 2.5rem; color: #f2e2bd;
  background: radial-gradient(circle at 35% 30%, #a3342c, #6d1015 72%);
  border: 3px solid #b8860b; border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 16px rgba(60,0,0,.5);
  transform: rotate(-7deg);
}
.closed-title {
  font-family: var(--font-display); color: #7a1015; letter-spacing: .08em;
  font-size: clamp(1.2rem, 3vw, 1.6rem); margin-bottom: 1.1rem;
}
.closed-msg { color: #5a3a10; line-height: 1.7; font-size: 1.15rem; margin-bottom: .9rem; }
.closed-msg-en { color: #77613c; font-style: italic; line-height: 1.7; margin-bottom: 1.7rem; }

/* ============================================================
   READER — the hanging scroll
   ============================================================ */
.reader-top {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin: .4rem 0 1.6rem;
}
.chapter-label { text-align: center; font-style: italic; color: rgba(255, 240, 200, .85); }
.chapter-label b { color: var(--gold-bright); font-style: normal; }

.scroll-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.hanger { display: block; margin-bottom: -2px; }
.rod {
  width: min(100%, 760px); height: 20px; border-radius: 10px; position: relative; z-index: 3;
  background: linear-gradient(180deg, #fbe89a 0%, #d4af37 30%, #8a6a14 78%, #6b500d);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
.rod::before, .rod::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d4af37 45%, #7a5a08 85%);
  box-shadow: 0 3px 7px rgba(0,0,0,.5);
}
.rod::before { left: -13px; } .rod::after { right: -13px; }
.rod-bottom { margin-top: -2px; }

.scroll {
  position: relative;
  width: min(100%, 748px);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.3rem, 4.5vw, 3.2rem) clamp(1.8rem, 4vw, 3rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #f6e8c8 0%, #efddb2 55%, #e8d2a2 100%);
  box-shadow:
    inset 0 0 60px rgba(166, 118, 38, .28),
    inset 0 0 6px rgba(120, 80, 20, .3),
    0 22px 60px rgba(0, 0, 0, .6);
  color: var(--ink);
  animation: scrollSway 5.5s ease-in-out 1;
  transform-origin: 50% -30px;
}
@keyframes scrollSway { 0%,100% { transform: rotate(.15deg); } 50% { transform: rotate(-.15deg); } }

/* watermark character */
.scroll::before {
  content: attr(data-zh);
  position: absolute; top: 46%; right: 4%;
  font-family: var(--font-zh); font-size: clamp(180px, 34vw, 330px); line-height: 1;
  color: rgba(158, 90, 44, .075);
  pointer-events: none; user-select: none;
}

/* vertical title strip, like a scroll's title slip */
.title-strip {
  position: absolute; top: 34px; right: 20px;
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem .5rem;
  background: linear-gradient(180deg, #faf0d6, #f1e3bc);
  border: 1px solid rgba(139, 101, 19, .3);
  box-shadow: 2px 3px 8px rgba(90, 60, 10, .25);
  font-family: var(--font-zh);
}
.title-strip .zh { font-size: 1.65rem; color: #7a1015; }
.title-strip .st { font-size: .8rem; letter-spacing: .2em; color: #77613c; }

.scroll-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; padding-right: 4.4rem; }
.ch-seal {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 9px;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 1.5px solid rgba(255, 220, 150, .55);
  color: #ffe9c9; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  box-shadow: 0 3px 9px rgba(0,0,0,.4), inset 0 0 8px rgba(50,0,0,.5);
}
.scroll-head h1 { font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.2; font-weight: 700; color: #4d3110; }
.scroll-head .es-t { color: #7a1015; }
.scroll-head .dot { color: #b8860b; margin: 0 .35rem; }
.scroll-head .en-t { font-style: italic; }

/* language toggle */
.lang-toggle {
  display: inline-flex; gap: 0; margin: 0 0 1.5rem;
  border: 1px solid #b8860b; border-radius: 999px; overflow: hidden;
  background: rgba(122, 16, 21, .08);
}
.lang-toggle button {
  padding: .42rem 1.05rem; border: none; background: transparent;
  color: #77613c; font-size: .92rem; letter-spacing: .06em;
}
.lang-toggle button + button { border-left: 1px solid #c9a24e; }
.lang-toggle button[aria-pressed="true"] {
  background: linear-gradient(170deg, #8e1c22, #6d1015);
  color: #ffe9c9;
}

/* bilingual columns */
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); }
.twin.single { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
.lang-tag {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .7rem;
}
.lang-tag .name {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .22em;
  color: #96691b; text-transform: uppercase;
}
.lang-tag .name::after {
  content: ""; display: block; height: 1px; margin-top: .35rem;
  background: linear-gradient(90deg, #c9a24e, transparent);
}
.lang-block p { margin-bottom: 1.05rem; font-size: 1.13rem; line-height: 1.72; }
.lang-block p:last-child { margin-bottom: 0; }
.lang-block.es p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 2.6em; float: left;
  line-height: .82; padding: .08em .12em 0 0; color: #7a1015;
}
.speak-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem;
  font-size: .8rem; color: #7a1015;
  background: rgba(122, 16, 21, .07);
  border: 1px solid rgba(122, 16, 21, .35); border-radius: 999px;
  transition: all .2s ease;
}
.speak-btn:hover { background: rgba(122, 16, 21, .16); border-color: #7a1015; }
.speak-btn svg { width: 13px; height: 13px; }

/* vocabulary chips */
.section-label {
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .2em;
  color: #96691b; text-transform: uppercase; margin: 1.8rem 0 .8rem;
  display: flex; align-items: center; gap: .7rem;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c9a24e66, transparent); }
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .7rem; }
.word-chip {
  padding: .7rem .85rem;
  background: linear-gradient(160deg, #faf0d6, #f0e0b6);
  border: 1px solid #c8a24e; border-radius: 9px;
  color: var(--ink); text-align: left;
  box-shadow: 0 2px 7px rgba(90, 60, 10, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.word-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(90, 60, 10, .3); }
.word-chip .w { display: block; font-weight: 700; font-size: 1.05rem; color: #7a1015; }
.word-chip .say { display: block; font-size: .82rem; font-style: italic; color: #96691b; margin-top: .1rem; }
.word-chip .m { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: .25rem; }

/* dragon question + tea mission cards */
.q-card {
  position: relative;
  margin-top: 1.9rem; padding: 1.5rem 1.6rem 1.4rem;
  background: linear-gradient(170deg, #8e1c22, #5d1015);
  border: 1px solid var(--gold); border-radius: 10px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
  color: #ffe9c9;
}
.q-card::before {
  content: "龍";
  position: absolute; top: -17px; left: 18px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-zh); font-size: 21px; color: #ffe9c9;
  background: linear-gradient(160deg, #b3811f, #8a6a14);
  border: 1px solid #f8e6a8; border-radius: 8px;
  transform: rotate(-8deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.q-card h3, .m-card h3 {
  font-family: var(--font-display); font-size: .88rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: .55rem; color: var(--gold-bright);
}
.q-card p { font-size: 1.12rem; font-style: italic; line-height: 1.65; }
.q-card p + p { margin-top: .5rem; font-style: normal; font-size: 1.02rem; opacity: .92; }

.m-card {
  margin-top: 1.1rem; padding: 1.35rem 1.6rem 1.3rem;
  background: linear-gradient(160deg, #faf0d6, #f0e0b6);
  border: 1.5px solid #b8860b; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(90, 60, 10, .25);
  color: var(--ink); position: relative;
}
.m-card h3 { color: #96691b; }
.m-card p { font-size: 1.1rem; line-height: 1.6; }
.m-card p + p { margin-top: .4rem; color: var(--ink-soft); font-style: italic; font-size: 1rem; }
.m-card::before {
  content: "🍵"; position: absolute; top: -15px; right: 20px; font-size: 24px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}

/* old scroll (original translation) */
.old-scroll { margin-top: 2.1rem; }
.old-scroll summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; letter-spacing: .06em; color: #96691b;
  padding: .4rem .9rem; border: 1px dashed #b8860b; border-radius: 999px;
  transition: all .2s ease;
}
.old-scroll summary::-webkit-details-marker { display: none; }
.old-scroll summary:hover { background: rgba(184, 134, 11, .1); }
.old-scroll summary::before { content: "卷"; font-family: var(--font-zh); font-size: 1.1rem; color: #7a1015; }
.old-scroll .orig {
  margin-top: 1rem; padding: 1.3rem 1.5rem;
  background: linear-gradient(160deg, #efe0bd, #e6d3a8);
  border: 1px solid #c8a24e; border-left: 4px solid #b8860b; border-radius: 6px;
  font-style: italic; color: #58431f; line-height: 1.7; font-size: 1.03rem;
}
.old-scroll .credit { font-style: normal; font-size: .85rem; color: #96691b; margin-top: .7rem; letter-spacing: .04em; }

/* seal / finish */
.seal-row { margin-top: 2.2rem; text-align: center; }
.seal-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 2.1rem;
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .12em;
  color: #ffe9c9; text-transform: uppercase;
  background: linear-gradient(170deg, #d0342c, #961810);
  border: 2px solid #f7dd87; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 14px rgba(60, 0, 0, .4);
  transition: transform .18s ease, filter .2s ease;
}
.seal-btn:hover { transform: translateY(-2px) rotate(-1deg); filter: brightness(1.08); }
.seal-btn .zh { font-family: var(--font-zh); font-size: 1.3rem; }
.seal-btn.sealed {
  background: linear-gradient(170deg, #b3811f, #8a6a14);
  cursor: default;
}
.seal-btn.sealed:hover { transform: none; filter: none; }
.seal-hint { margin-top: .6rem; font-size: .88rem; font-style: italic; color: var(--ink-soft); }

/* stamp animation */
.stampfx { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 5; overflow: hidden; }
.stampfx .stamp {
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 130px; border-radius: 18px;
  font-family: var(--font-zh); font-size: 4.6rem; color: #ffe9c9;
  background: linear-gradient(160deg, rgba(179, 39, 28, .94), rgba(125, 19, 12, .94));
  border: 4px solid rgba(255, 220, 150, .75);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 18px rgba(50,0,0,.5);
  transform: rotate(-12deg) scale(3.2); opacity: 0;
}
.stampfx.go .stamp { animation: stampIn .55s cubic-bezier(.2, 1.4, .4, 1) .28s forwards; }
@keyframes stampIn {
  0% { transform: rotate(-24deg) scale(3.2); opacity: 0; }
  70% { transform: rotate(-11deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); opacity: 1; }
}

/* petals */
.petal {
  position: fixed; top: -30px; z-index: 80; pointer-events: none;
  width: 13px; height: 13px;
  border-radius: 0 80% 0 80%;
  opacity: 0;
}
@keyframes petalFall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translateY(105vh) rotate(560deg); }
}

/* ============================================================
   WORD BANK
   ============================================================ */
.wb-group { margin-bottom: 1.7rem; }
.wb-group h3 { color: var(--gold-bright); font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; margin-bottom: .7rem; }
.wb-group h3 .zh { font-family: var(--font-zh); color: #ff9d8a; margin-right: .5rem; }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-card {
  max-width: 720px; margin: 0 auto 1.6rem;
  padding: 1.8rem 2rem;
  background: rgba(30, 4, 5, .55);
  border: 1px solid rgba(212, 175, 55, .4); border-radius: 12px;
}
.about-card h3 { font-family: var(--font-display); color: var(--gold-bright); letter-spacing: .12em; margin-bottom: .7rem; font-size: 1.05rem; }
.about-card p { margin-bottom: .8rem; line-height: 1.7; }
.about-card .zh-line { font-family: var(--font-zh); color: #ffb28f; }

/* ============================================================
   TEACUP oracle (fixed corner)
   ============================================================ */
.tea-corner {
  position: fixed; right: clamp(10px, 2.5vw, 28px); bottom: clamp(10px, 2.5vw, 26px);
  z-index: 70; width: 96px;
  background: transparent; border: none; padding: 6px;
  transition: transform .2s ease;
}
.tea-corner:hover { transform: translateY(-3px); }
.tea-corner:active { transform: scale(.94); }
.tea-corner svg { display: block; width: 100%; height: auto; }
.tea-corner .saucer { filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.steam path {
  stroke: #fff; stroke-width: 5; stroke-linecap: round; fill: none; opacity: 0;
}
.steam path:nth-child(1) { animation: steam 3.4s ease-in-out .2s infinite; }
.steam path:nth-child(2) { animation: steam 3.4s ease-in-out 1.3s infinite; }
.steam path:nth-child(3) { animation: steam 3.4s ease-in-out 2.3s infinite; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(6px); }
  30% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* ============================================================
   TOAST + MODAL
   ============================================================ */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  z-index: 90; max-width: min(520px, 88vw);
  padding: .95rem 1.5rem;
  background: linear-gradient(160deg, #faf0d6, #efddb2);
  border: 1.5px solid var(--gold); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  color: var(--ink); text-align: center; line-height: 1.55;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .es-t { display: block; font-weight: 700; color: #7a1015; }
#toast .en-t { display: block; font-style: italic; color: var(--ink-soft); font-size: .95rem; }

#modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(12, 1, 2, .8);
  padding: 1.2rem;
}
#modal.open { display: flex; }
.diploma {
  position: relative;
  width: min(680px, 94vw); max-height: 92vh; overflow: auto;
  text-align: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,235,180,.16), transparent 60%),
    linear-gradient(170deg, #f6e8c8, #e8d2a2);
  border: 3px solid #b8860b; border-radius: 8px;
  outline: 2px solid rgba(184, 134, 11, .55); outline-offset: -10px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  color: var(--ink);
}
.diploma h2 { font-family: var(--font-display); letter-spacing: .16em; color: #7a1015; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.diploma .zh { font-family: var(--font-zh); font-size: 2.2rem; color: #b3811f; margin: .6rem 0; }
.diploma .names { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.diploma input {
  font-family: var(--font-display); font-size: 1.25rem; text-align: center;
  width: 200px; padding: .5rem .6rem;
  color: #5a3a10; background: rgba(255, 250, 235, .7);
  border: none; border-bottom: 2px solid #b8860b;
}
.diploma input:focus { outline: none; border-bottom-color: #7a1015; }
.diploma p { line-height: 1.7; max-width: 46ch; margin: 0 auto .8rem; }
.diploma .date { font-style: italic; color: var(--ink-soft); }
.diploma .dragon-seal {
  position: absolute; bottom: 18px; right: 22px;
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-zh); font-size: 30px; color: #ffe9c9;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 2px solid rgba(255, 220, 150, .6); border-radius: 10px;
  transform: rotate(-10deg);
}
.diploma .modal-close { margin-top: 1.2rem; }

/* ---------- reader bottom nav ---------- */
.reader-bottom { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.back-link { text-align: center; width: 100%; margin-top: 1rem; font-style: italic; }

/* ---------- speaker icon ---------- */
.spk { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .twin { grid-template-columns: 1fr; }
  .lang-block + .lang-block { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px dashed #c9a24e88; }
}
@media (max-width: 720px) {
  .title-strip { display: none; }
  .scroll-head { padding-right: 0; }
  .lantern { width: 52px; }
  .tea-corner { width: 74px; }
  .toc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .toc-grid { grid-template-columns: 1fr; }
  .reader-top { justify-content: center; }
  .cups-row { gap: 3px; }
  .cups-row i { width: 11px; height: 9px; }
}

/* ============================================================
   SHELVES · nine scrolls of nine chapters
   ============================================================ */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 85; }

#roomGlow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(245, 213, 118, .30), transparent 70%),
    radial-gradient(ellipse 50% 35% at 50% 85%, rgba(212, 130, 60, .22), transparent 70%);
  opacity: 0; transition: opacity 2.5s ease;
}
body[data-progress="1"] #roomGlow { opacity: .3; }
body[data-progress="2"] #roomGlow { opacity: .55; }
body[data-progress="3"] #roomGlow { opacity: .8; }
body[data-progress="4"] #roomGlow { opacity: 1; }
body[data-progress="1"] .lantern, body[data-progress="2"] .lantern,
body[data-progress="3"] .lantern, body[data-progress="4"] .lantern {
  filter: brightness(1.2) drop-shadow(0 0 7px rgba(245, 213, 118, .55));
}

/* shelf seals row (cover + contents progress) */
.shelf-row { display: flex; gap: 7px; justify-content: center; margin-top: .5rem; flex-wrap: wrap; }
.shelf-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: 6px; font-family: var(--font-zh); font-size: 14px;
  border: 1px solid rgba(212, 175, 55, .4);
  background: rgba(0, 0, 0, .28); color: rgba(255, 240, 200, .55);
}
.shelf-pill.part {
  border-color: var(--gold); color: var(--gold-bright);
  background: linear-gradient(160deg, rgba(179, 39, 28, .55), rgba(90, 15, 12, .55));
}
.shelf-pill.done {
  border-color: #f8e6a8; color: #ffe9c9;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 6px rgba(60, 0, 0, .5);
}

/* shelf overview cards */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.shelf-card {
  position: relative;
  display: flex; gap: 1rem; align-items: center;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(155deg, var(--parch-1), var(--parch-2) 70%, var(--parch-3));
  border: 1px solid #c8a24e; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  color: var(--ink); text-align: left;
  transition: transform .22s ease, box-shadow .22s ease;
}
.shelf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.shelf-card .shelf-seal {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 9px;
  background: linear-gradient(160deg, var(--seal-red), #7d130c);
  border: 1.5px solid rgba(255, 220, 150, .5);
  color: #ffe9c9; font-family: var(--font-zh); font-size: 26px;
  box-shadow: inset 0 0 8px rgba(50, 0, 0, .55);
}
.shelf-card .shelf-seal.gray { background: linear-gradient(160deg, #6f5e3c, #584a2d); }
.shelf-card .shelf-name { display: block; font-weight: 700; font-size: 1.16rem; color: #5a3a10; }
.shelf-card .shelf-sub { display: block; font-style: italic; color: var(--ink-soft); font-size: .96rem; }
.shelf-card.locked { background: linear-gradient(155deg, #d9caa6, #c9b78d); border-style: dashed; border-color: #a89166; cursor: pointer; }
.shelf-card.locked .shelf-name { color: #7d6c46; }
.shelf-card.locked .shelf-sub { color: #8d7c56; }
.shelf-card.locked:hover { transform: none; }
.shelf-card.locked.shake { animation: cardShake .45s ease; }
.pips { display: flex; gap: 4px; margin-top: .45rem; }
.pips .pip { width: 9px; height: 9px; border-radius: 2px; background: rgba(90, 58, 16, .18); border: 1px solid rgba(184, 134, 11, .45); }
.pips .pip.on { background: linear-gradient(180deg, var(--seal-red), #7d130c); border-color: rgba(255, 220, 150, .5); }
.shelf-card.complete::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(212, 175, 55, .45); pointer-events: none;
}
.shelf-ribbon {
  position: absolute; top: 50%; left: -14px; right: -14px; height: 30px;
  transform: translateY(-50%) rotate(-3deg);
  background: linear-gradient(180deg, #c0392b, #8e1c22);
  border-top: 2px solid #f8e6a8; border-bottom: 2px solid #f8e6a8;
  display: flex; align-items: center; justify-content: center;
  color: #ffe9c9; font-family: var(--font-zh); font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); pointer-events: none;
}
.couplet-echo { color: var(--gold-bright); }

/* newly unlocked chapter shimmer */
.toc-card.just-opened { animation: goldShimmer 1.8s ease; }
@keyframes goldShimmer {
  0% { box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
  30% { box-shadow: 0 0 26px 8px rgba(245, 213, 118, .85); transform: translateY(-3px); }
  100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
}

/* shelf celebration modal */
.shelf-modal { position: relative; overflow: hidden; }
.shelf-modal .ribbon {
  position: absolute; top: 50%; left: -60px; right: -60px; height: 46px;
  transform: translateY(-50%) rotate(-4deg);
  background: linear-gradient(180deg, #c0392b, #8e1c22);
  border-top: 2px solid #f8e6a8; border-bottom: 2px solid #f8e6a8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  animation: ribbonTie 1s cubic-bezier(.2, 1.2, .4, 1) .35s both;
  pointer-events: none;
}
@keyframes ribbonTie {
  0% { transform: translateY(-50%) rotate(-4deg) scaleX(0); opacity: 0; }
  100% { transform: translateY(-50%) rotate(-4deg) scaleX(1); opacity: 1; }
}
.sm-kicker { font-family: var(--font-display); letter-spacing: .22em; font-size: .8rem; color: #96691b; text-transform: uppercase; }
.shelf-modal h2 { position: relative; z-index: 1; text-shadow: 0 2px 6px rgba(246, 232, 200, .9); }
.sm-sub { font-style: italic; color: #77613c; }
.sm-couplet { position: relative; z-index: 1; font-size: 1.25rem; color: #5a3a10; font-weight: 600; margin-top: 1rem; background: rgba(250, 240, 214, .82); padding: .6rem .9rem; border-radius: 8px; display: inline-block; }
.sm-couplet-en { position: relative; z-index: 1; font-style: italic; color: #77613c; }
.sm-note { font-size: .85rem; color: #96691b; margin-top: 1rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll, .lantern, .steam path { animation: none !important; }
  html { scroll-behavior: auto; }
}