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

:root {
  --bg:      #090c12;
  --bg2:     #0f1520;
  --bg3:     #18202e;
  --spoiler-panel-bg: #2b3445;
  --border:  #263040;
  --accent:  #7ab0cc;
  --accent2: #7a9e6a;
  --text:    #c8d8e8;
  --muted:   #8a9aae;
  --new:     #b05840;
  --review:  #9b6ec5;
  --learning:#7a9e6a;
  --known:   #4a9888;
  --read:      #b497d6;                 /* "book I've read" mark — purple, matches the site */
  --read-soft: rgba(180,151,214,.14);
  --prize:     #CFCF99;                 /* soft green — prize/award labels + books read (daily-quest checkbox green) */
  --prize-soft: rgba(207,207,153,.16);  /* soft green row tint for read prize winners */
  --lib-accent:      #EBC088;           /* orange highlight — library card hover/selected (daily-quest checkbox orange) */
  --lib-accent-soft: rgba(235,192,136,.16);
  --row-divider: rgba(122,176,204,.18);
  --row-hover:   rgba(122,176,204,.07);
  --carousel-bg:       rgba(214,150,182,.12);
  --carousel-bg-hover: rgba(214,150,182,.22);
  --carousel-fg:       #d49ab4;
  --carousel-dot:      #b56e93;
  /* Eighth-note (quaver) glyph drawn before each quoted lyric line. It is a
     mask, so its colour follows --accent regardless of light/dark theme. */
  --quaver: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z'/%3E%3Cpath d='M9 3v10H8V3z'/%3E%3Cpath d='M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5z'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  /* To revert to the original two-tone design, restore these values:
       --bg:  #f2f0f6;   (light grey-purple page background)
       --bg3: #e8e4f0;   (deeper grey-purple inner panels) */
  --bg:      #f7f6fb;
  --bg2:     #ffffff;
  --bg3:     #f7f6fb;
  --spoiler-panel-bg: #fbfaff;
  --border:  #cac4d8;
  --accent:  #2e6e90;
  --accent2: #3e6028;
  --text:    #0e1820;
  --muted:   #5a5870;
  --new:     #983020;
  --review:  #5e3e88;
  --learning:#3e6028;
  --known:   #1e6858;
  --read:      #7a52a3;
  --read-soft: rgba(122,82,163,.11);
  --prize:     #6f7d2e;                 /* darker green for the near-white light theme (readable as text) */
  --prize-soft: rgba(111,125,46,.12);
  --lib-accent:      #c98a3c;           /* deeper orange highlight for the light theme */
  --lib-accent-soft: rgba(201,138,60,.12);
  --row-divider: rgba(46,110,144,.18);
  --row-hover:   rgba(46,110,144,.06);
  --carousel-bg:       rgba(194,109,152,.12);
  --carousel-bg-hover: rgba(194,109,152,.20);
  --carousel-fg:       #b5688f;
  --carousel-dot:      #9c4f76;
}

/* Stop iOS Safari from auto-enlarging text when rotating to landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html[data-font-size="md"] { font-size: 112.5%; }
html[data-font-size="lg"] { font-size: 125%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 52px;
  border-bottom: 1px solid rgba(122,176,204,.15);
  background: #090c12;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-title {
  font-size: .95rem;
  font-weight: 700;
  color: #d8eef8;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-nav { display: flex; gap: 2px; }

.nav-link {
  color: #7a9eb8;
  padding: 5px 12px;
  font-size: .87rem;
  font-weight: 500;
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: #d8eef8; background: rgba(122,176,204,.1); }
.nav-link.active { color: #7ab0cc; background: rgba(122,176,204,.15); }

/* ── Main ────────────────────────────────────────────────────────── */
.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 56px;
}

/* ── Garden bar ──────────────────────────────────────────────────── */
.garden-bar {
  position: fixed;
  bottom: 34px;
  left: 0;
  right: 0;
  z-index: 99;
  pointer-events: none;
}

.garden-scene {
  position: relative;
  width: 100%;
  height: 70px;
  background: transparent;
  overflow: hidden;
}

.garden-soil {
  height: 10px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
}

/* ── Page title ──────────────────────────────────────────────────── */
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 28px;
}

.section-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 16px;
}

.empty-note { color: var(--muted); font-style: italic; }

/* ── Book grid ───────────────────────────────────────────────────── */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.book-grid-finished {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.book-grid-featured {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
}
.book-grid-featured .book-card {
  width: auto;
  height: 195px;
  flex-direction: row;
  flex-shrink: 0;
}
.book-grid-featured .book-card .book-card-cover {
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  flex-shrink: 0;
}
.book-grid-featured .book-card .book-card-cover img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.book-grid-featured .book-card .book-card-info {
  width: 150px;
  flex: none;
}

.books-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.books-filter-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color .12s;
}
.books-filter-select:hover,
.books-filter-select:focus { border-color: var(--accent); outline: none; }
.books-filter-fav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
}
.books-filter-fav input { cursor: pointer; accent-color: var(--accent); }

.books-divider {
  border: none;
  border-top: 1px solid var(--border);
  width: 160px;
  margin: 32px auto;
}

.review-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

.book-card {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.book-card-cover {
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--bg3);
  flex-shrink: 0;
}
.book-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card-no-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: .8rem;
  color: var(--muted);
}

