/* Word card, pause/settings, word book, review. */

/* ── Word card: a paper label tag on a thin string (js/ui/wordcard.js) ──
   One component in three sizes: the floating word (hud.css, unchanged), the small tag that hangs from the dialogue
   box (hud.css) and the large tag here. Same warm paper as the dialogue box, iron-gall ink, a hand-lettered word. */
.wordcard { position: fixed; inset: 0; z-index: 30; background: rgba(6, 9, 26, .3); opacity: 0; transition: opacity .5s; }
.wordcard.open { opacity: 1; }
.tag { --paper-1: #fbf3df; --paper-2: #f0e0bc; --paper-3: #e2cb9c; --ink-1: #2b2418; --sepia: #7a5a2e; color: var(--ink-1); }
.tag-paper {
  position: relative; background:
    radial-gradient(130% 120% at 30% 0%, var(--paper-1), var(--paper-2) 62%, var(--paper-3)),
    repeating-linear-gradient(0deg, rgba(120, 90, 40, .03) 0 2px, transparent 2px 5px);
  /* a luggage label: the two top corners cut off */
  clip-path: polygon(16% 0, 84% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  box-shadow: inset 0 0 40px rgba(150, 110, 50, .22);
}
.tag-eyelet { position: absolute; left: 50%; top: 16px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #3a2c18; box-shadow: 0 0 0 5px #e7d4a8, 0 0 0 6px rgba(120, 90, 40, .35); z-index: 1; }
.tag-string { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; background: linear-gradient(90deg, #a8916a, #d9c69e 50%, #a8916a); z-index: 2; }
.tag-large {
  position: absolute; right: 8vw; top: 0; width: min(390px, 88vw); padding-top: 9vh; transform-origin: 50% 0;
  filter: drop-shadow(0 18px 28px rgba(10, 8, 4, .38)) drop-shadow(0 2px 3px rgba(10, 8, 4, .25));
}
.tag-large .tag-string { height: calc(9vh + 24px); }
.tag-large .tag-paper { max-height: calc(100vh - 9vh - 3vh); overflow-y: auto; padding: 44px 34px 26px; user-select: text; scrollbar-width: thin; }
.tag-large.swing { animation: tag-swing 1.35s cubic-bezier(.3, .7, .4, 1) both; }
.tag-large.grow { animation: tag-grow .9s var(--ease) both; }
.tag-large.rise { animation: tag-rise 1.1s var(--ease) both; }
/* in from the top right on its string, then two sways and still */
@keyframes tag-swing {
  0% { transform: translate(14vw, -105%) rotate(-30deg); }
  42% { transform: rotate(9deg); }
  60% { transform: rotate(-5.5deg); }
  76% { transform: rotate(3deg); }
  89% { transform: rotate(-1.2deg); }
  100% { transform: none; }
}
@keyframes tag-grow { 0% { transform: translate(-6vw, 52vh) scale(.42); opacity: .4; } 60% { transform: rotate(3deg); opacity: 1; } 82% { transform: rotate(-1.5deg); } 100% { transform: none; } }
@keyframes tag-rise { 0% { transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(.22) rotate(-12deg); opacity: .3; } 55% { transform: rotate(5deg); opacity: 1; } 78% { transform: rotate(-2.5deg); } 100% { transform: none; } }
/* put away: lifted off on its string */
.tag-lift { position: fixed !important; right: auto !important; bottom: auto !important; margin: 0 !important; z-index: 31; pointer-events: none; animation: tag-lift .42s cubic-bezier(.5, 0, .9, .4) forwards !important; }
@keyframes tag-lift { to { transform: translateY(-110vh) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .tag-large, .tag-small { animation: none !important; } }

.wc-close { position: absolute; top: 34px; right: 16px; font-size: 26px; color: var(--sepia); opacity: .7; z-index: 2; }
.wc-close:hover { opacity: 1; }
.wc-sketch { display: block; width: 100%; max-height: 170px; object-fit: contain; margin: 4px 0 10px; mix-blend-mode: multiply; }
.wc-cefr { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; color: var(--sepia); min-height: 1em; }
.wc-word { font: 700 clamp(50px, 5.6vw, 68px)/1 'Caveat', var(--serif); margin: 4px 0 6px; letter-spacing: .01em; overflow-wrap: anywhere; }
.wc-say-row { display: flex; align-items: center; gap: 12px; }
.wc-ipa { font-family: var(--sans); font-size: 16px; padding: 2px 0; border-bottom: 1px dotted rgba(43, 36, 24, .45); }
.wc-ipa:hover { border-bottom-style: solid; }
.wc-accent { font-size: 10px; letter-spacing: .12em; color: var(--sepia); margin-right: 3px; }
.wc-play, .st-play { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor; }
.wc-play svg, .st-play svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.wc-play:hover, .st-play:hover { background: rgba(43, 36, 24, .08); }
.wc-zh { margin-top: 16px; font-size: 24px; line-height: 1.4; }
.wc-mean:lang(zh), .wc-mean:lang(zh-CN) { font-family: var(--cjk), var(--serif); }
.wc-pos { font-style: italic; font-size: 17px; color: var(--sepia); margin-right: 4px; }
.wc-ex { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(122, 90, 46, .45); }
.wc-ex-en { font-size: 19px; line-height: 1.45; }
.wc-ex-en mark, .wc-quote mark { background: none; color: #8a3a16; font-weight: 600; }
.wc-ex-tr { font: 15px/1.5 var(--sans); color: #4a3b22; margin-top: 5px; }
.wc-ex-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 22px; }
.wc-ex-src { flex: 1; font: italic 14px var(--serif); color: var(--sepia); display: flex; align-items: center; gap: 5px; }
.wc-ex-src svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.wc-ex-say { color: var(--sepia); }
.tag-large .tag-paper { padding-bottom: 74px; }
.wc-def-fold, .wc-adv { margin-top: 14px; }
.wc-def-fold summary, .wc-adv summary { cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: .18em; color: var(--sepia); list-style: none; }
.wc-def-fold summary::before, .wc-adv summary::before { content: '▸ '; }
.wc-def-fold[open] summary::before, .wc-adv[open] summary::before { content: '▾ '; }
.wc-def { margin-top: 8px; font-size: 17px; line-height: 1.45; }
.wc-quote { margin: 10px 0 6px; font-style: italic; font-size: 17px; line-height: 1.5; }
.wc-source, .wc-plain { font-family: var(--sans); font-size: 12px; color: var(--sepia); }
.wc-plain { margin-top: 6px; }

/* Ink stamps: seen (an eye) → known (a key) → used (a quill), pressed into the tag's corner */
.stamp { display: inline-block; width: 54px; height: 54px; transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .8; }
.stamp:empty { display: none; }
.stamp svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stamp .rim { stroke-width: 2.4; stroke-dasharray: 22 2 9 1.5 30 2.5; }
.stamp[data-state="seen"] { color: #4f5d7a; }
.stamp[data-state="known"] { color: #a33a26; }
.stamp[data-state="used"] { color: #6d2346; transform: rotate(9deg); }
.wc-stamp { position: absolute; right: 18px; bottom: 16px; }
.wc-ex-say { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; }

/* ── Modals ── */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5, 8, 20, .55); backdrop-filter: blur(3px); }
.panel { position: relative; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; padding: 36px 44px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; }
.panel.wide { width: min(980px, 94vw); }
.panel h2 { font-weight: 500; font-size: 36px; margin: 0 0 18px; text-align: center; }
.panel h3 { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--gold); margin: 26px 0 10px; }
.panel-close { position: absolute; top: 14px; right: 20px; font-size: 30px; opacity: .6; }
.pause-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* 换装: one tile per outfit (js/outfits.js); the one she wears is ringed in gold, a locked one is dimmed */
.outfits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.outfit { display: grid; justify-items: center; gap: 6px; min-width: 7.5em; max-width: 10em; word-break: keep-all; padding: 12px 8px 10px; border: 1px solid rgba(246, 239, 220, .25); border-radius: 10px; font-family: var(--sans); font-size: 14px; }
.outfit .swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(246, 239, 220, .7); }
.outfit .state { font-size: 12px; opacity: .75; min-height: 1.2em; }
.outfit[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.outfit[aria-pressed="true"] .state { color: var(--gold); opacity: 1; }
.outfit.locked { opacity: .55; }
.outfit:not(.locked):hover { border-color: rgba(246, 239, 220, .6); }
.slider { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 14px; margin: 10px 0; font-family: var(--sans); font-size: 15px; }
.slider input[type="range"] { accent-color: var(--gold); width: 100%; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--sans); font-size: 14px; margin: 0; }
.keys dd { margin: 0; opacity: .8; align-self: center; }
.save-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 8px 0; font-family: var(--sans); font-size: 15px; }
.save-row input[type="text"] { flex: 1; min-width: 12em; padding: .5em .9em; border-radius: 999px; border: 1px solid rgba(246, 239, 220, .35); background: rgba(0, 0, 0, .25); color: var(--cream); font: 15px var(--sans); user-select: text; }
.save-row input[type="text"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.save-msg { text-align: center; font-family: var(--sans); font-size: 14px; margin: 6px 0 0; color: var(--gold); }
.save-msg.bad { color: #f0b0a8; }
a.btn { text-decoration: none; display: inline-block; }
.clear-row { margin-top: 26px; display: flex; gap: 10px; align-items: center; justify-content: center; font-family: var(--sans); }

/* ── Word book: a scrapbook page with the words' paper tags pinned on it ── */
/* ── Paper sheets: the word book, the pause menu and the reading pages (the chapter's original, about, credits) are
   the same torn parchment as the journey map and the journal, not a flat cream box (the user). The torn margin is
   kept clear by the padding; the shadow follows the torn edge. ── */
#wordbook .panel, #pause .panel, .reading-panel {
  color: var(--ink); border: 0; border-radius: 0; box-shadow: none; padding: 58px 68px 52px;
  background: url('../art/parchment.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5));
  scrollbar-width: thin; scrollbar-color: rgba(122, 90, 46, .45) transparent;
}
#pause .panel h3 { color: #7a5a2e; }
#pause .panel-close, #pause .link { color: #6b4a12; }
#pause .btn { color: var(--ink); border-color: rgba(29, 42, 82, .35); }
#pause .btn:hover { border-color: var(--gold-deep); background: rgba(201, 162, 76, .12); }
#pause .btn.gold { color: #6b4a12; border-color: var(--gold-deep); }
#pause .btn.danger { color: #9a2f22; border-color: rgba(154, 47, 34, .5); }
#pause kbd { border-color: rgba(29, 42, 82, .45); background: rgba(255, 255, 255, .35); color: var(--ink); }
#pause .slider input[type="range"] { accent-color: #9a7428; }
#pause .slider select { color: var(--ink); border-color: rgba(29, 42, 82, .35); background-color: rgba(255, 255, 255, .3); }
#pause .save-row input[type="text"] { color: var(--ink); border-color: rgba(29, 42, 82, .35); background: rgba(255, 255, 255, .35); }
#pause .save-msg { color: #6b4a12; }
#pause .save-msg.bad { color: #9a2f22; }
#pause .outfit { border-color: rgba(29, 42, 82, .25); }
#pause .outfit .swatch { border-color: rgba(29, 42, 82, .35); }
#pause .outfit:not(.locked):hover { border-color: rgba(29, 42, 82, .55); }
#pause .outfit[aria-pressed="true"] { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep); }
#pause .outfit[aria-pressed="true"] .state { color: #6b4a12; }
#wordbook .panel h2 { font-family: 'Caveat', var(--serif); font-weight: 700; font-size: 46px; margin-bottom: 10px; }
#wordbook .panel h3 { color: #7a5a2e; }
#wordbook .panel-close { color: #7a5a2e; }
#wordbook .btn { color: var(--ink); border-color: rgba(29, 42, 82, .35); }
#wordbook .btn:hover { border-color: var(--gold-deep); background: rgba(201, 162, 76, .12); }
#wordbook .btn.gold { color: #6b4a12; border-color: var(--gold-deep); }
#wordbook .link { color: #6b4a12; }
.wb-tabs { display: flex; justify-content: center; gap: 8px; }
.wb-tabs button { padding: 6px 16px; border-radius: 999px; font-family: var(--sans); font-size: 14px; opacity: .65; }
.wb-tabs button[aria-selected="true"] { opacity: 1; background: rgba(29, 42, 82, .08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 42, 82, .25); }
.wb-due:not(:empty) { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; }
.wb-summary { text-align: center; font-family: var(--sans); font-size: 13px; opacity: .6; margin: 12px 0 6px; }
.wb-group h3 { display: flex; gap: 14px; align-items: baseline; }
.wb-group h3 small { opacity: .6; letter-spacing: 0; }
.wb-list { list-style: none; padding: 6px 4px 10px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 22px 18px; }
.wb-word { transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--ease); }
.wb-word:hover { transform: rotate(0deg) translateY(-3px); }
.wb-tag {
  position: relative; width: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 22px 14px 12px; text-align: left; color: #2b2418;
  background: radial-gradient(130% 120% at 30% 0%, #fdf6e4, #f0e0bc 65%, #e4cfa2);
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  filter: drop-shadow(0 4px 5px rgba(60, 40, 10, .22));
}
/* a red-headed pin through the tag's hole */
.wb-pin { position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e98b78, #a3301f 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.wb-tag b { font: 700 28px/1 'Caveat', var(--serif); max-width: calc(100% - 34px); overflow-wrap: anywhere; }
.wb-mean { font-size: 13px; line-height: 1.35; opacity: .75; max-width: calc(100% - 30px); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wb-mean:lang(zh), .wb-mean:lang(zh-CN) { font-family: var(--cjk), var(--serif); }
.wb-stamp { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; }
.wb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wb-cols .wb-list { grid-template-columns: 1fr; }
.empty { text-align: center; opacity: .6; font-family: var(--sans); margin: 30px 0; }

/* ── Review ── */
.review { text-align: center; padding: 10px 0; }
.rv-count { font-family: var(--sans); font-size: 12px; opacity: .55; letter-spacing: .15em; }
.rv-zh { font-size: 28px; margin: 18px 0 8px; font-family: var(--cjk), var(--serif); }
.rv-ex { font-size: 20px; font-style: italic; opacity: .85; margin-bottom: 20px; }
.rv-answer { font-size: 22px; margin-bottom: 16px; }
.rv-word { font-size: 40px; font-weight: 500; color: var(--gold); }
.rv-rate { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rv-rate .btn { display: grid; font-size: 16px; }
.rv-rate small { font-family: var(--sans); font-size: 11px; opacity: .6; }

/* ── Reading pages ── */
.reading { z-index: 25; }
.reading-panel {
  /* the book's own pages: the same aged parchment as the journey map, not a dark box over it (Glimpse) */
  width: min(760px, 92vw); user-select: text;
}
.reading-panel h3 { color: #7a5a2e; }
.reading-panel .panel-close, .reading-panel .link, .reading-panel .btn { color: var(--ink); }
.reading-panel .btn { border-color: rgba(29, 42, 82, .45); }
.reading-panel blockquote { border-left-color: rgba(122, 90, 46, .5); }
.reading-panel .audio-choices [aria-pressed="true"] { color: #7a5310; border-color: var(--gold-deep); background: rgba(230, 198, 117, .25); }
.reading-panel h2 { font-size: 30px; padding: 0 10px; }
.reading-panel p, .reading-panel li { font-size: 19px; line-height: 1.7; }
.reading-panel ul { padding-left: 1.2em; }
.reading-panel blockquote { margin: 24px 0; padding-left: 18px; border-left: 1px solid var(--panel-border); }
.reading-panel blockquote p { margin: 4px 0; }
.reading-panel .line-tr, .reading-credit, .credit-note { font: 14px/1.6 var(--sans); opacity: .65; }
.reading-panel .reading-credit { font-size: 12px; margin-bottom: 0; }
.reading-panel .summary-toggle { font: 13px var(--sans); margin-bottom: 6px; }
.audio-choices { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 18px; }
.audio-choices [aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.audio-transport { display: flex; align-items: center; gap: 14px; font: 12px var(--sans); }
.audio-seek { flex: 1; }
.audio-seek input { width: 100%; accent-color: var(--gold-deep); }
.audio-transport .link { min-width: 4em; }
button:disabled { cursor: default; }
@media (max-width: 600px) {
  .reading-panel { padding: 36px 24px; }
  .map-info { bottom: 8vh; }
}

/* Read along: the original chapter while LibriVox reads it, the word being read in gold */
.readalong { max-height: 52vh; overflow-y: auto; padding: 4px 6px 30vh 0; font: 400 clamp(17px, 1.3vw, 21px)/1.8 var(--serif); scroll-behavior: smooth; }
.readalong p { margin: 0 0 1em; opacity: .42; transition: opacity .6s; }
.readalong p.here { opacity: 1; }
.readalong p.ra-head { font-variant: small-caps; letter-spacing: .08em; color: #7a5310; opacity: .8; }
.readalong span { cursor: pointer; border-radius: 3px; transition: color .15s, background .15s; }
.readalong span:hover { background: rgba(122, 90, 46, .1); }
.readalong span.now { color: #8a5a00; background: rgba(230, 198, 117, .45); }
.ra-back { display: block; margin: 0 0 12px; font-size: 14px; }
.ra-wait { opacity: .5; }

/* review and settings bits on paper */
#wordbook .rv-word { color: #8a3a16; }
.slider.switch input { justify-self: start; width: 18px; height: 18px; accent-color: var(--gold); }
.setting-note { font: 13px/1.5 var(--sans); opacity: .65; margin: 2px 0 0; }