.nav-btn{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--panel-edge);border-radius:20px;
  padding:7px 14px;cursor:pointer;
}
.nav-btn:hover{border-color:var(--gold-dim);}
.nav-btn:disabled{opacity:.4;cursor:default;}
.counter{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);}

.cover-wrap a{
  display:block;
  width:100%;height:100%;
  cursor:pointer;
}
.cover-wrap img{
  width:100%;height:100%;object-fit:contain; /* contain, not cover, since VN covers vary a lot in aspect ratio and shouldn't get cropped */
  opacity:0;transition:opacity .3s ease, filter .2s ease;
  filter:blur(0);
}
.cover-wrap img.loaded{opacity:1;}
.cover-wrap img.sensitive{filter:blur(22px) saturate(70%);}
/* Used briefly while switching to the next entry, so the previous cover disappears
   instantly instead of fading out and un-blurring over the next entry's data. */
.cover-wrap img.no-anim{transition:none !important;}
.cover-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--muted);
  font-size:14px;text-align:center;padding:20px;
}
.cover-loading{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  pointer-events:none;
}
.cover-loading.show{display:flex;}
.spinner{
  width:28px;height:28px;
  border:3px solid var(--panel-edge);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.reveal-btn{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(15,13,26,.35);border:none;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text);
  text-align:center;padding:20px;letter-spacing:.03em;
}
.reveal-btn.show{display:flex;}
.reveal-btn span{
  padding:6px 14px;border:1px solid rgba(255,255,255,.3);border-radius:20px;
}

.nameplate{margin-bottom:10px;}
.nameplate .main{
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;line-height:1.15;color:var(--gold);
  display:block;
}
.nameplate .alt{font-size:13px;color:var(--muted);}

.stat-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.chip.stat{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--panel-edge);
  padding:4px 9px;border-radius:20px;white-space:nowrap;
}
.chip.stat.rating{color:var(--gold);border-color:rgba(226,178,86,.35);}
.chip.stat.lang{color:#7dd88a;border-color:rgba(125,216,138,.3);}

.tagrow{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:22px;
  /* Capped so a title with a huge tag list (once "+N more" is expanded) can't eat the
     space meant for the synopsis and footer below it, since content-col isn't itself
     scrollable, only this row and .dialogue are, each independently. */
  max-height:110px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--panel-edge) transparent;
}
.tagrow::-webkit-scrollbar{width:6px;}
.tagrow::-webkit-scrollbar-track{background:transparent;}
.tagrow::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:20px;}
.tagrow::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}
.tag{
  font-size:11px;color:var(--accent);
  background:rgba(91,155,213,.12);border:1px solid rgba(91,155,213,.28);
  padding:3px 9px;border-radius:20px;
}
.tag.tag-more{
  font-family:inherit;cursor:pointer;
  color:var(--muted);background:var(--panel-2);border:1px solid var(--panel-edge);
}
.tag.tag-more:hover{color:var(--gold);border-color:var(--gold-dim);}
.tag.tag-all-link{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.02em;
  color:var(--muted);background:none;border:1px dashed var(--panel-edge);
  text-decoration:none;
}
.tag.tag-all-link:hover{color:var(--gold);border-color:var(--gold-dim);}

.dialogue{
  font-size:14px;line-height:1.6;color:var(--text);margin:0 0 12px;
  flex:1;min-height:0;overflow-y:auto;padding-right:6px; /* absorbs all leftover space and scrolls internally, so a long synopsis never grows the card past its fixed height */
  scrollbar-width:thin;
  scrollbar-color:var(--panel-edge) transparent;
}
.dialogue::-webkit-scrollbar{width:7px;}
.dialogue::-webkit-scrollbar-track{background:transparent;}
.dialogue::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:20px;}
.dialogue::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

.card-footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;margin-top:auto;
}
.vndb-link{
  color:var(--gold);text-decoration:none;font-size:12px;
  border-bottom:1px solid rgba(226,178,86,.4);padding-bottom:1px;
}
.vndb-link:hover{border-color:var(--gold);}
.hint{font-size:11px;color:var(--muted);}

.active-filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin:16px 0 0;
}
.filter-chip{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--panel-edge);
  padding:4px 10px;border-radius:20px;
  /* Lets a chip wrap onto multiple lines instead of overflowing past the container's edge
     (used to be nowrap, which broke when a long tag list was joined into one chip). */
  max-width:100%;white-space:normal;overflow-wrap:break-word;
}

.footer-credit{text-align:center;font-size:11px;color:var(--muted);margin-top:18px;}
.footer-credit a{color:var(--muted);}

.reveal-pref{justify-content:center;margin:16px 0 0;}