.book-card-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.book-card-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.book-card-sub { font-size: .75rem; color: var(--muted); }
.book-card-author { font-size: .75rem; color: var(--muted); }
.book-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Finished books — info shown as overlay on hover */
.book-grid-finished .book-card { position: relative; }
.book-grid-finished .book-card-info {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 18, 0.88);
  opacity: 0;
  transition: opacity 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px;
}
.book-grid-finished .book-card:hover .book-card-info,
.book-grid-finished .book-card:focus .book-card-info { opacity: 1; }
.book-grid-finished .book-card-info .book-card-title { color: #c8d8e8; }
.book-grid-finished .book-card-info .book-card-sub,
.book-grid-finished .book-card-info .book-card-author { color: #7a9eb8; }
.book-grid-finished .book-card-info .meta-chip {
  color: #7a9eb8;
  border-color: #2a3848;
  background: rgba(18, 32, 46, 0.7);
}
.book-grid-finished .book-card-info .meta-fav {
  color: #c06080;
  border-color: #c06080;
}

.meta-chip {
  font-size: .65rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 3px;
  padding: 1px 5px;
}
.meta-fav { color: #c06080; border-color: #c06080; }
.meta-liked { color: #e0a8be; border-color: #e0a8be; }
.book-grid-finished .book-card-info .meta-liked {
  color: #e0a8be;
  border-color: #e0a8be;
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  margin-top: auto;
}
.status-to-read       { color: var(--muted);    background: rgba(80,96,112,.15); }
.status-currently-reading { color: var(--learning); background: rgba(122,158,106,.15); }
.status-finished      { color: var(--known);    background: rgba(74,152,136,.15); }
.status-dnfed         { color: var(--muted);    background: rgba(180,80,80,.12); }
.status-not-started-yet { color: #b07d2a;       background: rgba(200,140,40,.15); }
.status-archived      { color: #8a78b8;         background: rgba(140,120,200,.15); }
.fav-badge { font-size: .75rem; color: #c06080; }
.fav-badge.liked-badge { color: #e0a8be; }
.review-fav { margin: 4px 0 8px; }

.see-all-link {
  display: inline-block;
  color: var(--accent);
  font-size: .85rem;
  margin-top: 8px;
}
.see-all-link:hover { text-decoration: underline; }

/* ── Home section ────────────────────────────────────────────────── */
.home-section { margin-bottom: 48px; }

/* ── Homepage two-column top grid ────────────────────────────────── */
.home-top-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 700px) { .home-top-grid { grid-template-columns: 1fr; } }

/* ── Homepage 3-row layout ───────────────────────────────────────── */
.home-row1 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}
.home-row1 > .book-section { margin-bottom: 0; }
.cal-section {
  display: flex;
  flex-direction: column;
}

.home-row2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}
.home-row2 > .book-section { margin-bottom: 0; }

.home-row3 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}
.home-row3 > .book-section { margin-bottom: 0; }

@media (max-width: 700px) {
  .home-row1, .home-row2, .home-row3 { grid-template-columns: 1fr; }
}

/* ── Calendar widget ─────────────────────────────────────────────── */
.cal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cal-head-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--bg3);
  border-bottom: 2px solid var(--border);
}
.cal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  min-height: 0;
  background: var(--border);
}
.cal-head {
  padding: 6px 2px;
  text-align: center;
  font-size: .6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}
.cal-empty {
  background: var(--bg2);
}
.cal-cell {
  background: var(--bg2);
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  position: relative;
}
.cal-cell.is-today { background: var(--bg2); }
.cal-day {
  font-size: .68rem;
  color: var(--muted);
  text-align: right;
  line-height: 1;
  flex-shrink: 0;
}
.cal-cell.is-today .cal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: .62rem;
  font-weight: 700;
  margin-left: auto;
}
.cal-entries {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
}
.cal-entry {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  line-height: 1;
  padding: 2px 5px 2px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 28%, transparent);
  transition: transform .12s ease, filter .12s ease;
  cursor: pointer;
}
.cal-entry:hover {
  transform: scale(1.08);
  background: color-mix(in srgb, currentColor 45%, transparent);
}
.cal-entry:active {
  transform: scale(0.93);
  background: color-mix(in srgb, currentColor 55%, transparent);
  transition-duration: .06s;
}
.cal-entry-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 14px;
  color: var(--text);
}
.cal-entry-icon line { stroke: var(--bg2); }
.cal-entry-label {
  font-size: .58rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
@media (max-width: 520px) {
  .cal-entry-label { display: none; }
  .cal-entry { padding: 2px; gap: 0; justify-content: center; }
}

/* ── Home stats widget ───────────────────────────────────────────── */
.home-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-stat-period {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 4px;
}
.home-stat-period:first-child { margin-top: 0; }
.home-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.home-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  min-width: 2.5ch;
  text-align: right;
}
.home-stat-label {
  font-size: .78rem;
  color: var(--muted);
}
.home-stat-divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* Currently Reading cover slideshow */
.home-cover-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.home-cover-link:hover .home-cover-title { color: var(--accent); }
.home-cover-img {
  max-height: 260px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.home-cover-placeholder {
  height: 200px;
  width: 140px;
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}
.home-cover-meta { text-align: center; }
.home-cover-title { font-size: .9rem; font-weight: 600; color: var(--text); transition: color .12s; }
.home-cover-author { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Latest Posts tags row */
.home-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

/* ── Post list (homepage) ────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 12px; }
.post-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-type-badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
}
.post-date { font-size: .75rem; color: var(--muted); }
.post-excerpt { font-size: .9rem; color: var(--text); }

/* ── Book header (book page) ─────────────────────────────────────── */
.book-header {
  display: flex;
  gap: 28px;
  margin-bottom: 36px;
  align-items: flex-start;
}

.book-cover-wrap { flex-shrink: 0; }
.book-cover {
  width: 140px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
.book-cover-empty {
  width: 140px;
  height: 200px;
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}

.book-meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ── Below-title multi-column area ──────────────────────────────── */
.book-lower { display: contents; }
.book-lower-split { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 20px; margin-top: 6px; }

.book-col { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; min-width: 150px; }
.book-col + .book-col {
  border-left: 1px solid var(--border);
  padding-left: 16px;
  margin-left: 14px;
}
/* First section of each wrapped row: no leading divider (set by JS). */
.book-col.row-start { border-left: none; padding-left: 0; margin-left: 0; }
.book-col-more { flex-shrink: 1; max-width: 260px; }
.book-col-header {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 4px;
}

/* ── Story list ──────────────────────────────────────────────────── */
.story-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.story-item:last-child { border-bottom: none; }
.story-num { font-size: .7rem; color: var(--muted); min-width: 16px; padding-top: 2px; text-align: right; flex-shrink: 0; }
.story-info { display: flex; flex-direction: column; gap: 2px; }
.story-title { font-size: .88rem; color: var(--text); line-height: 1.3; }
.story-rom   { font-size: .75rem; color: var(--muted); }
.story-author { font-size: .72rem; color: var(--accent); margin-top: 1px; }

/* ── More info text ──────────────────────────────────────────────── */
.more-info-text { font-size: .88rem; line-height: 1.7; color: var(--text); }
.more-info-text p { margin: 0 0 6px; }
.more-info-text p:last-child { margin-bottom: 0; }

/* ── Tab toggle (mobile only) ────────────────────────────────────── */
.book-info-tabs { display: none; }

@media (max-width: 700px) {
  .book-lower-split { flex-direction: column; }
  .book-col + .book-col { border-left: none; padding-left: 0; margin-left: 0; }
  .book-info-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    width: 100%;
  }
  .book-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
  }
  .book-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .book-tab-panel { display: none; }
  .book-tab-panel.active { display: flex; flex-direction: column; gap: 4px; }
}
.book-title { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.book-title-rom { font-size: .9rem; color: var(--muted); }
.book-title-tr  { font-size: .85rem; color: var(--muted); }

.book-details { display: flex; flex-direction: column; gap: 4px; }
.detail-row { display: flex; gap: 10px; font-size: .88rem; }
.detail-label { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; min-width: 70px; padding-top: 2px; }

.book-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rating-inline .star { font-size: 1rem; color: var(--border); }
.rating-inline .star.filled { color: #e8c040; }

/* ── Two-column layout ───────────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.two-col > .book-section { margin-bottom: 0; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

/* ── Book sections ───────────────────────────────────────────────── */
.book-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  position: relative;
}

/* Containers that can host critters need a positioning context */
.blog-post, .ab-full-card { position: relative; }

/* ── Critters perched on the bottom border (book/game pages) ───── */
/* Muted pastel palette — tuned for dark theme; light theme below */
:root, [data-theme="dark"] {
  --critter-blue:   #d4e2ee;
  --critter-green:  #dceadb;
  --critter-purple: #e0d8ec;
  --critter-pink:   #eedde4;
  --critter-orange: #f0e2c8;
  --critter-brown:  #e2d4c2;
  --critter-wheat:  #ede8d0;
  --critter-teal:   #d6e6e0;
}
[data-theme="light"] {
  --critter-blue:   #9aaec0;
  --critter-green:  #a6c0a2;
  --critter-purple: #b0a4c4;
  --critter-pink:   #c2a8b4;
  --critter-orange: #ccb086;
  --critter-brown:  #a89178;
  --critter-wheat:  #c4bc8e;
  --critter-teal:   #9cb8b0;
}

.book-critter {
  position: absolute;
  bottom: -9px;
  width: 38px;
  height: 38px;
  color: var(--accent2);
  opacity: 0.38;
  pointer-events: none;
  z-index: 2;
  transform: translateX(-50%);
}
.book-critter.flipped {
  transform: translateX(-50%) scaleX(-1);
}

/* Flowers from /api/garden, distributed across text boxes (see base.html). */
.book-flower {
  pointer-events: none;
  z-index: 1;
}
body.no-flowers .book-flower { display: none; }

/* When a box has flowers, clip its left/right edges so flowers spawned near
   the border are cut off cleanly. Vertical overflow stays free so critters
   (bottom: -9px) and butterflies remain visible. */
.book-section:has(.book-flower),
.blog-post:has(.book-flower),
.ab-full-card:has(.book-flower) {
  clip-path: inset(-200px 0 -200px 0);
}

/* While a task note is hovered/open, (1) drop the edge-clip on its card so the
   speech bubble can overflow past the card's own edge, and (2) lift the whole
   card above its neighbours so the overflowing bubble isn't painted under the
   next card. The clip otherwise trims the bubble; without the z-index the
   neighbouring card covers the part of the bubble that spills into it. */
.book-section:has(.task-note:hover),
.book-section:has(.task-note:focus),
.book-section:has(.task-note.note-open),
.blog-post:has(.task-note:hover),
.blog-post:has(.task-note:focus),
.blog-post:has(.task-note.note-open),
.ab-full-card:has(.task-note:hover),
.ab-full-card:has(.task-note:focus),
.ab-full-card:has(.task-note.note-open) {
  clip-path: none;
  position: relative;
  z-index: 100;
}

.section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.section-title.has-date { display: flex; justify-content: space-between; align-items: center; }
.section-date { font-size: .72rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ── Slider ──────────────────────────────────────────────────────── */
.slider { position: relative; }
.slide { display: none; }
.slide.active { display: block; }
.about-slide { display: none; }
.about-slide.active { display: block; }
.about-slider .about-controls {
  margin: 0 0 14px;
  padding-top: 0;
  border-top: none;
  justify-content: flex-start;
}
.slide-date { font-size: .72rem; color: var(--muted); margin-top: 10px; text-align: right; }
.post-sub-title { font-size: .95rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.post-body { font-size: .93rem; line-height: 1.8; word-break: break-word; }
.post-body li.task-list-item { list-style: none; margin-left: 0; padding-left: 0; position: relative; }
.post-body ul:has(> li.task-list-item) { padding-left: 1.2em; }
.post-body li.task-list-item::marker { content: ''; }
.post-body ul li.task-list-item::before { content: none; display: none; }
.post-body li.task-list-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  margin: 0 8px 0 0;
  vertical-align: -3px;
  border-radius: 50%;
  border: 1.5px solid #EBC088;
  background: transparent;
  position: relative;
}
.post-body li.task-list-item input[type="checkbox"]:checked {
  background: #EBC088;
}
.post-body li.task-list-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
/* Sub-checkboxes: soft yellow-green */
.post-body li.task-list-item li.task-list-item input[type="checkbox"] {
  width: 14px; height: 14px;
  border-color: #CFCF99;
}
.post-body li.task-list-item li.task-list-item input[type="checkbox"]:checked {
  background: #CFCF99;
}
.post-body li.task-list-item li.task-list-item input[type="checkbox"]:checked::after {
  left: 3px; top: 0;
}

/* Per-task commentary: a three-dot speech-bubble cue + its hover/tap note.
   The bubble is anchored to (and centred over) the whole task line so it never
   spills past the card's clipped left/right edges, and hovering anywhere on the
   line reveals it. Its colour follows the task's checkbox — blue for top-level
   tasks, pink for sub-tasks. On touch screens, a tap adds .note-open to the
   line (see base.html). */
.post-body li.task-list-item { --note-color: #EBC088; }
.post-body li.task-list-item li.task-list-item { --note-color: #CFCF99; }

/* The bubble opens only from the little speech-bubble icon — hovering it (mouse)
   or tapping it (touch, toggles .note-open). Hovering the rest of the line does
   nothing. The bubble is anchored to the icon, so it pops up right above it. */
.task-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -.05em;
  margin-left: 5px;
  width: 1.4em;
  height: 1.4em;
  border-radius: 7px;
  background: color-mix(in srgb, var(--note-color, var(--accent)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--note-color, var(--accent)) 42%, transparent);
  color: color-mix(in srgb, var(--note-color, var(--accent)) 55%, #000);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.task-note:hover,
.task-note:focus,
.task-note.note-open {
  background: color-mix(in srgb, var(--note-color, var(--accent)) 40%, transparent);
  transform: translateY(-1px);
  outline: none;
}
.task-note-icon { width: .92em; height: .92em; }

/* The bubble sits above the icon but extends to the right, with its tail near
   the left edge pointing down at the icon. --note-tail is the tail's distance
   from the bubble's left edge; the bubble is shifted left by that much so the
   tail lands on the icon. On narrow screens it re-centres (see media query). */
.task-note-bubble {
  --note-tail: 22px;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(calc(-1 * var(--note-tail))) translateY(6px) scale(.9);
  transform-origin: var(--note-tail) bottom;
  min-width: 160px;
  max-width: min(300px, 80vw);
  width: max-content;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--note-color);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  font-size: .87rem;
  line-height: 1.55;
  font-weight: 400;
  white-space: normal;
  text-align: left;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
/* Outlined speech-bubble tail: a coloured triangle with a neutral one on top. */
.task-note-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--note-tail);
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: var(--note-color);
}
.task-note-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--note-tail);
  margin-top: -2.5px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--bg2);
}
.task-note:hover     > .task-note-bubble,
.task-note:focus     > .task-note-bubble,
.task-note.note-open > .task-note-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-1 * var(--note-tail))) translateY(0) scale(1);
}
/* Narrow screens: re-centre the bubble over the icon so it can't be clipped. */
@media (max-width: 600px) {
  .task-note-bubble {
    transform: translateX(-50%) translateY(6px) scale(.9);
    transform-origin: bottom center;
  }
  .task-note-bubble::before,
  .task-note-bubble::after { left: 50%; }
  .task-note:hover     > .task-note-bubble,
  .task-note:focus     > .task-note-bubble,
  .task-note.note-open > .task-note-bubble {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.post-meta-line { font-size: .8rem; color: var(--muted); margin-top: 6px; }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* The display:flex above otherwise overrides the [hidden] attribute the JS
   sets when only one slide is visible (e.g. after filtering posts by topic),
   leaving the prev/next arrows showing with nothing to page through. */
.slider-controls[hidden] { display: none; }
.slider-prev, .slider-next {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--carousel-bg);
  border: none;
  color: var(--carousel-fg);
  border-radius: 50%;
  font-size: .9rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.slider-prev:hover, .slider-next:hover { background: var(--carousel-bg-hover); color: var(--carousel-fg); }
.slider-dots { display: flex; gap: 5px; align-items: center; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background .15s;
}
.dot.active { background: var(--carousel-dot); }
/* Hybrid pager: collapse a long dot strip into a compact counter */
.slider-dots.dots-collapsed { display: none; }
.slider-counter {
  font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 3.5em; text-align: center;
}
/* Pager kept above the slides so the arrows stay put regardless of how long
   each post is. Borderless: the arrow cluster itself reads as the break above
   the content, so we don't add a horizontal line. */
.slider-controls-top {
  border-top: none;
  border-bottom: none;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 0;
  justify-content: flex-start;
}
.slider-label {
  flex: 1;
  text-align: center;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Quote block ─────────────────────────────────────────────────── */
.quote-block {
  border-left: 3px solid var(--accent);
  margin: 0;
  padding: 8px 16px;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.8;
  word-break: break-word;
}
.quote-block p { margin: 0; }
.quote-block cite {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  font-style: normal;
  margin-top: 6px;
}

/* ── Review stars ────────────────────────────────────────────────── */
.review-stars { display: flex; gap: 3px; margin-bottom: 10px; }
.star { font-size: 1.2rem; color: var(--border); }
.star.filled { color: #e8c040; }

/* ── Character cards ─────────────────────────────────────────────── */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.char-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.char-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.char-trans { font-size: .78rem; color: var(--accent); margin-top: 2px; }
.char-desc { font-size: .8rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* ── Vocab table ─────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
   ORIGINAL "office" style — kept here in case the candy version below
   doesn't win. To restore: delete the CANDY block underneath and
   un-comment this one.

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  table-layout: fixed;
  margin: 12px 0;
}
.vocab-table th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.vocab-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--row-divider);
  vertical-align: top;
  line-height: 1.5;
}
.vocab-table tbody tr {
  transition: background-color .15s ease;
}
.vocab-table tbody tr:hover {
  background: var(--row-hover);
}
.vocab-table th:nth-child(1) { width: 20%; }
.vocab-table th:nth-child(2) { width: 25%; }
.vocab-word { font-size: 1rem; font-weight: 600; color: var(--text); }
.vocab-reading { color: var(--accent); font-size: .85rem; }
   ───────────────────────────────────────────────────────────────────── */

/* ── CANDY style ── glossy pink-grey glass, shrinks to fit content ── */
.vocab-table {
  width: auto;                 /* adapt to content instead of full width */
  max-width: 100%;
  border-collapse: separate;   /* lets us round the corners */
  border-spacing: 0;
  font-size: .88rem;
  table-layout: auto;
  margin: 14px 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(204,170,184,.15), rgba(222,202,210,.07));
  border: 1px solid rgba(196,166,180,.30);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);   /* glossy top sheen */
}
.vocab-table th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a6072;
  padding: 8px 14px;
  background: rgba(196,166,180,.20);
  border-bottom: 1px solid rgba(196,166,180,.34);
}
.vocab-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(196,166,180,.22);
  vertical-align: top;
  line-height: 1.5;
}
.vocab-table tbody tr:last-child td { border-bottom: none; }
.vocab-table tbody tr {
  transition: background-color .15s ease;
}
.vocab-table tbody tr:hover {
  background: rgba(178,134,152,.24);   /* darker pink-grey on hover */
}
.vocab-word { font-size: 1rem; font-weight: 600; color: var(--text); }
.vocab-reading { color: #9c6c80; font-size: .85rem; }

/* ── Chinese text + vocab posts ──────────────────────────────────── */
.zh-text-block {
  font-size: 1.05rem;
  line-height: 1.9;
  white-space: pre-wrap;
}
.post-sentence-source {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin-left: .6em;
}
.zh-highlight {
  text-decoration: underline;
  text-decoration-color: #8d6b74;
  text-underline-offset: 3px;
  border-radius: 3px;
  transition: background-color .12s ease, text-decoration-color .12s ease;
}
.zh-highlight.vocab-active {
  background: rgba(178,134,152,.24);
  text-decoration-color: #9c6c80;
}
.vocab-table tbody tr.vocab-active {
  background: rgba(178,134,152,.24);
}
.zh-section-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* ── Blog ────────────────────────────────────────────────────────── */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.blog-filter-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--border);
  margin: 0 6px;
}
.blog-filter-all { margin-left: auto; }
.blog-topic-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.blog-topic-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: 4px;
}
.blog-filter-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.blog-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.blog-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  justify-content: center;
}
.blog-page-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.blog-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.blog-page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.blog-page-btn:disabled { opacity: .35; cursor: default; }
.blog-page-gap { color: var(--muted); padding: 4px 4px; font-size: .8rem; align-self: center; }

