/* =========================================================
   v5 — character search (birthdays) + detail single layout
   ========================================================= */
#birthdays .section__head { grid-template-columns: minmax(0, 1fr) auto auto; }
#birthdays .csearch { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
#birthdays .emblem-slot { grid-column: 3; }
@media (max-width: 720px) {
  #birthdays .section__head { grid-template-columns: minmax(0, 1fr) auto; }
  #birthdays .csearch { grid-column: 1 / -1; grid-row: auto; margin-top: .75rem; }
}

.csearch { position: relative; z-index: 20; }
.csearch__btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 1.15rem; border-radius: 999px;
  background: #120809; color: var(--cream); font-weight: var(--w-semi); font-size: .95rem; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(244, 234, 192, .22), 0 12px 30px -14px rgba(0,0,0,.8);
  transition: transform .12s var(--ease-out), background-color .2s;
}
.csearch__btn:hover { background: #1d0c10; }
.csearch__btn:active { transform: scale(.96); }
.csearch__btn .ico { width: 18px; height: 18px; }
.csearch.is-open .csearch__btn { background: var(--cream); color: #4a0413; }

.csearch__panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(400px, 88vw); padding: 10px; border-radius: 18px;
  background: rgba(18, 8, 10, .94); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(244,234,192,.14), 0 34px 80px -24px rgba(0,0,0,.9);
  transform-origin: top right; animation: pop .32s var(--ease-spring);
}
html[dir="rtl"] .csearch__panel { transform-origin: top left; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .csearch__panel { inset-inline: 0; width: auto; } }
.csearch__field {
  display: flex; align-items: center; gap: .6rem; height: 48px; padding: 0 .9rem; border-radius: 12px;
  background: rgba(244, 234, 192, .07); box-shadow: inset 0 0 0 1px rgba(244,234,192,.14); color: var(--text-3);
}
.csearch__field:focus-within { box-shadow: inset 0 0 0 1.5px var(--crimson-2); color: var(--cream); }
.csearch__field .ico { width: 18px; height: 18px; }
.csearch__field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1rem;
}
.csearch__field input::placeholder { color: var(--text-3); }
.csearch__field input::-webkit-search-cancel-button { filter: invert(.8); }
.csearch__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: min(420px, 60vh); overflow-y: auto; scrollbar-width: thin; display: grid; gap: 2px; }
.csearch__list:empty { display: none; }
.csearch__item {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .45rem .55rem; border-radius: 12px; text-align: start;
  transition: background-color .15s;
}
.csearch__item:hover, .csearch__item[aria-selected="true"] { background: rgba(244, 234, 192, .08); }
.csearch__img { width: 44px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.csearch__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.csearch__txt { display: grid; min-width: 0; }
.csearch__txt b { font-weight: var(--w-semi); font-size: .95rem; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.csearch__txt b mark { background: none; color: var(--crimson-2); }
.csearch__txt small { font-size: .76rem; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.csearch__bd { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: var(--w-semi); color: var(--cream); background: rgba(200, 16, 46, .22); padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.csearch__bd .ico { width: 13px; height: 13px; }
.csearch__msg { padding: .9rem; text-align: center; color: var(--text-3); font-size: .88rem; }
.csearch__group { padding: .5rem .6rem .2rem; font-size: .7rem; font-weight: var(--w-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-family: var(--font); }

.d-body--single { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* keep the search dropdown above the rail below it */
#birthdays .section__head { position: relative; z-index: 30; }

/* ---------- hero panels: printed-manga paper (cream paper, ink border, hard ink offset shadow) ---------- */
.hero { --paper: #f4eac0; --ink: #12070a; }
.stats, .next-ep {
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[dir='rtl'] .stats, html[dir='rtl'] .next-ep { box-shadow: -6px 6px 0 var(--ink); }
.stats { gap: 0; overflow: hidden; }
.stat { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: .85rem 1rem; }
.stat + .stat { border-inline-start: 2px dashed rgba(18, 7, 10, .22); }
.stat dt { color: rgba(18, 7, 10, .62); font-weight: var(--w-semi); }
.stat dd { color: var(--ink); }
.stat:first-child dd { color: #b80b2c; }
@media (max-width: 860px) { .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n+3) { border-top: 2px dashed rgba(18,7,10,.22); } }

.next-ep { padding: .8rem .9rem; width: min(360px, 100%); }
.next-ep__label { color: rgba(18, 7, 10, .65); font-weight: var(--w-semi); margin-bottom: .55rem; }
.next-ep__label .jp { color: #fff; background: #b80b2c; padding: .12rem .45rem; border-radius: 5px; font-size: .68rem; letter-spacing: .06em; }
.next-ep__row { gap: .85rem; }
.next-ep__img { width: 52px; height: 72px; border-radius: 8px; border: 2px solid var(--ink); background: #e7dcae; }
.next-ep__title { color: var(--ink); font-weight: var(--w-bold); font-size: .95rem; }
.next-ep__time { color: #b80b2c; font-size: 1.45rem; margin-top: .2rem; }
.next-ep .skeleton { background: linear-gradient(90deg, #e6dbad, #efe5bb, #e6dbad); background-size: 200% 100%; }
@media (hover: hover) { .next-ep__row:hover .next-ep__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } }

/* ---------- scrollbars in the site's colours (rails/sheets that hide theirs keep them hidden) ---------- */
html { scrollbar-color: #8f0a24 #0c0607; }
.csearch__list, .lang__menu, .hovercard { scrollbar-width: thin; scrollbar-color: #c8102e rgba(244, 234, 192, .06); }
.csearch__list { padding-inline-end: 4px; }
/* older WebKit/Blink without scrollbar-color */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0607; }
::-webkit-scrollbar-thumb { background: #8f0a24; border-radius: 10px; border: 2px solid #0c0607; }
::-webkit-scrollbar-thumb:hover { background: #c8102e; }
.csearch__list::-webkit-scrollbar { width: 6px; }
.csearch__list::-webkit-scrollbar-track { background: rgba(244, 234, 192, .06); border-radius: 6px; }
.csearch__list::-webkit-scrollbar-thumb { background: #c8102e; border: 0; border-radius: 6px; }