/* ============================================================================
   Shiori (栞) — chipul de selecție, butonul din antet, marcajul temporar,
   toastul. Culori din tokens, deci merge pe ambele teme.
   ========================================================================== */

/* chipul care apare lângă textul selectat */
.ij-shiori-chip {
  position: absolute;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .7rem .42rem .5rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #1d1a16);
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 4px rgba(29, 26, 22, .10), 0 12px 28px -14px rgba(29, 26, 22, .35);
  cursor: pointer;
  animation: ij-shiori-urcă .18s cubic-bezier(.16, 1, .3, 1) both;
}
.ij-shiori-chip:hover { border-color: var(--shu, #b3392a); }
.ij-shiori-chip__kanji {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--shu, #b3392a) 12%, transparent);
  color: var(--shu, #b3392a);
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: .82rem;
  line-height: 1;
}

/* butonul 栞 din antet, doar când pagina are semn de carte */
.ij-shiori-buton {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: .35rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .14));
  border-radius: 8px;
  background: transparent;
  color: var(--shu, #b3392a);
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.ij-shiori-buton:hover {
  border-color: var(--shu, #b3392a);
  background: color-mix(in srgb, var(--shu, #b3392a) 8%, transparent);
  transform: translateY(-1px);
}

/* locul marcat, când te întorci */
/* locul marcat: hârtie caldă, valuri seigaiha fine, chenar auriu în colțuri */
.ij-shiori-marcaj {
  position: relative;
  background:
    radial-gradient(circle at 50% 120%, rgba(168, 130, 44, .10) 0 38%, transparent 39%) 0 0 / 9px 6px,
    linear-gradient(180deg, rgba(168, 130, 44, .10), rgba(168, 130, 44, .20));
  color: inherit;
  border-radius: 2px;
  padding: .1em .18em;
  box-shadow: inset 0 -1px 0 rgba(168, 130, 44, .55);
  scroll-margin-top: 8rem;
}

/* chenar auriu doar în două colțuri — semnătura japoneză a unui chenar */
.ij-shiori-marcaj::before,
.ij-shiori-marcaj::after {
  content: "";
  position: absolute;
  width: .45em;
  height: .45em;
  pointer-events: none;
  border: 1px solid rgba(168, 130, 44, .9);
}
.ij-shiori-marcaj::before {
  top: -.26em;
  left: -.34em;
  border-right: 0;
  border-bottom: 0;
}
.ij-shiori-marcaj::after {
  bottom: -.26em;
  right: -.34em;
  border-left: 0;
  border-top: 0;
}

/* semnul tradițional, în marginea stângă a paragrafului marcat */
.ij-shiori-paragraf { position: relative; }
.ij-shiori-semn {
  position: absolute;
  left: -1.85rem;
  top: -.35rem;
  z-index: 2;
  display: block;
  width: 16px;
  height: 34px;
  filter: drop-shadow(0 1px 2px rgba(29, 26, 22, .28));
  animation: ij-shiori-atârnă .34s cubic-bezier(.16, 1, .3, 1) both;
  pointer-events: none;
}

@keyframes ij-shiori-atârnă {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* pe ecrane mici semnul se apropie, ca să nu iasă din pagină */
@media (max-width: 900px) {
  .ij-shiori-semn { left: -1.25rem; width: 14px; height: 30px; }
}
@media (max-width: 620px) {
  .ij-shiori-semn { left: -.9rem; width: 12px; height: 26px; }
  .ij-shiori-marcaj::before, .ij-shiori-marcaj::after { width: .35em; height: .35em; }
}

/* × mic după text: șterge semnul */
.ij-shiori-sterge {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin-left: .1rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--aur, var(--gold, #c89d3c)) 55%, transparent);
  border-radius: 50%;
  background: var(--paper, #fff);
  color: var(--ink-faint, var(--soft, #6d6459));
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .78rem;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  opacity: .6;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, opacity .14s ease;
}
.ij-shiori-sterge:hover,
.ij-shiori-marcaj:hover + .ij-shiori-sterge {
  opacity: 1;
  background: var(--shu, #b3392a);
  border-color: var(--shu, #b3392a);
  color: #fff;
  transform: scale(1.08);
}

/* confirmarea */
.ij-shiori-toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 95;
  transform: translate(-50%, 12px);
  padding: .6rem 1rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #1d1a16);
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .78rem;
  box-shadow: 0 2px 6px rgba(29, 26, 22, .12), 0 18px 40px -20px rgba(29, 26, 22, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.ij-shiori-toast.este-văzut { opacity: 1; transform: translate(-50%, 0); }

@keyframes ij-shiori-urcă {
  from { opacity: 0; transform: translateY(4px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes ij-shiori-puls {
  0% { background: color-mix(in srgb, var(--aur, var(--gold, #c89d3c)) 55%, transparent); }
  70% { background: color-mix(in srgb, var(--aur, var(--gold, #c89d3c)) 26%, transparent); }
  100% { background: color-mix(in srgb, var(--aur, var(--gold, #c89d3c)) 14%, transparent); }
}

@media (max-width: 640px) {
  .ij-shiori-chip { font-size: .74rem; padding: .38rem .62rem .38rem .45rem; }
  .ij-shiori-toast { bottom: 1rem; font-size: .74rem; max-width: calc(100vw - 2rem); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ij-shiori-chip, .ij-shiori-marcaj { animation: none; }
  .ij-shiori-toast { transition: opacity .01ms; }
}

/* butonul permanent din antet: iconiță + etichetă */
.ij-shiori-buton {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: auto;
  padding: 0 .55rem;
  height: 2.1rem;
}
.ij-shiori-buton__kanji { font-size: .82rem; line-height: 1; }
.ij-shiori-buton__text {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft, inherit);
  white-space: nowrap;
}
.ij-shiori-buton.are-semn {
  border-color: color-mix(in srgb, var(--shu, #b3392a) 45%, transparent);
  background: color-mix(in srgb, var(--shu, #b3392a) 8%, transparent);
}
.ij-shiori-buton.are-semn .ij-shiori-buton__text { color: var(--shu, #b3392a); }
.ij-shiori-buton.are-altundeva .ij-shiori-buton__text { color: var(--ink-faint, var(--soft, #6d6459)); }

@media (max-width: 860px) {
  .ij-shiori-buton__text { display: none; }
  .ij-shiori-buton { width: 2.1rem; padding: 0; justify-content: center; }
}

/* rândul „Continuă de unde ai rămas", pe copertă */
.ij-shiori-continuă {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .8rem;
  max-width: var(--w-text, 46rem);
  margin: 1.2rem auto .4rem;
  padding: .7rem .95rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: var(--radius-lg, 14px);
  background: color-mix(in srgb, var(--paper, #fff) 92%, transparent);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .8rem;
}
.ij-shiori-continuă__kanji {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--shu, #b3392a) 12%, transparent);
  color: var(--shu, #b3392a);
  font-family: var(--font-serif, serif);
  font-size: .88rem;
}
.ij-shiori-continuă__text { color: var(--ink-soft, inherit); font-weight: 600; }
.ij-shiori-continuă__link {
  margin-left: auto;
  color: var(--shu, #b3392a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.ij-shiori-continuă__închide {
  border: 0;
  background: transparent;
  color: var(--ink-faint, var(--soft, #6d6459));
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .2rem;
  cursor: pointer;
}
/* pe titluri: bandă mai fină, cu o linie aurie dedesubt, nu umplutură grea */
.ij-shiori-marcaj:is(h1, h2, h3, h4) {
  background: linear-gradient(180deg, rgba(168, 130, 44, .07), rgba(168, 130, 44, .13));
  box-shadow: inset 0 -2px 0 rgba(168, 130, 44, .55);
  padding: .08em .3em .12em;
}
.ij-shiori-marcaj:is(h1, h2, h3, h4)::before { top: -.3em; left: -.4em; }
.ij-shiori-marcaj:is(h1, h2, h3, h4)::after { bottom: -.3em; right: -.4em; }

/* ×-ul din titlu stă pe rândul titlului, nu sub el */
.ij-shiori-marcaj:is(h1, h2, h3, h4) .ij-shiori-sterge {
  margin-left: .5rem;
  vertical-align: .08em;
}
/* ============================================================================
   Tab vertical pe marginea dreaptă + cardul „Ai rămas la"
   ========================================================================== */

.ij-shiori-tab {
  position: fixed;
  right: var(--scrollbar-w, 0px);
  top: 50%;
  transform: translateY(-50%) translateX(0);
  z-index: 66;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .42rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .14));
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--paper, #fff) 96%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(29, 26, 22, .12), 0 14px 30px -18px rgba(29, 26, 22, .4);
  color: var(--ink, #1d1a16);
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .14s ease, background-color .14s ease;
}
.ij-shiori-tab:hover {
  border-color: color-mix(in srgb, var(--aur, var(--gold, #c89d3c)) 65%, transparent);
  transform: translateY(-50%) translateX(-2px);
}
.ij-shiori-tab__kanji {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 1rem;
  line-height: 1;
  color: var(--shu, #b3392a);
  writing-mode: horizontal-tb;
}
.ij-shiori-tab__text {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--soft, #6d6459));
}
.ij-shiori-tab.are-semn {
  border-color: color-mix(in srgb, var(--shu, #b3392a) 42%, transparent);
}
.ij-shiori-tab.are-semn .ij-shiori-tab__text { color: var(--shu, #b3392a); }
.ij-shiori-tab.este-deschis { transform: translateY(-50%) translateX(-2px); }

/* cardul */
.ij-shiori-panou {
  position: fixed;
  right: calc(3.2rem + var(--scrollbar-w, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 67;
  width: min(21.5rem, calc(100vw - 4rem));
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .14));
  border-radius: 14px;
  background: var(--paper, #fff);
  box-shadow: 0 3px 10px rgba(29, 26, 22, .14), 0 26px 60px -30px rgba(29, 26, 22, .55);
  font-family: var(--font-ui, system-ui, sans-serif);
  animation: ij-shiori-card .2s cubic-bezier(.16, 1, .3, 1) both;
}
.ij-shiori-panou__sus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.ij-shiori-panou__eticheta {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--soft, #6d6459));
}
.ij-shiori-panou__închide {
  border: 0;
  background: transparent;
  color: var(--ink-faint, var(--soft, #6d6459));
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .1rem;
  cursor: pointer;
}
.ij-shiori-panou__închide:hover { color: var(--shu, #b3392a); }
.ij-shiori-panou__titlu {
  margin: .4rem 0 .7rem;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, #1d1a16);
}
.ij-shiori-panou__progres {
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink, #1d1a16) 10%, transparent);
  overflow: hidden;
}
.ij-shiori-panou__progres i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--aur, var(--gold, #c89d3c)), var(--shu, #b3392a));
}
.ij-shiori-panou__procent {
  margin: .35rem 0 .6rem;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--soft, #6d6459));
}
.ij-shiori-panou__text {
  margin: 0 0 .85rem;
  font-family: var(--font-body, Georgia, serif);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-soft, #453d33);
}
.ij-shiori-panou__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .6rem .8rem;
  border: 0;
  border-radius: 9px;
  background: var(--shu, #b3392a);
  color: #fff;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .14s ease, transform .14s ease;
}
.ij-shiori-panou__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ij-shiori-panou__jos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line, rgba(0, 0, 0, .1));
}
.ij-shiori-panou__link,
.ij-shiori-panou__ascunde {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--ink-faint, var(--soft, #6d6459));
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.ij-shiori-panou__link:hover,
.ij-shiori-panou__ascunde:hover { color: var(--shu, #b3392a); }

@keyframes ij-shiori-card {
  from { opacity: 0; transform: translateY(-50%) translateX(8px); }
  to { opacity: 1; transform: translateY(-50%); }
}

/* pe mobil: tab mai mic, cardul devine foaie jos */
@media (max-width: 700px) {
  .ij-shiori-tab { padding: .55rem .34rem; gap: .35rem; border-radius: 9px 0 0 9px; }
  .ij-shiori-tab__text { font-size: .58rem; letter-spacing: .14em; }
  .ij-shiori-tab__kanji { font-size: .9rem; }

  .ij-shiori-panou {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding: .95rem 1rem 1.1rem;
    animation: ij-shiori-foaie .22s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes ij-shiori-foaie {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ij-shiori-tab, .ij-shiori-panou { animation: none; transition: none; }
}

/* ce e semnul: capitol, interludiu, temă */
.ij-shiori-panou__tip {
  margin: .2rem 0 .35rem;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aur, var(--gold, #a8822c));
}
.ij-shiori-panou__subtitlu {
  margin: -.45rem 0 .7rem;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: .74rem;
  color: var(--ink-faint, var(--soft, #6d6459));
}
/* semnul stă în marginea din stânga, în afara coloanei de text: fără să provoace
   bară orizontală. `clip` în loc de `hidden`, ca să nu strice elementele lipicioase. */
.chapter-body, article.prose, .prolog, .chapter-hero { overflow-x: clip; }
/* pe ecrane înguste tab-ul vertical acoperă coloana de text:
   devine un buton rotund discret, jos în dreapta, deasupra bannerului de cookie-uri */
@media (max-width: 760px) {
  .ij-shiori-tab {
    top: auto;
    bottom: 5.4rem;
    right: calc(.9rem + var(--scrollbar-w, 0px));
    left: auto;
    width: 3rem;
    height: 3rem;
    padding: 0;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--shu, #b3392a) 35%, var(--line, #e8e1d3));
    border-radius: 50%;
    writing-mode: horizontal-tb;
    transform: none;
    box-shadow: 0 2px 6px rgba(29, 26, 22, .16), 0 14px 30px -18px rgba(29, 26, 22, .45);
  }
  .ij-shiori-tab:hover,
  .ij-shiori-tab.este-deschis { transform: translateY(-2px); }
  .ij-shiori-tab__text { display: none; }
  .ij-shiori-tab__kanji { font-size: 1.1rem; }
}
/* ============================================================================
   Împrumuturi din ikor (F:\Projects\ikor\dist) — gesturi care lipsseau:
   tab mai sus, sigiliu roșu în loc de kanji gol, tab care se retrage când
   cardul e deschis, card cu înălțime maximă și derulare proprie.
   ========================================================================== */

/* 1. tabul stă mai sus, ca să nu acopere antetul capitolului */
.ij-shiori-tab { top: 34%; }

/* 2. kanji-ul devine sigiliu roșu, ca în logo */
.ij-shiori-tab__kanji {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 7px;
  background: var(--shu, #b3392a);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--aur, #a8822c) 55%, transparent);
  box-shadow: 0 3px 10px rgba(183, 58, 43, .35);
  font-size: .95rem;
}

/* 3. când cardul e deschis, tabul se retrage în margine (cardul îi ia locul) */
.ij-shiori-tab.este-deschis {
  transform: translateY(-50%) translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* 4. cardul: aliniat cu tabul, cu înălțime maximă și derulare proprie */
.ij-shiori-panou {
  top: 34%;
  transform: none;
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  animation: ij-shiori-card2 .28s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ij-shiori-card2 {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .ij-shiori-tab { top: auto; }
  .ij-shiori-tab.este-deschis { transform: translateY(120%); opacity: 0; }
  .ij-shiori-panou { top: auto; max-height: 72vh; transform: none; }
}
/* lipit de bara de derulare: exact lățimea ei (0 în browserele cu bară care apare
   doar la derulare, ~15px în Chrome), fără niciun gol suplimentar */
/* right: 0 e deja lipit de bara clasică (fixed se măsoară fără ea); un offset ar dubla golul */
.ij-shiori-tab { right: 0 !important; }
@media (max-width: 760px) {
  .ij-shiori-tab { right: .9rem !important; }
}
/* ca la ikor: cardul se desface din marginea din dreapta, lipit de ea,
   cu colțuri rotunjite doar în stânga și intrare prin alunecare */
.ij-shiori-panou {
  right: 0;
  top: 34%;
  width: min(22.5rem, calc(100vw - 1.5rem));
  max-height: min(60vh, 30rem);
  border-radius: 16px 0 0 16px;
  border-right: 0;
  box-shadow: -26px 20px 60px -32px rgba(29, 26, 22, .5), -1px 0 0 rgba(29, 26, 22, .06);
  animation: ij-shiori-glisează .3s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ij-shiori-glisează {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .ij-shiori-panou {
    right: 0;
    border-radius: 16px 16px 0 0;
    border-right: 1px solid var(--line, rgba(0, 0, 0, .14));
    box-shadow: 0 -24px 60px -30px rgba(29, 26, 22, .5);
  }
}
/* Chipul de selecție pe mobil: apare dedesubt, nu peste meniul nativ. */
.ij-shiori-chip--jos { animation-name: ij-shiori-coboară; }
@keyframes ij-shiori-coboară {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Sub 760px tabul e buton rotund, deci și cardul trebuie să fie foaie jos,
   nu card lateral. Altfel între 701 și 760px se amestecă cele două forme. */
@media (max-width: 760px) {
  .ij-shiori-panou {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: auto;
    max-height: 72vh;
    border-radius: 16px 16px 0 0;
    border-right: 1px solid var(--line, rgba(0, 0, 0, .14));
    box-shadow: 0 -24px 60px -30px rgba(29, 26, 22, .5);
    animation: ij-shiori-foaie .22s cubic-bezier(.16, 1, .3, 1) both;
  }
}

/* Cardul stă peste pastila de cookie-uri (9990), dar sub modalul de setări (9995),
   ca să nu fie acoperit pe mobil când foaia ajunge în jos. */
.ij-shiori-panou { z-index: 9994; }

/* Kanji-ul trebuie să folosească fontul japonez al site-ului; altfel litera 栞
   lipsește din fontul latin și rămâne un pătrat gol. */
.ij-shiori-tab__kanji,
.ij-shiori-chip__kanji,
.ij-shiori-continuă__kanji,
.ij-shiori-buton__kanji {
  font-family: var(--font-jp, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif);
}

/* Pe desktop tabul rămâne vizibil ca mâner al cardului; cardul se deschide
   în stânga lui, nu peste el. Pe mobil tabul continuă să se retragă. */
@media (min-width: 761px) {
  /* Tabul stă sub card, nu se vede când cardul e deschis. Rămâne acolo
     ca să fie revelat natural când cardul alunecă înapoi. */
  .ij-shiori-tab.este-deschis {
    transform: translateY(-50%);
    opacity: 1;
    pointer-events: none;
  }
}


/* Închidere lină: cardul alunecă înapoi, tabul mic se vede dedesubt. */
.ij-shiori-panou.se-inchide {
  animation: ij-shiori-ieșire .3s cubic-bezier(.4, 0, .2, 1) both;
  pointer-events: none;
}
@keyframes ij-shiori-ieșire {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}
@media (max-width: 760px) {
  .ij-shiori-panou.se-inchide {
    animation: ij-shiori-foaie-ieșire .26s cubic-bezier(.4, 0, .2, 1) both;
  }
}
@keyframes ij-shiori-foaie-ieșire {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(100%); }
}

/* Panglica albă 栞 stă în afara coloanei de text; `overflow-x: clip` de pe
   .prose o tăia complet. O lăsăm vizibilă, iar body-ul rămâne protejat
   împotriva derulării orizontale. */
.chapter-body, article.prose, .prolog { overflow-x: visible; }