.post-body mark, .diary-freetext mark          { background-color: #f3e1e6; color: #2a0f1a; border-radius: 3px; padding: 0 3px; }
.post-body mark.blue, .diary-freetext mark.blue     { background-color: #dde7ec; color: #0a1a22; }
.post-body mark.green, .diary-freetext mark.green    { background-color: #e6e8d8; color: #141a0a; }
.post-body mark.brown, .diary-freetext mark.brown    { background-color: #ece0dc; color: #1a0e0c; }

/* ── Spoilers ───────────────────────────────────────────────────────────
   Marked in the Study Station editor as <span class="spoiler">…</span>.
   Hidden behind a soft dusty-pink frosted panel until tapped. The text itself
   is transparent and gets NO glow, so the word shapes never trace through (that
   ghosting looked "dirty"); an evenly-filled translucent fill plus backdrop-filter
   gives a smooth frosted-glass cover over whatever's behind it. */
.spoiler {
  --spoiler-blue: 47, 77, 115;
  color: transparent;
  background: rgba(var(--spoiler-blue), .16);
  -webkit-backdrop-filter: blur(13px) saturate(1.05);
  backdrop-filter: blur(13px) saturate(1.05);
  border-radius: 6px;
  padding: 0 4px;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(var(--spoiler-blue), .22);
  -webkit-user-select: none; user-select: none;
  transition: color .2s ease, background .2s ease;
}
.spoiler.revealed {
  color: inherit;
  text-shadow: none;
  background: rgba(var(--spoiler-blue), .06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  cursor: text;
  -webkit-user-select: text; user-select: text;
}

/* Shared warning panel shown on hover over a hidden spoiler (positioned by JS).
   One element reused for every spoiler on the page. */
.spoiler-warning {
  --spoiler-blue: 47, 77, 115;
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 196px;
  max-width: calc(100vw - 16px);
  padding: 15px 16px 13px;
  background: var(--spoiler-panel-bg);
  border: 1.5px solid rgba(var(--spoiler-blue), .55);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) scale(.97);
  transition: opacity .14s ease, transform .14s ease;
}
.spoiler-warning.visible { opacity: 1; transform: none; }
.spoiler-warning-icons { display: flex; align-items: center; justify-content: center; gap: 14px; }
.spoiler-warning-icons svg {
  width: 36px; height: 36px; display: block;
  color: rgb(var(--spoiler-blue));
}
.spoiler-warning-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: rgb(var(--spoiler-blue));
}
.spoiler-warning-sub {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}

/* Summary post: the whole post body is hidden behind a big clickable cover that
   shows only the chapter name + a "(contains spoilers)" notice. Clicking it
   expands the summary; any inline <span class="spoiler"> inside stays blurred
   until separately tapped. Built on a native <details>/<summary>. */
.summary-reveal { --spoiler-blue: 47, 77, 115; }
.summary-reveal-cover {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 26px 20px;
  border: 1.5px solid rgba(var(--spoiler-blue), .4);
  border-radius: 16px;
  background: rgba(var(--spoiler-blue), .1);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  backdrop-filter: blur(2px) saturate(1.05);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.summary-reveal-cover::-webkit-details-marker { display: none; }
.summary-reveal-cover:hover {
  background: rgba(var(--spoiler-blue), .18);
  border-color: rgba(var(--spoiler-blue), .6);
}
.summary-reveal-cover:active { transform: scale(.99); }
.summary-reveal-chapter {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.summary-reveal-warn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(var(--spoiler-blue));
}
.summary-reveal-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.summary-reveal[open] .summary-reveal-cover {
  margin-bottom: 14px;
  background: rgba(var(--spoiler-blue), .06);
  border-style: dashed;
}
.summary-reveal-body { animation: summary-reveal-fade .2s ease; }
@keyframes summary-reveal-fade { from { opacity: 0; } to { opacity: 1; } }
.post-body .emoji, .wrap-text .emoji, .diary-freetext .emoji { height: 1.2em; width: auto; vertical-align: -0.2em; display: inline; margin: 0 1px; border-radius: 0; }
.post-body .emoji-outline, .wrap-text .emoji-outline, .diary-freetext .emoji-outline {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  margin: 0 1px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.post-body img { max-width: 100%; border-radius: 6px; margin: 8px 0; display: block; }
.post-body .img-small  { width: 150px; }
.post-body .img-medium { width: 300px; }
.post-body .img-large  { width: 480px; }

/* ── Post images: captions, centering, float-wrap, side-by-side pairs ── */
.post-body { display: flow-root; }              /* contain floated images */

.post-body figure.post-figure { margin: 14px 0; }
.post-body figure.post-figure img { margin: 0; width: 100%; }
.post-body figure.post-figure figcaption {
  font-size: .85rem; color: var(--muted, #8a8a8a);
  font-style: italic; text-align: center; margin-top: 6px;
}

/* sized figures */
.post-body figure.post-figure.img-small  { width: 150px; }
.post-body figure.post-figure.img-medium { width: 300px; }
.post-body figure.post-figure.img-large  { width: 480px; }

/* centered (on its own line) */
.post-body .img-center { margin-left: auto; margin-right: auto; }
.post-body figure.post-figure.img-center { text-align: center; }

/* float, with text wrapping around */
.post-body figure.post-figure.img-left  { float: left;  margin: 6px 20px 12px 0; max-width: 50%; }
.post-body figure.post-figure.img-right { float: right; margin: 6px 0 12px 20px; max-width: 50%; }

/* side-by-side pair */
.post-body figure.post-figure.img-pair { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; }
.post-body figure.post-figure.img-pair img { flex: 1 1 0; min-width: 0; width: auto; }
.post-body figure.post-figure.img-pair figcaption { flex-basis: 100%; }

/* image with text beside it, both vertically centered */
.post-body .img-beside { display: flex; align-items: center; gap: 22px; margin: 14px 0; }
.post-body .img-beside.img-beside-right { flex-direction: row-reverse; }
.post-body .img-beside > figure.post-figure { margin: 0; flex: 0 0 auto; }
.post-body .img-beside .img-beside-text { flex: 1 1 0; min-width: 0; }
.post-body .img-beside .img-beside-text > :first-child { margin-top: 0; }
.post-body .img-beside .img-beside-text > :last-child { margin-bottom: 0; }

/* on narrow screens, floats and fixed widths become full width */
@media (max-width: 600px) {
  .post-body figure.post-figure.img-left,
  .post-body figure.post-figure.img-right { float: none; max-width: 100%; margin: 12px 0; }
  .post-body figure.post-figure.img-small,
  .post-body figure.post-figure.img-medium,
  .post-body figure.post-figure.img-large { width: auto; max-width: 100%; }
  .post-body .img-beside,
  .post-body .img-beside.img-beside-right { flex-direction: column; align-items: stretch; gap: 10px; }
  .post-body .img-beside > figure.post-figure { width: auto; max-width: 100%; }
}

/* ---- Layout blocks: Team (cards) & Gear (item + stats) ---------------- */
/* The whole team sits on ONE card (a see-through purple-grey panel) to reinforce
   that these characters belong together. Each member is a column: full emote on
   top, name + note below; Genshin members show a random Paimon's Paintings emote.
   Members flow inline (like words in a sentence) and the panel hugs them with
   `width: fit-content` — this wraps only when the row truly runs out of room,
   sidestepping the flex shrink-wrap mis-measurement that bumped the last member
   to a new line. */
.post-body .post-team {
  display: block; width: fit-content; max-width: 100%;
  margin: 10px 0; text-align: center;
  padding: 0; border-radius: 0;
  background: none;          /* no card background */
  border: none;             /* no card border */
  color: var(--text);
}
.post-body .post-team-card {
  display: inline-block; vertical-align: top; text-align: center;
  width: 60px; margin: 3px 4px;
  background: none; border: none; border-radius: 0; padding: 0;
}
.post-body .post-team-card img,
.post-body .post-team-emote {
  display: block; width: 100%; max-width: 56px; aspect-ratio: 1 / 1;
  object-fit: contain;            /* show the whole emote, never cropped */
  border-radius: 0; margin: 0 auto 2px;
}
.post-body .post-team-name { font-weight: 600; font-size: 0.9em; line-height: 1.15; color: var(--text); }
.post-body .post-team-note { font-size: 0.78em; color: var(--muted); margin-top: 1px; }

.post-body .post-gear {
  display: flex; gap: 14px; align-items: flex-start; margin: 16px 0;
  width: fit-content; max-width: 100%;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.post-body .post-gear-img img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px; margin: 0;
}
.post-body .post-gear-body { min-width: 0; }
.post-body .post-gear-name { font-weight: 700; font-size: 1.05em; }
.post-body .post-gear-sub { font-size: 0.85em; opacity: 0.7; margin: 1px 0 6px; }
.post-body .post-gear-stats { list-style: none; padding: 0; margin: 0; }
.post-body .post-gear-stats li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; border-bottom: 1px dashed var(--border); font-size: 0.9em;
}
.post-body .post-gear-stats li::before { content: none; }
.post-body .post-gear-stats li:last-child { border-bottom: none; }
.post-body .post-gear-stats .k { opacity: 0.7; padding-left: 0; }
.post-body .post-gear-stats .v { font-weight: 600; text-align: right; }
@media (max-width: 520px) {
  .post-body .post-gear { flex-direction: column; align-items: center; text-align: center; }
}

/* Layout-block placement: float left/right, center, full width (default) */
.post-body .post-block-left  { float: left;  max-width: 48%; margin: 6px 22px 14px 0; }
.post-body .post-block-right { float: right; max-width: 48%; margin: 6px 0 14px 22px; }
.post-body .post-block-center { max-width: 72%; margin-left: auto; margin-right: auto; }
.post-body .post-team.post-block-center { justify-content: center; }
/* separating lines: above/below, sides, or all around a block */
.post-body .post-ruled-tb  { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: 12px; padding-bottom: 12px; }
.post-body .post-ruled-lr  { border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding-left: 16px; padding-right: 16px; }
.post-body .post-ruled-all { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.post-body hr.post-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; clear: both; }

/* Callout: important text with a vertical accent line, floatable left/right */
.post-body .post-callout {
  background: none;
  border-left: 3px solid var(--accent);
  padding: 4px 4px 4px 22px; margin: 16px 0; font-size: 1.02em;
}
/* floated callouts: 1/3 width, gap from the wrapping text, top-aligned with it.
   The explicit margin here is needed — it overrides both the generic float
   margin and the base callout's `margin: 16px 0` (which would otherwise zero
   the side margin and stick the wrapping text to the line). */
.post-body .post-callout.post-block-left {
  border-left: none; border-right: 3px solid var(--accent);
  max-width: 33%; padding: 0 22px 2px 0; margin: 0 28px 14px 0;
}
.post-body .post-callout.post-block-right {
  border-left: 3px solid var(--accent); border-right: none;
  max-width: 33%; padding: 0 0 2px 22px; margin: 0 0 14px 28px;
}
.post-body .post-callout > :first-child { margin-top: 0; }
.post-body .post-callout > :last-child  { margin-bottom: 0; }

/* Hanzi: single-character flash-card (big character + pinyin + meaning) */
.post-body .post-hanzi {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; margin: 16px 0; padding: 12px 18px;
  width: fit-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: 14px;
}
.post-body .post-hanzi-char { font-size: 5.5rem; line-height: 1.05; font-weight: 500; color: #a84d5e; }
.post-body .post-hanzi-pinyin { font-size: 1.15rem; color: var(--accent); font-weight: 600; }
.post-body .post-hanzi-meaning { font-size: 0.95rem; opacity: 0.85; max-width: 24ch; }
.post-body .post-hanzi-example {
  font-size: 0.9em; opacity: 0.7; margin-top: 8px;
  border-top: 1px dashed var(--border); padding-top: 8px;
}
/* Hanzi placement: centre via auto-margins; floats get extra side breathing room.
   These are more specific than the base .post-hanzi margin so cascade order is moot. */
.post-body .post-hanzi.post-block-center { margin-left: auto; margin-right: auto; }
.post-body .post-hanzi.post-block-left  { margin: 6px 32px 18px 0; }
.post-body .post-hanzi.post-block-right { margin: 6px 0 18px 32px; }

/* Song: header (title + singer + tap-to-play compact player), optional credits,
   lyric excerpt and vocabulary table. The player stays hidden until "Listen". */
/* Flattened: no border/padding box, so the lyrics, vocab table and comment all
   flow at full post width (the vocab table was cramped on phones inside the old
   box). On the blog the title/singer/credits move up into the post header
   (.ph-song below) and are hidden here; on the diary (no header) they stay. */
.post-body .post-song { margin: 18px 0; }
/* No rule between lyrics → vocab table → comment; their own spacing separates them. */
.post-body .post-song .zh-section-sep { display: none; }
.post-body .post-song-comment { margin-top: 12px; }
.blog-post .post-body .post-song-title,
.blog-post .post-body .post-song-by,
.blog-post .post-body .post-song-credits { display: none; }
.blog-post .post-body .post-song-head { display: block; }
.blog-post .post-body .post-song-listen { margin-left: 0; }
.post-body .post-song-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
}
.post-body .post-song-title { font-weight: 700; font-size: 1.15rem; }
.post-body .post-song-by { color: var(--muted); font-size: 0.92rem; }
.post-body .post-song-listen {
  margin-left: auto; flex-shrink: 0; cursor: pointer;
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 999px;
  padding: 3px 14px; font-size: 0.85rem; font-weight: 600;
  line-height: 1.6; text-decoration: none; white-space: nowrap;
}
.post-body .post-song-listen:hover,
.post-body .post-song-listen.is-playing { background: var(--accent); color: var(--bg2); }
.post-body .post-song-credits {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  font-size: 0.82rem; color: var(--muted); margin-top: 5px;
}
.post-body .post-song-credits .post-song-cred .k { opacity: 0.7; margin-right: 3px; }
.post-body .post-song-channel { color: var(--accent); text-decoration: none; }
.post-body .post-song-channel:hover { text-decoration: underline; }
.post-body .post-song-player { margin: 12px 0 2px; width: min(360px, 100%); }
.post-body .post-song-player[hidden] { display: none; }
.post-body .post-song-player iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; display: block;
}
.post-body .post-song .zh-text-block { margin-top: 12px; }
/* Quoted lyric lines: each prefixed with a music-note icon; a ⋯ marks a jump to
   a non-adjacent part of the song so separate excerpts don't read as one block. */
.post-body .post-song-lyrics { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.post-body .song-lyric-line {
  position: relative; padding-left: 26px;
  font-size: 1.05rem; line-height: 1.7;
}
.post-body .song-lyric-line::before {
  content: ""; position: absolute; left: 2px; top: 0.42em;
  width: 14px; height: 14px; background-color: var(--accent);
  -webkit-mask-image: var(--quaver); mask-image: var(--quaver);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.post-body .song-lyric-gap {
  color: var(--muted); text-align: center; letter-spacing: 3px;
  line-height: 1; margin: 1px 0;
}
.post-body .post-song-comment { margin-top: 4px; font-size: 0.97em; opacity: 0.92; }

@media (max-width: 600px) {
  .post-body .post-block-left, .post-body .post-block-right { float: none; max-width: 100%; margin: 14px 0; }
  .post-body .post-callout.post-block-left, .post-body .post-callout.post-block-right { max-width: 100%; }
  .post-body .post-block-center { max-width: 100%; }
}

.post-body p { margin: 0 0 0.7em; }
.post-body p:last-child { margin-bottom: 0; }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul li { position: relative; padding-left: 1.3em; margin-bottom: .1em; }
.post-body ul li::before {
  content: '';
  position: absolute;
  left: 0.1em;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background-color: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 12.94,5.95 18.56,7.22 14.76,11.55 15.29,17.28 10,15 4.71,17.28 5.25,11.55 1.44,7.22 7.06,5.95'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 12.94,5.95 18.56,7.22 14.76,11.55 15.29,17.28 10,15 4.71,17.28 5.25,11.55 1.44,7.22 7.06,5.95'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blog-list { display: flex; flex-direction: column; gap: 20px; }
.blog-post {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.blog-post-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* Post-type pills — one colour per type (set in the colour picker). */
.post-type-badge {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 11px; border-radius: 20px;
  background: #8a8f98; color: #fff;
}
.post-type-about-me { background: #5a5870; color: #ffffff; }
.post-type-audiobook { background: #94818c; color: #ffffff; }
.post-type-audiobook_entry { background: #94818c; color: #ffffff; }
.post-type-birthday-mail { background: #637687; color: #ffffff; }
.post-type-characters { background: #ab577f; color: #ffffff; }
.post-type-diary { background: #5d5e87; color: #ffffff; }
.post-type-activity { background: #5b7571; color: #ffffff; }
.post-type-exploration { background: #616580; color: #ffffff; }
.post-type-film { background: #9e5d83; color: #ffffff; }
.post-type-film_entry { background: #9e5d83; color: #ffffff; }
.post-type-film_review { background: #9e5d83; color: #ffffff; }
.post-type-series_review { background: #693c56; color: #ffffff; }
.post-type-lore { background: #856779; color: #ffffff; }
.post-type-monthly-wrapup { background: #335687; color: #ffffff; }
.post-type-newest-character { background: #8a5b73; color: #ffffff; }
.post-type-newest-character_entry { background: #8a5b73; color: #ffffff; }
.post-type-post { background: #8c808a; color: #ffffff; }
.post-type-quote { background: #8a9687; color: #ffffff; }
.post-type-review { background: #5a7891; color: #ffffff; }
.post-type-sentence { background: #738782; color: #ffffff; }
.post-type-series { background: #693c56; color: #ffffff; }
.post-type-series_entry { background: #693c56; color: #ffffff; }
.post-type-story { background: #779faf; color: #ffffff; }
.post-type-summary { background: #706b80; color: #ffffff; }
.post-type-todo { background: #b08090; color: #ffffff; }
.post-type-update { background: #947c86; color: #ffffff; }
.post-type-vocabulary { background: #948e7c; color: #ffffff; }

/* Update progress */
.update-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.progress-bar-wrap { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--learning); border-radius: 3px; transition: width .3s; }
.progress-pct { font-size: .8rem; font-weight: 600; color: var(--learning); min-width: 36px; }
.progress-label { font-size: .85rem; font-weight: 600; color: var(--learning); }

/* Book card progress bar */
.book-card-progress { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bg3); }
.book-card-progress .progress-bar-wrap { flex: 1; }
.book-card-progress .progress-pct { min-width: 32px; }

/* Story filter */
.story-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.story-filter-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .78rem;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.story-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.story-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.story-filter-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 3px 14px;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color .12s;
}
.story-filter-select:hover,
.story-filter-select:focus { border-color: var(--accent); outline: none; }
.slide-filtered { display: none !important; }
.dot-filtered   { display: none !important; }

/* Story event labels */
.story-labels { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.story-ver { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.story-zh { font-size: 1.05rem; color: var(--accent); }

/* ── Chapter / short-story attachment chip ──────────────────────────────────
   Shown on vocabulary & character posts that belong to a chapter or short
   story of a book (the blog feed and individual book pages). */
.chapter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-size: .78rem;
  color: var(--muted);
  padding: 0;
  margin-bottom: 10px;
}
.chapter-chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }
.chapter-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Event block: version poster + type badge ───────────────────────────── */
.story-event { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.story-poster {
  width: 132px; flex: 0 0 132px; border-radius: 8px;
  object-fit: cover; border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.story-event-meta { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.story-event-name { font-size: 1.15rem; color: var(--accent); font-weight: 600; }
.story-event-rom { font-size: .85rem; color: var(--muted); }
.story-event-en { font-size: .85rem; color: var(--muted); }
.story-event-ver { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.event-badge {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 4px;
  color: #fff; background: #8a8f98; /* default */
}
/* Per-label colours (set in the colour picker). */
.event-badge[data-etype="archon quest"] { background: #ddc3ca; color: #3a342e; }
.event-badge[data-etype="story quest"] { background: #d2cedb; color: #3a342e; }
.event-badge[data-etype="world quest"] { background: #d9d5bd; color: #3a342e; }
.event-badge[data-etype="region"] { background: #bdced9; color: #3a342e; }
.event-badge[data-etype="event"] { background: #e0ccc1; color: #3a342e; }
.event-badge[data-etype="main story"] { background: #ddc3ca; color: #3a342e; }
.event-badge[data-etype="event story"] { background: #ddc3ca; color: #3a342e; }
.event-badge[data-etype="character story"] { background: #d2cedb; color: #3a342e; }
.event-badge[data-etype="anecdote"] { background: #e0ccc1; color: #3a342e; }
@media (max-width: 520px) {
  .story-poster { width: 92px; flex-basis: 92px; }
}

/* Activity post labels (fixed combat-mode / anecdote / side-quest badges). The
   background colour is set inline from the label's palette. */
.activity-badge {
  display: inline-block; align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 4px;
  color: #3a342e; background: #c5d6d4;
}
/* Game-page Activity header: label + detail rows + character emote (Anecdotes). */
.activity-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.activity-emote { width: 64px; height: 64px; flex: 0 0 64px; object-fit: contain; }
.activity-head-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.activity-row { font-size: .95rem; color: var(--text); font-weight: 600; }
.nc-head { align-items: center; }
.nc-head-emote { width: 62px; height: 62px; flex: 0 0 62px; }
.nc-head-name { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.bday-mail-title { margin-top: 8px; }

/* Newest Character checkboxes */
.nc-checks { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nc-check { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 20px; border: 1.5px solid; }
.nc-check.done    { color: #7a6a99; border-color: #b9add0; background: #ece6f3; }
.nc-check.pending { color: var(--muted); border-color: var(--border); }
.nc-tabs .nc-check { cursor: pointer; user-select: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.nc-tabs .nc-check:hover { box-shadow: 0 0 0 2px rgba(149,134,179,.18); }
.nc-tabs .nc-check.active { color: #fff; background: #9586b3; border-color: #9586b3; }
.nc-tabs .nc-check.pending.active { background: var(--muted); border-color: var(--muted); color: #fff; }
.nc-empty { color: var(--muted); font-size: .85rem; font-style: italic; padding: 10px 4px; }

/* Story chapter checklist: muted purple-grey until studied, then bold purple-pink + ✓ */
.nc-chapters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 12px; }
.nc-chapter {
  font-size: .85rem;
  color: #b0a4c4;
  padding: 2px 2px;
}
.nc-chapter.done {
  color: #b5478f;
  font-weight: 700;
}
.nc-chapter.done::before { content: "✓ "; color: #b5478f; }
.nc-entries .nc-entry + .nc-entry { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.nc-entry { margin-top: 4px; }
.nc-entry-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.nc-entry-heading { font-size: .88rem; font-weight: 600; color: var(--text); }
.nc-entry-date { font-size: .75rem; color: var(--muted); flex-shrink: 0; }
.nc-pulls-row { margin-top: 8px; display: flex; }

/* Compact accordion for a character's log entries (game page). Each entry
   collapses to a dated summary row; the newest per category opens by default. */
.nc-accordion .nc-entry { margin-top: 0; }
.nc-accordion .nc-entry + .nc-entry { margin-top: 0; padding-top: 0; border-top: none; }
.nc-entry-summary {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; margin: 0; padding: 8px 2px;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.nc-entry-summary .nc-entry-heading,
.nc-entry-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-entry-preview { font-size: .82rem; color: var(--muted); }
.nc-entry-twisty { flex-shrink: 0; color: var(--muted); font-size: .8rem; transition: transform .15s ease; }
.nc-entry.open > .nc-entry-summary .nc-entry-twisty { transform: rotate(90deg); }
.nc-entry-summary:hover .nc-entry-twisty,
.nc-entry-summary:hover .nc-entry-preview { color: var(--accent); }
.nc-entry-body { display: none; padding: 2px 2px 10px; }
.nc-entry.open > .nc-entry-body { display: block; }
/* A category's lone entry shows plainly (no collapsible row label). */
.nc-accordion .nc-entry-single { padding: 8px 2px; }
.nc-entry-single .nc-entry-hdr { margin-bottom: 6px; }
.nc-built-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 4px;
  margin: 8px 0 10px;
  font-size: .9rem;
}
.nc-built-list dt { font-weight: 600; color: var(--muted); }
.nc-built-list dd { margin: 0; color: var(--text); }
.nc-pulls-pill {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 11px;
  border-radius: 12px;
  color: #a67a86;
  border: 1px solid #ead5dc;
  background: #f5e7ec;
}
.nc-entry-sep { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

.blog-tag {
  font-size: .75rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 1px 7px;
  transition: all .12s;
}
.blog-tag:hover { border-color: var(--accent); color: var(--accent); }

/* Free-topic tags rendered as small SVG icons (instead of a word pill). */
.topic-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.topic-icon svg { width: 22px; height: 22px; display: block; }
.blog-tag-icon { background: none; border: none; padding: 0; border-radius: 0; }
.blog-tag-icon:hover { background: none; border: none; transform: translateY(-1px); }
.blog-filter-icon { display: inline-flex; align-items: center; padding: 4px 10px; }
.blog-filter-icon .topic-icon svg { width: 20px; height: 20px; }
.blog-filter-icon.active { background: var(--bg3); border-color: var(--accent); }
.blog-date { font-size: .75rem; color: var(--muted); margin-left: auto; }

/* Post header: 3 columns (basic info | emote+game+current version | the post's
   own version/event) separated by vertical rules, with a horizontal rule below. */
.post-header { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
/* nowrap keeps the version/event column on the right at tablet widths (the long
   Chinese event names used to push it onto a second line); min-width:0 lets the
   columns shrink and wrap their own text instead. Phones stack it (media query). */
.ph-row { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 16px; }
.ph-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ph-basic { align-items: center; gap: 8px; flex: 0 0 auto; }
.ph-date { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ph-topicline { width: 100%; display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
.ph-topic { display: inline-flex; line-height: 0; }
.ph-topicline svg { width: 30px; height: 30px; display: block; }
.ph-div { width: 1px; background: var(--border); align-self: stretch; flex: 0 0 auto; }
.ph-game { flex-direction: row; align-items: center; gap: 11px; flex: 0 1 auto; }
.ph-emote { width: 74px; height: 74px; flex: 0 0 74px; display: flex; align-items: center; justify-content: center; }
.ph-emote img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-game-name { font-weight: 700; color: var(--accent); font-size: 1rem; }
.ph-current { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
/* Version column: poster on the left, version/event text on the right. Takes the
   remaining width and is the one that wraps its text rather than dropping below. */
.ph-ver { flex: 1 1 auto; flex-direction: row; align-items: flex-start; gap: 11px; }
.ph-ver.ph-ver-center { align-items: center; }
.ph-poster { width: 64px; flex: 0 0 64px; border-radius: 6px; object-fit: cover; align-self: flex-start; }
.ph-ver-emote { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; }
.ph-ver-emote img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-ver-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ph-gv { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.ph-nc-cat { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ph-nc-name { font-size: 1rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.ph-vname { font-size: .92rem; color: var(--text); margin-bottom: 5px; }
.ph-evrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.ph-evname { font-size: 1.02rem; font-weight: 600; color: var(--text); }
.ph-actrow .ph-evname { font-size: .92rem; font-weight: 400; }
.ph-rom { font-size: .82rem; color: var(--muted); }
/* Song column: title/singer/credits lifted out of the body's song block. */
.ph-song { flex: 1 1 auto; gap: 4px; }
.ph-song-title { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.ph-song-by { font-size: .9rem; color: var(--muted); }
.ph-song-credits { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.ph-song-credits .ph-song-cred .k { opacity: .7; margin-right: 3px; }
.ph-song-channel { color: var(--accent); text-decoration: none; }
.ph-song-channel:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .ph-row { gap: 12px 14px; flex-wrap: wrap; }
  .ph-div { display: none; }
  .ph-emote { width: 60px; height: 60px; flex-basis: 60px; }
  .ph-ver { flex-basis: 100%; }
  .ph-poster { width: 56px; flex-basis: 56px; }
  .ph-song { flex-basis: 100%; }
}
.blog-post-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
/* Small character emote before a birthday-mail / newest-character title (the
   title is the character's name). Sized in em so it scales with each context's
   title (blog, game, diary). */
.title-emote { height: 1.5em; width: 1.5em; object-fit: contain; vertical-align: -0.42em; margin-right: 5px; display: inline-block; }
.blog-for-label { font-size: .75rem; color: var(--muted); }
.blog-book-ref { position: relative; display: inline-flex; align-items: center; }
.blog-book-link { font-size: .82rem; font-weight: 600; color: var(--text); transition: color .12s; }
.blog-book-link:hover { color: var(--accent); }
.blog-book-author { font-size: .75rem; font-weight: 400; color: var(--muted); }
.blog-cover-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
}
.blog-book-ref:hover .blog-cover-popup { display: block; }
.blog-cover-popup img { display: block; width: 90px; height: auto; border-radius: 3px; }

/* Exploration two-column layout (blog timeline) */
.expl-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.expl-left {
  width: 40%;
  flex-shrink: 0;
  padding-right: 16px;
}
.expl-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 16px;
}
.expl-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.expl-name {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.expl-kind {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.expl-pinyin {
  font-size: .8rem;
  font-weight: 400;
  color: var(--muted);
}
.expl-banner {
  display: block;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 8px;
}
.expl-chapter {
  font-size: .85rem;
  margin-bottom: 8px;
  color: var(--text);
}
.expl-progress { margin-top: 0; }
.expl-progress .progress-bar { background: #c26d98; }
.expl-progress .progress-pct { color: #c26d98; }

/* Phone in portrait: stack image above text so the text isn't cramped.
   Landscape orientation (landscape phone, tablet, PC) keeps side-by-side. */
@media (orientation: portrait) and (max-width: 600px) {
  .expl-layout { flex-direction: column; }
  .expl-left { width: 100%; padding-right: 0; }
  .expl-divider {
    width: auto;
    height: 1px;
    margin: 14px 0;
  }
}

/* Exploration name on game page */
.post-meta-line { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }

/* Level badges */
.expl-level {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid;
  margin-top: 4px;
}
.expl-level-easy     { color: var(--learning); border-color: var(--learning); background: rgba(122,158,106,.1); }
.expl-level-normal   { color: var(--accent);   border-color: var(--accent);   background: rgba(122,176,204,.1); }
.expl-level-difficult{ color: var(--new);      border-color: var(--new);      background: rgba(176,88,64,.1); }

/* Lore cards */
.lore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media (min-width: 720px) {
  .lore-grid { grid-template-columns: 1fr 1fr; }
}
.lore-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg2, #fafafa);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 10px;
}
.lore-card-img-link {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}
.lore-card-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #e0e0e0);
  cursor: zoom-in;
  transition: transform .15s ease;
}
.lore-card-img:hover { transform: scale(1.03); }
.lore-card-body { flex: 1; min-width: 0; }
.lore-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.lore-card-zh { font-size: 1.05rem; font-weight: 600; }
.lore-card-py { color: var(--muted); font-size: .9rem; }
.lore-card-desc {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Compact book card on blog timeline */
.post-book-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 0;
  color: var(--text);
  text-decoration: none;
}
.post-book-card-cover {
  width: 50px;
  height: auto;
  border-radius: 3px;
  flex-shrink: 0;
  object-fit: cover;
}
.post-book-card-cover-empty {
  width: 50px;
  height: 68px;
  background: var(--bg3);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: var(--muted);
  text-align: center;
  padding: 4px;
}
.post-book-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.post-book-card-title { font-size: .85rem; font-weight: 700; }
.post-book-card-meta  { font-size: .75rem; color: var(--muted); }
.post-book-card-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* ── Stats page ──────────────────────────────────────────────────── */
.filter-row { margin-bottom: 24px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.filter-pill:hover { border-color: var(--accent); color: var(--text); }
.filter-pill.active {
  background: rgba(122,176,204,.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.filter-pill-sm { padding: 2px 10px; font-size: .73rem; }

.stats-top-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .stats-top-row { grid-template-columns: 1fr; } }

.chart-box { position: relative; height: 260px; }

.stats-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.highlight-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hl-num {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.hl-sub {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 2px;
}
.hl-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.hl-label { font-size: .75rem; color: var(--muted); }

/* Most-read authors */
.authors-list { display: flex; flex-direction: column; }
.author-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.author-row:last-child { border-bottom: none; }
.author-name { font-size: .95rem; font-weight: 600; color: var(--text); }
.author-rom  { font-size: .78rem; font-weight: 400; color: var(--muted); margin-left: 8px; }
.author-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* Timeline */
.timeline-scroll { overflow-x: auto; }
.timeline-inner  { min-width: 560px; position: relative; }

.tl-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tl-lang-label {
  width: 65px;
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--muted);
  text-align: right;
}
.tl-lang-track {
  flex: 1;
  position: relative;
  height: 20px;
  overflow: visible;
}

.tl-month-label {
  position: absolute;
  font-size: .62rem;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(-50%);
  user-select: none;
}

.timeline-books { position: relative; }

.tl-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.45;
  pointer-events: none;
}

.tl-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 4px;
  min-width: 6px;
  cursor: default;
  transition: filter .15s;
}
.tl-bar:hover { filter: brightness(1.2); }
.tl-bar-current { opacity: 0.6; }

.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tl-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--muted);
}
.tl-legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tl-tooltip {
  display: none;
  position: fixed;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .75rem;
  line-height: 1.6;
  padding: 6px 10px;
  border-radius: 7px;
  pointer-events: none;
  z-index: 999;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
}
.tl-tooltip-lang { color: var(--muted); font-size: .7rem; }

/* ── Theme toggle ────────────────────────────────────────────────── */
.header-btns {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.header-btn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(122,176,204,.3);
  color: #7a9eb8;
  border-radius: 6px;
  padding: 4px 11px;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.header-btn:hover { border-color: #7ab0cc; color: #d8eef8; }
.header-btn.off { opacity: 0.4; }

@media (max-width: 600px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 16px;
    gap: 8px 12px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-link {
    padding: 4px 9px;
    font-size: .82rem;
  }
  .header-btns {
    margin-left: auto;
  }
}

/* ── Words grid (Study Station vocabulary) ───────────────────────── */
.words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.words-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  margin-top: 10px;
}
.word-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  min-width: 0;
}
.word-zh { font-size: 1.25rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.word-py { font-size: .68rem; color: var(--accent); line-height: 1.3; }
.word-en { font-size: .68rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.words-more { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.word-card-known { opacity: .55; position: relative; }
.word-card-known::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: .7rem;
  color: var(--known);
  font-weight: 700;
}

/* ── Game list ───────────────────────────────────────────────────── */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.game-list .book-card {
  flex-direction: row;
}
.game-list .book-card .book-card-cover {
  width: 130px;
  flex-shrink: 0;
}

/* ── Audiobooks ─────────────────────────────────────────────────────────── */
.ab-grid { display: flex; flex-direction: column; gap: 16px; }

.ab-full-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }

.ab-header { display: flex; gap: 16px; align-items: flex-start; }
.ab-cover { width: 90px; flex-shrink: 0; border-radius: 4px; object-fit: cover; }
.ab-cover-placeholder { width: 90px; min-height: 130px; background: var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); text-align: center; padding: 6px; }
.ab-meta { flex: 1; min-width: 0; }
.ab-title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.ab-author { font-size: .9rem; color: var(--text); margin-bottom: 8px; }
.ab-meta-cols { display: flex; flex-wrap: wrap; gap: 2px 28px; margin-top: 12px; }
.ab-meta-col { flex: 1 1 200px; min-width: 0; }
.ab-col-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ab-meta-row { font-size: .8rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.ab-meta-label { font-weight: 600; color: var(--text-dim, var(--muted)); }
.ab-dates { margin-top: 8px; display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.ab-date-sep { color: var(--border); }

.ab-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.ab-stories-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.ab-stories-list { margin: 0; padding: 0 0 0 16px; font-size: .85rem; color: var(--text); line-height: 1.7; }
.ab-story-author { color: var(--muted); }

.ab-description { font-size: .88rem; }

.ab-entries { display: flex; flex-direction: column; gap: 12px; }
.ab-entry-date { font-size: .75rem; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.ab-entry-text { font-size: .88rem; }

/* Blog timeline inline card */
.ab-expand-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ab-expand-sep { width: 1px; height: 13px; background: var(--border); flex-shrink: 0; }
.ab-expand-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 11px;
  transition: color .12s, border-color .12s;
}
.ab-expand-btn:hover { color: var(--accent); border-color: var(--accent); }
.ab-card-inline { display: flex; gap: 12px; align-items: flex-start; }
.ab-card-cover { width: 54px; flex-shrink: 0; border-radius: 3px; object-fit: cover; }
.ab-card-right { flex: 1; min-width: 0; }
.ab-card-author { font-size: .88rem; color: var(--text); margin-bottom: 4px; }
.ab-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ab-tag { font-size: .72rem; background: var(--border); border-radius: 3px; padding: 1px 6px; color: var(--muted); }
.ab-latest-entry { font-size: .82rem; color: var(--muted); }
.ab-entry-date { font-size: .75rem; font-weight: 600; margin-right: 4px; }
.ab-entry-text { color: var(--muted); }

.ab-update-card { display: flex; flex-direction: column; gap: 10px; }
.ab-update-header { display: flex; gap: 10px; align-items: center; }
.ab-update-cover { width: 36px; flex-shrink: 0; border-radius: 3px; object-fit: cover; }
.ab-update-meta { min-width: 0; }
.ab-update-title { font-size: .88rem; font-weight: 600; color: var(--text); }
.ab-update-author { font-size: .8rem; color: var(--muted); }
.ab-update-text { font-size: .9rem; }

/* ── Film & Series ───────────────────────────────────────── */
.fs-type-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--border);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fs-type-series { background: var(--accent); color: var(--bg); }
.fs-type-film   { background: var(--accent2, var(--accent)); color: var(--bg); }
.fs-section-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 8px 0 4px;
}
.fs-cast-list { list-style: none; padding: 0; margin: 0; }
.fs-cast-item { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.fs-cast-item:last-child { border-bottom: none; }
.fs-cast-char { font-weight: 600; color: var(--text); }
.fs-cast-actor { color: var(--text); }
.fs-cast-rom { color: var(--muted); font-size: .85em; }
.fs-cast-sep { color: var(--muted); }
.fs-cast-desc { font-size: .85rem; color: var(--muted); margin-top: 2px; }

/* Episode tracker dots */
.fs-ep-track { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.fs-ep-dot {
  width: 24px; height: 24px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--border);
  background: transparent; color: var(--muted);
  font-size: .68rem; font-weight: 600;
}
.fs-ep-dot.watched {
  background: color-mix(in srgb, var(--review) 28%, transparent);
  border-color: color-mix(in srgb, var(--review) 55%, transparent);
  color: var(--text);
}

/* Daily Quests — long-running project headings */
.quest-project-head {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 0 5px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
.quest-body > .quest-project-head:first-child { margin-top: 0; }
.quest-cal-icon { width: 14px; height: 14px; flex-shrink: 0; }
.quest-project-name { line-height: 1.2; }
.quest-sep { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* Collapsible projects (compact homepage view) */
.quest-project-fold { margin: 0; }
.quest-project-fold + .quest-project-fold { border-top: 1px solid var(--border); }
summary.quest-project-head {
  cursor: pointer; list-style: none; user-select: none;
  margin: 0; padding: 8px 0;
}
summary.quest-project-head::-webkit-details-marker { display: none; }
.quest-project-fold .quest-project-name { flex: 1; }
.quest-project-count {
  font-size: .72rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.quest-fold-caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform .15s; }
.quest-project-fold[open] .quest-fold-caret { transform: rotate(90deg); }
.quest-fold-body { padding: 0 0 8px 22px; }

/* ── Diary page ──────────────────────────────────────────────────────────── */
.diary-page { max-width: 100%; margin: 0 auto; }
.diary-empty { color: var(--muted); }
.diary-month-hidden { display: none; }
.diary-month-label {
  font-size: 1.05rem; color: var(--muted); font-weight: 600;
  margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

.diary-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; position: relative;
}
.diary-card-row { display: flex; gap: 16px; align-items: flex-start; }
.diary-card-main { flex: 1 1 auto; min-width: 0; }
.diary-card-head { display: flex; align-items: flex-start; gap: 12px; }

.diary-daynum {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 64px; height: 70px; border-radius: 10px;
  background: var(--row-hover); border: 1px solid var(--border); line-height: 1;
}
.diary-daynum .dn-month { font-size: .72rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.diary-daynum .dn-num { font-size: 1.7rem; font-weight: 700; color: var(--text); margin-top: 3px; }
.diary-daynum .dn-wd  { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }

.diary-headcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.diary-headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.diary-weather { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.diary-weather-svg { width: 26px; height: 26px; display: block; }
.diary-temps { font-size: .9rem; color: var(--text); display: inline-flex; gap: 6px; }
.diary-temps .t-lo { color: var(--muted); }
.diary-mood-bolt { display: inline-flex; }
.diary-mood-bolt svg { width: 22px; height: 22px; display: block; }
.diary-fulldate { font-size: .9rem; color: var(--muted); }

.diary-busy-col {
  flex: 0 0 auto; width: 88px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; padding-top: 2px;
}
.diary-busy-label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.diary-busy-cover-lg { width: 100%; max-width: 78px; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.diary-busy-emote { width: 72px; height: 72px; object-fit: contain; }
.diary-ver { margin-bottom: 8px; }

/* Posts section: topic filter + side-arrow carousel */
.diary-post-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.diary-pf-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 20px; padding: 4px 14px; font-size: .8rem; font-family: inherit;
  cursor: pointer; transition: all .12s; display: inline-flex; align-items: center;
}
.diary-pf-btn:hover { border-color: var(--accent); color: var(--text); }
.diary-pf-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.diary-pf-icon { padding: 4px 10px; }
.diary-pf-icon .topic-icon svg { width: 20px; height: 20px; }
/* Light-coloured icons look poor on the blue accent fill, so selected icon
   filters get the lighter treatment the blog uses (.blog-filter-icon.active). */
.diary-pf-icon.active { background: var(--bg3); border-color: var(--accent); color: var(--muted); }

.diary-posts-track { min-width: 0; }
.diary-post-slide { display: none; }
.diary-post-slide.active { display: block; }
.diary-busy-chip {
  font-size: .82rem; color: var(--text); background: var(--row-hover);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
}

.diary-bookmark {
  flex: 0 0 auto; background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 2px 4px; border-radius: 8px;
}
.diary-bookmark:hover { color: var(--accent); background: var(--row-hover); }
.diary-bookmark svg { width: 22px; height: 22px; display: block; }

.diary-freetext { margin: 10px 2px 4px; color: var(--text); line-height: 1.6; }
.diary-freetext p:first-child { margin-top: 6px; }

.diary-expand {
  margin-top: 8px; background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: .85rem; padding: 4px 0; font: inherit; font-size: .85rem;
}
.diary-expand:hover { text-decoration: underline; }

.diary-body { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.diary-flashcards {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  font-size: .85rem; color: var(--muted);
}
.diary-flashcards strong { color: var(--text); font-weight: 700; }
.diary-soon { color: var(--muted); font-size: .85rem; margin: 12px 2px 2px; font-style: italic; }

/* ── Diary month calendar ──────────────────────────────────────────────── */
/* The calendar is purely a navigation shortcut (tap a day to jump to its card),
   so it's kept small and centred — a compact mini-month, not a data display. */
.diary-cal { max-width: 320px; margin: 8px auto 22px; }
.diary-cal-head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 10px;
}
.diary-cal-label { font-size: 1rem; font-weight: 700; color: var(--text);
  min-width: 9em; text-align: center; }
/* Calendar accent — a soft purple, kept local so the site-wide slideshow
   pink (the --carousel-* vars) is left untouched. */
.diary-page { --cal-accent: #95a04b; --cal-accent-soft: rgba(149, 160, 75, .16); }

/* Month arrows: soft purple circle with a purple glyph; fills solid on hover. */
.diary-cal-nav {
  flex: 0 0 auto; background: var(--cal-accent-soft); border: none; color: var(--cal-accent);
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: .75rem;
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
  transition: background .15s, color .15s;
}
.diary-cal-nav:hover { background: var(--cal-accent); color: #fff; }

.diary-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.diary-cal-dow {
  text-align: center; font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px;
}
/* Each day is a small circle. Empty days are just a dimmed number; days with an
   entry get a soft purple circle with a purple number. On hover the circle fills
   solid, the number turns white, and it lifts slightly — a clear "tap me" cue. */
.diary-cal-cell {
  aspect-ratio: 1 / 1; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.diary-cal-cell.has-entry {
  background: var(--cal-accent-soft); cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.diary-cal-cell.has-entry:hover,
.diary-cal-cell.has-entry:focus-visible {
  background: var(--cal-accent); outline: none;
  transform: scale(1.1); box-shadow: 0 2px 9px rgba(168, 128, 167, .5);
}
.diary-cal-cell .cal-dnum {
  font-size: .8rem; font-weight: 600; line-height: 1; color: var(--muted); opacity: .5;
  transition: color .15s;
}
.diary-cal-cell.has-entry .cal-dnum { color: var(--cal-accent); opacity: 1; }
.diary-cal-cell.has-entry:hover .cal-dnum,
.diary-cal-cell.has-entry:focus-visible .cal-dnum { color: #fff; }

/* a jumped-to card clears the sticky bar, and flashes briefly to orient you */
.diary-card { scroll-margin-top: 108px; }
.diary-card-flash { animation: diary-flash 1.2s ease; }
@keyframes diary-flash { 0%, 100% { box-shadow: none; } 28% { box-shadow: 0 0 0 2px var(--accent); } }

/* ── Sticky month bar (shows once the calendar scrolls away) ─────────────── */
.diary-monthbar {
  /* Fixed (not sticky) so showing/hiding it never reflows the page — otherwise
     it pushes content down on appearing, which can also re-trigger the scroll
     check and make the bar flicker. `top` is set from JS to the header height. */
  position: fixed; top: 52px; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 12px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.diary-monthbar[hidden] { display: none; }
.diary-monthbar-label { font-weight: 700; min-width: 8em; text-align: center; }
.diary-monthbar-cal {
  background: var(--cal-accent-soft); border: none; color: var(--cal-accent);
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.diary-monthbar-cal:hover { background: var(--cal-accent); color: #fff; }
.diary-monthbar-cal svg { width: 18px; height: 18px; }

/* ── Calendar popover (dropped from the sticky bar) ──────────────────────── */
.diary-cal-pop {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px 16px;
}
.diary-cal-pop[hidden] { display: none; }
.diary-cal-pop-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.diary-cal-pop-panel {
  position: relative; width: min(420px, 100%);
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}
.diary-cal-pop-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-weight: 700; }
.diary-cal-pop-close { background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; font-family: inherit; }
.diary-cal-pop-close:hover { color: var(--text); }
.diary-cal-pop .diary-cal { margin: 0 auto; }

/* Daily-quest popup. The whole overlay scrolls (not the inner body), so the
   task-note speech bubbles can spill past the panel edges without being clipped. */
.diary-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 6vh 16px 48px;
}
.diary-modal[hidden] { display: none; }
.diary-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.diary-modal-panel {
  position: relative; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; max-width: 560px; width: 100%;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.diary-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.diary-modal-title { font-weight: 600; color: var(--text); }
.diary-modal-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.diary-modal-close:hover { color: var(--text); }
.diary-modal-body { padding: 18px; overflow: visible; color: var(--text); line-height: 1.6; }

@media (max-width: 560px) {
  .diary-card-row { flex-direction: column; }
  .diary-busy-col { flex-direction: row; width: auto; align-items: center; gap: 10px; }
  .diary-busy-cover-lg { max-width: 56px; }
}

/* ── Diary: per-day sections (Books) ─────────────────────────────────────── */
.diary-section { margin-top: 0; }
.diary-section + .diary-section {
  margin-top: 32px; padding-top: 32px; position: relative;
}
.diary-section-title { display: none; }
.diary-book {
  border: none; border-radius: 0; padding: 0;
  margin-bottom: 0; background: none;
}
/* Divider between sibling books / games within a section, matching the
   separators used between the main sections (posts / books / games). */
.diary-section > .diary-book + .diary-book {
  margin-top: 26px; padding-top: 26px; position: relative;
}
/* Decorative divider — a short horizontal line centred in the middle, replacing
   the old full-width rule both between main sections and between sibling
   books/games (and the Other column split below). Same colour throughout. */
.diary-section + .diary-section::before,
.diary-section > .diary-book + .diary-book::before,
.diary-other-col + .diary-other-col::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 90px; height: 3px; border-radius: 3px;
  background: var(--accent);
  pointer-events: none;
}
.diary-book-top { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.diary-book-id { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 240px; min-width: 0; }
/* When a book/game has activity but no posts below, the Activity card used to
   be stranded on the right with a big gap. Instead, stack the row so the card
   drops directly below the title (align-items:flex-start keeps it left-aligned
   at its natural width rather than stretching full-width). */
.diary-book-top--solo { flex-direction: column; }
.diary-book-top--solo .diary-book-id { flex: 0 1 auto; }
.diary-book-cover { width: 52px; height: auto; border-radius: 5px; border: 1px solid var(--border); flex: 0 0 auto; }
.diary-book-meta { min-width: 0; }
.diary-book-title { font-weight: 700; color: var(--text); text-decoration: none; display: block; }
.diary-book-title:hover { color: var(--accent); }
.diary-book-author { font-size: .82rem; color: var(--muted); margin-top: 1px; }
.diary-book-status {
  display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 600;
  color: var(--accent); background: var(--row-hover); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px;
}

.diary-activity {
  flex: 0 0 auto; min-width: 150px; background: var(--row-hover);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
.diary-activity-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); display: block; margin-bottom: 5px;
}
.diary-act-row { font-size: .84rem; color: var(--text); padding: 1px 0; }
.diary-act-count {
  display: inline-block; min-width: 17px; text-align: center; font-weight: 700;
  color: var(--accent); margin-right: 2px;
}
.diary-act-labels { color: var(--muted); font-size: .78rem; }
.diary-act-labels::before { content: '— '; }

.diary-book-content { margin-top: 18px; }
/* Each post-type group spaced apart; its title shown as a coloured pill. */
.diary-book-content > .diary-review,
.diary-book-content > .diary-slidewrap { margin-top: 22px; }
.diary-book-content > :first-child { margin-top: 0; }
.diary-review { margin-bottom: 0; }
/* Each post-type group is a row: label in its own left column (width follows
   the label text), content to the right. */
.diary-slidewrap { display: flex; gap: 14px; align-items: flex-start; }
.diary-rowbody { flex: 1 1 0; min-width: 0; }
.diary-slidewrap-label {
  flex: 0 0 auto; align-self: flex-start; white-space: nowrap;
  display: inline-block;
  background: color-mix(in srgb, var(--review) 20%, transparent);
  color: var(--review);
  border-radius: 999px; padding: 3px 12px; margin-bottom: 0;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.diary-slide-count { margin-left: 4px; opacity: .85; font-weight: 600; }
/* The post-type icon only stands in for the word on phones (see media query). */
.diary-slidewrap-label .dsl-svg { display: none; }
/* Phone: post-type labels collapse from a word pill into a round icon badge, to
   save horizontal room. The item count rides as a small bubble on the corner.
   (Placed after the base label rules above so these overrides win on phones.) */
@media (max-width: 560px) {
  .diary-slidewrap-label {
    position: relative; width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  }
  .diary-slidewrap-label .dsl-text { display: none; }
  .diary-slidewrap-label .dsl-svg { display: block; width: 17px; height: 17px; }
  .diary-slidewrap-label .diary-slide-count {
    position: absolute; top: -4px; right: -4px; margin: 0;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .56rem; line-height: 1; border-radius: 999px; opacity: 1;
    background: var(--review); color: var(--bg);
  }
}
.diary-post-title { margin: 0 0 6px; font-size: .95rem; }
.diary-nc-cat {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); vertical-align: middle; margin-left: 4px;
}

/* Diary Posts section: arrows share the row with the topic filters, sitting
   just to the right of the last filter (the row only grows as wide as its
   contents); when there are no filters the pager simply sits at the left. */
.diary-posts-head {
  display: flex; align-items: center; gap: 8px 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.diary-posts-head .diary-post-filters { margin-bottom: 0; }
.diary-posts-head .slider-controls { border: none; margin: 0; padding: 0; }

/* Diary: game activity text lines (newest-character / birthday mail) */
.diary-act-line { font-size: .84rem; color: var(--text); padding: 1px 0; }
.diary-act-line + .diary-act-row { margin-top: 3px; }

/* Diary: exploration banner thumbnail beside its region/quest/chapter */
.diary-expl { display: flex; gap: 12px; align-items: flex-start; }
.diary-expl-banner {
  width: 132px; height: 88px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); flex: 0 0 auto;
}
.diary-expl-meta { min-width: 0; flex: 1 1 auto; }

/* Diary: "Other" section (films/series + audiobooks) */
.diary-other-row { display: flex; flex-direction: column; gap: 0; }
.diary-other-col { min-width: 0; }
.diary-other-col + .diary-other-col {
  margin-top: 24px; padding-top: 24px; position: relative;
}
.diary-media { display: flex; gap: 12px; align-items: flex-start; margin-top: 0; }
/* Each entry is a small header (cover + title/meta) with its text flowing full
   width below it. */
.diary-media-entry + .diary-media-entry {
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px;
}
.diary-media-entry > .post-body,
.diary-media-entry > .fs-section-label { margin-top: 8px; }
.diary-media-cover { width: 60px; height: auto; border-radius: 5px; border: 1px solid var(--border); flex: 0 0 auto; }
.diary-media-meta { min-width: 0; }
.diary-media-title { font-weight: 700; color: var(--text); }
.diary-media-sub { font-size: .82rem; color: var(--muted); }
.diary-media-badge {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--known); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; vertical-align: middle;
}

/* Diary: bottom "hide the day" button */
.diary-collapse {
  display: block; margin: 16px auto 2px; background: none;
  border: 1px solid var(--border); color: var(--accent);
  border-radius: 999px; padding: 6px 18px; cursor: pointer; font: inherit; font-size: .85rem;
}
.diary-collapse:hover { border-color: var(--accent); }

/* ── Library page ────────────────────────────────────────────────── */
.library-intro { color: var(--muted); margin: -.4rem 0 1.1rem; }
.lib-count { color: var(--muted); font-size: .85rem; align-self: center; }

/* Search, sort and the A–Z jump grouped in one box with its own identity, made
   sticky so it stays reachable while scrolling a long author list. */
.lib-filters {
  position: sticky;
  top: var(--lib-header-h, 52px);
  z-index: 40;
  /* page-coloured (not a box) but opaque, so the list scrolls cleanly under it */
  background: var(--bg);
  padding: 12px 0;
  margin-bottom: 22px;
}
.lib-filters .books-filter-bar { margin-bottom: 10px; }
.lib-filters .lib-langbar { margin: 0 0 10px; }
.lib-filters .lib-sortbar { margin: 0 0 10px; }
.lib-filters .lib-azbar { margin: 0; }

/* language filter buttons (one per language; "Chinese" groups Trad + Simp) */
.lib-langbar { display: flex; flex-wrap: wrap; gap: 5px; }
.lib-lang-btn {
  font: inherit; font-size: .75rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
  border-radius: 20px; padding: 4px 12px; line-height: 1.4;
  transition: border-color .12s, background .12s, color .12s;
}
.lib-lang-btn:hover { border-color: var(--accent); }
.lib-lang-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.lib-lang-btn .lib-lang-dot { width: 8px; height: 8px; }

/* author sort toggle: Most read / A–Z / Recently read / Favourites */
.lib-sortbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: -8px 0 20px;
}
.lib-sort-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.lib-sort-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.lib-sort-tab {
  font: inherit; font-size: .75rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
  border-radius: 20px; padding: 4px 13px; line-height: 1.4;
  transition: border-color .12s, background .12s, color .12s;
}
.lib-sort-tab:hover { border-color: var(--accent); }
.lib-sort-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* A–Z jump bar */
.lib-azbar {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 22px;
}
.lib-az {
  font: inherit; font-size: .8rem; line-height: 1;
  min-width: 1.7em; text-align: center;
  padding: 5px 2px; border-radius: 6px;
  border: none; background: none; color: var(--text);
  cursor: pointer; transition: background .12s, color .12s;
}
.lib-az:hover { background: var(--accent); color: #fff; }
.lib-az.is-empty { color: var(--border); cursor: default; }
.meta-toreview { color: #b07d2a; border-color: #b07d2a; }
.meta-archived { color: #8a78b8; border-color: #8a78b8; }
.book-grid-finished .book-card-info .meta-toreview { color: #e0b878; border-color: #e0b878; }
.book-grid-finished .book-card-info .meta-archived { color: #b9a8e0; border-color: #b9a8e0; }
.meta-audiobook { color: #4f8a7b; border-color: #4f8a7b; }
.book-grid-finished .book-card-info .meta-audiobook { color: #8fcabb; border-color: #8fcabb; }

/* ── Author cards: a "shelf" of equal-height tiles; a clicked tile opens a
      full-width drawer below its whole row, leaving the shelf in place. ── */
/* master–detail: a scrollable author list on the left, a sticky detail pane on
   the right taking most of the width. Clicking a row loads it into the pane. */
.lib-layout { display: flex; align-items: flex-start; gap: 24px; }
.lib-list { flex: 0 0 300px; display: flex; flex-direction: column; }
.lib-shelf { margin: 0; scroll-margin-top: var(--lib-pane-top, 72px); }
.lib-grid[hidden] { display: none; }
.lib-detail-source[hidden] { display: none; }

/* one author row (two lines) — the whole row is the toggle button */
.lib-row {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  margin: 0; padding: 10px 12px;
  background: none; border: none; border-radius: 8px;
  cursor: pointer; font: inherit; color: inherit;
  transition: background .12s;
}
.lib-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lib-shelf.is-selected .lib-row {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

/* line 1: original name + (english / romanised) secondary name */
.lib-row-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lib-row-orig { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.lib-row-en { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
/* line 2: colour dot + book count */
.lib-row-sub { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.lib-lang-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block;
}
.lib-shelf-n { font-variant-numeric: tabular-nums; }
/* still used inside the detail panel (debut year) */
.lib-face-year { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* the detail pane on the right: commentary, prizes, then the covers */
.lib-detail-pane {
  flex: 1 1 auto; min-width: 0;
  position: sticky; top: var(--lib-pane-top, 72px); align-self: flex-start;
  max-height: calc(100vh - var(--lib-pane-top, 72px) - 24px); overflow: auto;
  scroll-margin-top: var(--lib-pane-top, 72px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 20px 20px;
  animation: lib-drawer-in .16s ease;
}
.lib-detail-empty {
  color: var(--muted); font-style: italic;
  padding: 28px 4px; text-align: center;
}
@media (max-width: 760px) {
  .lib-layout { flex-direction: column; }
  .lib-list { flex-basis: auto; width: 100%; }
  .lib-detail-pane {
    position: static; max-height: none; overflow: visible; width: 100%;
    margin: 8px 0 6px;   /* separate the inline pane from the row above */
  }
  /* the full cluster would dominate a phone screen if pinned — let it scroll */
  .lib-filters { position: static; }
}
@keyframes lib-drawer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* title at the top of the open drawer: original name + romanisation */
.lib-detail-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding-top: 13px;
}
.lib-detail-name { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.lib-detail-rom { font-size: .9rem; color: var(--muted); }
/* Language · country · life dates, moved off the compact card into the panel */
.lib-detail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: .85rem; color: var(--muted); padding-top: 10px;
}
.lib-detail-lang { display: inline-flex; align-items: center; gap: 6px; }
.lib-detail-where { color: var(--text); font-weight: 600; }
.lib-detail-life { font-variant-numeric: tabular-nums; }
/* Debut line, moved off the compact card into the opened panel */
.lib-detail-debut {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  font-size: .85rem; padding-top: 10px;
}
.lib-detail { padding-top: 13px; }
.lib-card-commentary {
  margin: 0 0 12px; font-size: .9rem; line-height: 1.6; color: var(--text);
  white-space: pre-line; max-width: 52rem;
}
.lib-covers-wrap { padding-top: 13px; }
.lib-covers-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 8px;
}
.lib-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  font-size: .82rem; color: var(--muted); margin-bottom: 8px;
}
.lib-card-where { font-weight: 600; color: var(--text); }
.lib-card-bio {
  margin: 0 0 10px; font-size: .9rem; line-height: 1.6; color: var(--text);
  white-space: pre-line;
}
.lib-card-works {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  margin-top: 8px;
}
.lib-card-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-right: 2px; align-self: center;
}
.lib-work {
  font-size: .85rem; color: var(--text);
}
.lib-work-read {
  color: var(--prize); font-weight: 600;
}
.lib-card-prizes { margin-top: 12px; }
.lib-prize-list { list-style: none; margin: 6px 0 0; padding: 0; }
.lib-prize {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  font-size: .82rem; padding: 3px 0; line-height: 1.4;
}
.lib-prize-year {
  font-variant-numeric: tabular-nums; color: var(--muted);
  min-width: 2.6em;
}
.lib-prize-name { font-weight: 600; color: var(--text); }
.lib-prize-work { color: var(--muted); }
.lib-prize-read .lib-prize-work { color: var(--prize); font-weight: 600; }
/* author-card fact tabs: Prizes ⇄ ranking placements */
.lib-fact-nav {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
/* underline-style tabs: clearly clickable, but no heavy pill/colour fill */
.lib-fact-tab {
  font: inherit; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; color: var(--muted);
  padding: 5px 12px; line-height: 1.35;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.lib-fact-ico { width: 1.1em; height: 1.1em; flex: none; }
.lib-fact-tab:hover { color: var(--text); border-bottom-color: var(--border); }
.lib-fact-tab.is-active { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.lib-fact-pane { display: none; }
.lib-fact-pane.is-active { display: block; }
.lib-rank-pos {
  font-weight: 700; color: var(--accent); min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}
.lib-rank-pos small { font-weight: 400; font-size: .68em; color: var(--muted); margin-left: 1px; }
.lib-rank-list .lib-prize-year { min-width: 2.6em; }
.lib-card-wiki {
  display: inline-block; margin-top: 12px; font-size: .8rem;
  color: var(--accent); text-decoration: none;
}

/* ── Prizes ──────────────────────────────────────────────────────────── */
.prize-index { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.prize-index-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color .12s, transform .12s;
}
.prize-index-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.prize-index-name { font-weight: 700; font-size: 1.02rem; display: block; }
.prize-index-en { color: var(--muted); font-size: .82rem; }
.prize-index-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; font-size: .8rem; color: var(--muted); }
.prize-index-count { font-size: .9rem; }
.prize-index-empty { color: var(--muted); font-size: .8rem; }

.prize-status {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 12px; padding: 1px 8px;
}
.prize-status-on-going { color: #3f7a3f; background: rgba(108,159,108,.15); }
.prize-status-closed   { color: var(--muted); background: var(--bg3); }
.prize-kind { font-size: .72rem; text-transform: capitalize; background: var(--bg3); border-radius: 10px; padding: 1px 8px; }

.prize-back { margin: -.4rem 0 .8rem; }
.prize-back a { color: var(--muted); text-decoration: none; font-size: .85rem; }
.prize-title { margin: 0 0 .3rem; }
.prize-title-en { font-size: 1rem; font-weight: 500; color: var(--muted); }
.prize-header-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.prize-where { font-weight: 600; color: var(--text); }
.prize-wiki { color: var(--accent); text-decoration: none; }
.prize-desc { font-size: .92rem; line-height: 1.65; white-space: pre-line; max-width: 50rem; }

.prize-progress { display: flex; align-items: center; gap: 12px; margin: 1.4rem 0 1rem; flex-wrap: wrap; }
.prize-progress-bar { flex: 1; min-width: 160px; height: 8px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.prize-progress-bar span { display: block; height: 100%; background: var(--prize); }
.prize-progress-label { font-size: .85rem; color: var(--muted); }

.prize-winners { list-style: none; margin: 0; padding: 0; }
.prize-winner {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: .9rem;
}
.prize-w-mark { width: 1.1em; flex: 0 0 auto; color: var(--prize); font-weight: 700; }
.prize-w-rank { width: 2.6em; flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 1.05em; color: var(--accent); font-variant-numeric: tabular-nums; }
.prize-w-rank small { font-weight: 400; font-size: .62em; color: var(--muted); margin-left: 1px; }
.prize-w-year { width: 3em; flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.prize-w-body { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.prize-w-name { font-weight: 400; color: var(--muted); }
.prize-w-rom { font-weight: 400; color: var(--muted); font-size: .85em; }
.prize-w-tr { font-weight: 400; color: var(--muted); font-size: .85em; }
.prize-w-work { color: var(--text); font-weight: 700; }
.prize-w-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg3); border-radius: 10px; padding: 1px 8px; }
.prize-w-region { font-size: .72rem; color: var(--muted); border: 1px solid var(--bg3); border-radius: 10px; padding: 1px 8px; }
.prize-w-region::before { content: "\1F4CD"; margin-right: 3px; opacity: .7; }

/* Awards (prizes + ranking placements) shown on a book page */
.awards-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.award-item { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; line-height: 1.4; }
.award-ico { width: 1.15em; height: 1.15em; flex: none; margin-top: .15em; color: #c8a028; }
.award-ico-rank { color: var(--prize); }
.award-name { color: var(--text); text-decoration: none; font-weight: 600; }
a.award-name:hover { color: var(--accent); text-decoration: underline; }
.award-en { color: var(--muted); }
.award-rank { color: var(--prize); }
.prize-w-work a { color: var(--accent); text-decoration: none; }
.prize-winner-read { background: var(--prize-soft); }
.prize-winner-read .prize-w-work, .prize-winner-read .prize-w-work a { color: var(--prize); }

/* Ranking prizes: each year is a header, with its ranked books listed below */
.prize-year-group { margin: 0 0 1.1rem; }
.prize-year-head {
  font-size: 1.05rem; font-weight: 700; color: var(--prize);
  margin: 1.1rem 0 .25rem; padding-bottom: .2rem;
  border-bottom: 1px solid var(--row-divider);
  font-variant-numeric: tabular-nums;
}
.prize-year-group .prize-winner:last-child { border-bottom: none; }
.lib-grid { margin-bottom: 0; }
.lib-singles { margin-top: 40px; }
.lib-single-cap {
  font-size: .7rem; color: var(--muted);
  text-align: center; padding: 6px 4px 2px; line-height: 1.25;
  word-break: break-word;
}

.series-num { color: var(--muted); font-weight: 600; }

/* Floating back-to-top button */
.back-to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, border-color .12s;
  z-index: 200;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--accent); }
.back-to-top svg { width: 20px; height: 20px; }