/* ============================================
   Light of Dawn - Common Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=Noto+Sans+JP:wght@300;400;700&display=swap');

:root {
  --pink:    #f4a7c3;
  --pink2:   #e8729a;
  --lavender:#c9b8f0;
  --mint:    #a8e6d4;
  --cream:   #fff8f5;
  --dark:    #2a1a2e;
  --mid:     #5c3d6e;
  --text:    #3a2040;
  --accent:  #ff6eb4;
}

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

body {
  background: var(--cream);
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23f4a7c3'/%3E%3C/svg%3E") 10 10, auto;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%, rgba(201,184,240,.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 80%, rgba(244,167,195,.2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,230,212,.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Header ---- */
header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 60px 20px 40px;
}

.stars-row {
  font-size: 1.1rem;
  color: var(--pink2);
  letter-spacing: .4em;
  margin-bottom: 12px;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%,100% { opacity:1; } 50% { opacity:.5; }
}

.site-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-style: italic;
  background: linear-gradient(135deg, var(--pink2) 0%, var(--lavender) 50%, var(--mint) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: 0.1em 0 0.15em;
  display: inline-block;
}
.site-title a {
  text-decoration: none;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-sub {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .85rem;
  color: var(--mid);
  margin-top: 8px;
  letter-spacing: .15em;
}

.age-banner {
  display: inline-block;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--pink2), var(--lavender));
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 20px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(232,114,154,.35);
}

/* ---- Nav ---- */
nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 48px;
}

nav a {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mid);
  text-decoration: none;
  padding: 7px 20px;
  border: 2px solid var(--lavender);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  transition: all .25s ease;
  letter-spacing: .08em;
}
nav a:hover {
  background: var(--pink);
  border-color: var(--pink2);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(244,167,195,.5);
}

/* ---- Main Layout ---- */
main {
  position: relative;
  z-index: 5;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ---- Section Title ---- */
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.7rem;
  font-style: italic;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lavender), transparent);
}

/* ---- Profile Card ---- */
.profile-card {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(201,184,240,.5);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: start;
  box-shadow: 0 8px 32px rgba(201,184,240,.2);
}
@media(max-width:600px){
  .profile-card { grid-template-columns: 1fr; text-align: center; }
}

.avatar-wrap {
  position: relative;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--lavender);
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}
}
.avatar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--pink);
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.profile-info h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 6px;
}
.profile-info .handle {
  font-size: .8rem;
  color: var(--pink2);
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.profile-info p {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 6px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.tag {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .06em;
}
.tag-pink  { background: rgba(244,167,195,.3); color: var(--pink2); border: 1px solid var(--pink); }
.tag-lav   { background: rgba(201,184,240,.3); color: var(--mid);   border: 1px solid var(--lavender); }
.tag-mint  { background: rgba(168,230,212,.3); color: #3a8c72;      border: 1px solid var(--mint); }

/* ---- Manga Gallery (cards with info) ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

.gallery-card {
  background: rgba(255,255,255,.8);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 16px rgba(201,184,240,.15);
  text-decoration: none;
  color: inherit;
  display: block;
}
.gallery-card:hover {
  transform: translateY(-6px) rotate(.4deg);
  box-shadow: 0 12px 32px rgba(244,167,195,.3);
}

.gallery-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 60%, var(--mint) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  position: relative;
  overflow: hidden;
}
.gallery-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(42,26,46,.4));
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* Series badge on manga cards */
.series-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: linear-gradient(135deg, #5c3d6e, #c9b8f0);
  color: white;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* Series cover card (collapsed) */
.series-cover {
  position: relative;
  cursor: pointer;
}
.series-cover .gallery-thumb {
  aspect-ratio: 4/3;
}
.series-cover .series-ep-count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(42,26,46,.75);
  color: white;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.series-cover .gallery-info h3 { font-size: .78rem; }
/* Series expanded panel */
.series-panel {
  grid-column: 1 / -1;
  display: none;
  background: rgba(201,184,240,.08);
  border: 1.5px solid rgba(201,184,240,.25);
  border-radius: 20px;
  padding: 14px;
  animation: seriesSlide .2s ease;
}
@keyframes seriesSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.series-panel.open { display: block; }
.series-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}
.series-panel-title {
  font-size: .82rem;
  font-weight: 700;
  color: #5c3d6e;
}
.series-panel-close {
  background: none;
  border: 1.5px solid rgba(201,184,240,.4);
  color: #5c3d6e;
  font-size: .7rem;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.series-panel-close:hover { background: #fff0f6; }
.series-panel-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.series-panel-grid > .gallery-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .series-panel-grid > .gallery-card { flex: 0 0 150px; }
}

.nsfw-blur {
  filter: blur(14px);
  transition: filter .4s ease;
}
.gallery-card:hover .nsfw-blur {
  filter: blur(0);
}
/* NSFW unlocked (anonymous 18+ enter or full login) → remove blur */
body.nsfw-unlocked .nsfw-blur {
  filter: none;
}

.gallery-info {
  padding: 14px 16px;
}
.gallery-info h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.gallery-info p {
  font-size: .75rem;
  color: var(--mid);
}
.nsfw-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---- Illust Gallery (overlay style) ---- */
.illust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 56px;
}

.illust-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 60%, var(--mint) 100%);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201,184,240,.2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.illust-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 28px rgba(244,167,195,.35);
}
.illust-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .4s ease;
}
.illust-card.nsfw-card img {
  filter: blur(12px);
}
.illust-card.nsfw-card:hover img {
  filter: blur(0);
}
/* NSFW unlocked (anonymous 18+ or full login) → remove blur */
body.nsfw-unlocked .illust-card.nsfw-card img {
  filter: none;
}
.illust-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42,26,46,.7) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
}
.illust-card:hover .illust-overlay {
  opacity: 1;
}
.illust-overlay h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.illust-overlay p {
  font-size: .68rem;
  color: rgba(255,255,255,.75);
}
.illust-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}

/* ---- Lightbox ---- */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(42,26,46,.9);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  object-fit: contain;
}
#lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s;
}
#lightbox-close:hover { opacity: 1; }
#lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .85rem;
  text-align: center;
  opacity: .8;
}

/* ---- Video Section ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

.video-card {
  background: rgba(255,255,255,.8);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 16px rgba(201,184,240,.15);
}
.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(244,167,195,.3);
}

.video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease;
  z-index: 2;
  cursor: pointer;
}
.video-card:hover .play-btn {
  transform: scale(1.15);
  background: rgba(244,167,195,.4);
}
.video-embed {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}

.video-info {
  padding: 14px 16px;
}
.video-info h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.video-info p {
  font-size: .75rem;
  color: var(--mid);
}

/* ---- Links ---- */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 56px;
}

.link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255,255,255,.8);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  transition: all .25s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(201,184,240,.1);
}
.link-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(244,167,195,.3);
  border-color: var(--pink);
  background: rgba(255,255,255,.95);
}
.link-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.link-text small {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--mid);
  letter-spacing: .04em;
}

/* ---- Footer ---- */
footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 32px 20px 48px;
  font-size: .75rem;
  color: var(--mid);
  letter-spacing: .08em;
}
footer .heart {
  color: var(--pink2);
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0%,100%{transform:scale(1)} 50%{transform:scale(1.25)}
}

/* ---- Floating Decorations ---- */
.deco {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  font-size: 1.4rem;
  opacity: .18;
  animation: floatDeco 8s ease-in-out infinite;
}
.deco:nth-child(1){ top:8%;  left:4%;  animation-delay:0s; }
.deco:nth-child(2){ top:22%; right:6%; animation-delay:1.5s; }
.deco:nth-child(3){ top:55%; left:2%;  animation-delay:3s; }
.deco:nth-child(4){ top:70%; right:4%; animation-delay:4.5s; }
.deco:nth-child(5){ top:88%; left:8%;  animation-delay:2s; }
@keyframes floatDeco {
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(10deg)}
}

/* ---- Age Verification Modal ---- */
#age-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,26,46,.85);
  backdrop-filter: blur(8px);
}
.modal-box {
  background: var(--cream);
  border: 2px solid var(--lavender);
  border-radius: 28px;
  padding: 48px 40px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(42,26,46,.4);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.modal-box h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem;
  font-style: italic;
  color: var(--mid);
  margin-bottom: 8px;
}
.modal-box p {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 28px;
}
.modal-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-yes {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--pink2), var(--lavender));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px rgba(232,114,154,.4);
}
.btn-yes:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,114,154,.5);
}
.btn-no {
  padding: 12px 32px;
  background: transparent;
  color: var(--mid);
  border: 2px solid var(--lavender);
  border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-no:hover {
  background: rgba(201,184,240,.2);
}

/* ---- Detail Page Specific ---- */
.detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 80px;
  position: relative;
  z-index: 5;
}

.detail-card {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(201,184,240,.2);
  margin-bottom: 32px;
}

.detail-image {
  width: 100%;
  display: block;
}

.detail-info {
  padding: 28px 32px;
}
.detail-info h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  color: var(--dark);
  margin-bottom: 12px;
}
.detail-info p {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 8px;
}
.detail-info .meta {
  font-size: .78rem;
  color: var(--mid);
  margin-top: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--mid);
  text-decoration: none;
  padding: 10px 24px;
  border: 2px solid var(--lavender);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  transition: all .25s ease;
  margin-bottom: 32px;
}
.back-link:hover {
  background: var(--pink);
  border-color: var(--pink2);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(244,167,195,.5);
}

/* ---- Manga Reader ---- */
.manga-reader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.manga-reader img {
  width: 100%;
  max-width: 720px;
  display: block;
}

/* ---- Auth Bar ---- */
.auth-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid rgba(201,184,240,.3);
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
}
.auth-bar iframe {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: none;
}
.auth-bar-hint {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  color: #5c3d6e;
  white-space: nowrap;
  display: none;
}
.auth-bar-hint strong { color: #e8729a; }
.auth-bar-hint.visible { display: inline; }
body.member-unlocked .auth-bar-hint { display: none !important; }
body { padding-top: 48px; }
@media(max-width:600px) {
  .auth-bar { height: 40px; padding: 0 8px; gap: 6px; }
  .auth-bar iframe { height: 40px; }
  .auth-bar-hint { font-size: .62rem; }
  body { padding-top: 40px; }
}

/* Members badge in detail-page h2 — same chip shape as nsfw-badge but purple
   to distinguish from the NSFW (pink) chip. Used by the unified content gate. */
.members-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #c9b8f0;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ---- Detail-page content gating (NSFW + Members) ----
   viewer.js sets body.nsfw-page when h2 has .nsfw-badge, body.members-page
   when h2 has .members-badge. Auth iframe adds .nsfw-unlocked (anonymous
   age-verify or higher) and .member-unlocked (full Google/Twitter login).
   While locked, content (detail image / manga pages / video / fullscreen
   lightbox img) is blurred and interaction is blocked so visitors can't
   see it just by hitting the URL directly — including via seamless
   episode swaps in the manga reader. */
body.nsfw-page:not(.nsfw-unlocked) .detail-image,
body.nsfw-page:not(.nsfw-unlocked) .manga-reader img,
body.nsfw-page:not(.nsfw-unlocked) .manga-h-page,
body.nsfw-page:not(.nsfw-unlocked) #video-player,
body.nsfw-page:not(.nsfw-unlocked) #video-placeholder,
body.nsfw-page:not(.nsfw-unlocked) .lb-img,
body.members-page:not(.member-unlocked) .detail-image,
body.members-page:not(.member-unlocked) .manga-reader img,
body.members-page:not(.member-unlocked) .manga-h-page,
body.members-page:not(.member-unlocked) #video-player,
body.members-page:not(.member-unlocked) #video-placeholder,
body.members-page:not(.member-unlocked) .lb-img {
  filter: blur(36px) brightness(.35) saturate(.5);
  pointer-events: none;
  user-select: none;
}
body.nsfw-page:not(.nsfw-unlocked) .fs-open-btn,
body.nsfw-page:not(.nsfw-unlocked) .fs-inline-btn,
body.nsfw-page:not(.nsfw-unlocked) .fs-bar,
body.nsfw-page:not(.nsfw-unlocked) .fs-kbd-hint,
body.members-page:not(.member-unlocked) .fs-open-btn,
body.members-page:not(.member-unlocked) .fs-inline-btn,
body.members-page:not(.member-unlocked) .fs-bar,
body.members-page:not(.member-unlocked) .fs-kbd-hint {
  display: none;
}
body.nsfw-page:not(.nsfw-unlocked) .detail-container::before {
  content: "\1F512  18+ content — Click 18+ Enter at the top to view";
  display: block;
  margin: 24px auto;
  padding: 18px 28px;
  max-width: 500px;
  background: linear-gradient(135deg, rgba(232,114,154,.95), rgba(201,184,240,.95));
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(232,114,154,.35);
}
/* Members gate notice — shown unless member-unlocked. Members-page also
   implies NSFW in practice, but use a distinct message that calls for full
   login (Google / Twitter), since anonymous age-verify is not enough. */
body.members-page:not(.member-unlocked) .detail-container::after {
  content: "\1F512  Members only — Sign in with Google or Twitter to view";
  display: block;
  margin: 24px auto;
  padding: 18px 28px;
  max-width: 520px;
  background: linear-gradient(135deg, rgba(201,184,240,.95), rgba(232,114,154,.95));
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(201,184,240,.4);
}

/* ---- NSFW / Members visibility ---- */
/* NSFW cards are ALWAYS rendered, but their thumbnail is frosted until the
   visitor unlocks (age verification / anonymous login). Hiding them entirely
   made the site look empty to unlogged visitors. */
.nsfw-card img {
  filter: blur(20px) brightness(.75) saturate(.6) !important;
  transition: filter .4s;
}
/* Unblur when NSFW is unlocked, but never override members-only blur —
   members-only needs full login to clear, not just anonymous age-verify. */
body.nsfw-unlocked .nsfw-card:not(.members-only) img {
  filter: none !important;
}
.nsfw-card { position: relative; }
.nsfw-card::before {
  content: "18+";
  position: absolute; top: 8px; right: 8px; z-index: 5;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(232,114,154,.92); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  pointer-events: none;
  transition: opacity .3s;
}
body.nsfw-unlocked .nsfw-card::before { opacity: 0; }
/* A members-only card that is ALSO nsfw shows the lock badge (left) — hide
   the 18+ badge so they don't overlap. */
.nsfw-card.members-only::before { display: none; }

/* Pin the title strip at the bottom on locked illust NSFW cards so visitors
   can read what it is, matching the members-only behavior. */
.nsfw-card.illust-card .illust-overlay {
  opacity: 1;
  top: auto;
  bottom: 0;
  height: auto;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(42,26,46,.92) 0%, rgba(42,26,46,.82) 60%, rgba(42,26,46,0) 100%);
  z-index: 4;
}
.nsfw-card.illust-card .illust-overlay h3 {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.nsfw-card.illust-card .illust-overlay p {
  color: rgba(255,255,255,.85);
}
body.nsfw-unlocked .nsfw-card.illust-card .illust-overlay {
  opacity: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(42,26,46,.7) 0%, transparent 55%);
}
body.nsfw-unlocked .nsfw-card.illust-card:hover .illust-overlay {
  opacity: 1;
}
/* Members blur uses !important so it's not overridden by .nsfw-unlocked unblur */
/* Frosted-glass style for members-only cards: strong blur + slight darken
   on the image only, so the title/caption/tags stay fully readable. A
   small lock icon badge marks it as members-only. */
.members-only img {
  filter: blur(20px) brightness(.75) saturate(.6) !important;
  transition: filter .4s;
}
body.member-unlocked .members-only img {
  filter: none !important;
}
.members-only { position: relative; }
.members-only::before {
  content: "\1F512";
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 28px; height: 28px; line-height: 28px;
  text-align: center; border-radius: 999px;
  background: rgba(42,26,46,.78); color: #fff;
  font-size: .85rem;
  pointer-events: none;
  transition: opacity .3s;
}
body.member-unlocked .members-only::before { opacity: 0; }
.members-only .members-lock-overlay { display: none; }

/* Members-only call-to-action ribbon. Shown on locked cards so visitors
   understand the work exists but needs a login to see. Positioned at the
   center of the thumbnail, above the frost. Hidden once member-unlocked. */
.members-only::after {
  content: "\1F510  Sign in to unlock";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 6px 14px;
  background: rgba(232, 114, 154, .92);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  pointer-events: none;
  transition: opacity .3s;
}
body.member-unlocked .members-only::after { opacity: 0; }

/* Global banner rendered by JS when locked members-only cards are present.
   Sits above the first section so visitors see "N works need a login". */
.members-teaser-banner {
  max-width: 900px;
  margin: 16px auto 8px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(232,114,154,.12), rgba(201,184,240,.14));
  border: 1.5px solid rgba(232,114,154,.35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: #5c3d6e;
}
.members-teaser-banner strong { color: #e8729a; font-weight: 800; }
.members-teaser-banner .teaser-cta {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, #e8729a, #c9b8f0);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(232,114,154,.35);
}
body.member-unlocked .members-teaser-banner { display: none; }

/* illust-card's overlay is hover-only by default. For members-only cards,
   pin the title strip at the bottom always so visitors can see what it is
   without hovering or logging in. The image stays frosted, only the title
   strip is clearly readable. */
.members-only.illust-card .illust-overlay {
  opacity: 1 !important;
  top: auto;
  bottom: 0;
  height: auto;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(42,26,46,.92) 0%, rgba(42,26,46,.82) 60%, rgba(42,26,46,0) 100%);
  z-index: 4;
}
.members-only.illust-card .illust-overlay h3 {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.members-only.illust-card .illust-overlay p {
  color: rgba(255,255,255,.85);
}
body.member-unlocked .members-only.illust-card .illust-overlay {
  /* Revert to default illust-overlay layout: full-card inset with
     flex-end content alignment. Matches default .illust-overlay. */
  opacity: 0 !important;
  top: 0; right: 0; bottom: 0; left: 0; height: auto;
  padding: 12px;
  background: linear-gradient(to top, rgba(42,26,46,.7) 0%, transparent 55%);
}
body.member-unlocked .members-only.illust-card:hover .illust-overlay {
  opacity: 1 !important;
}
body.member-unlocked .members-only.illust-card .illust-overlay h3 {
  color: #fff;
  text-shadow: none;
}
body.member-unlocked .members-only.illust-card .illust-overlay p {
  color: rgba(255,255,255,.75);
}

/* Members-only gallery-card (manga) and video-card: full-frost the card,
   move the info block to an overlay at the bottom of the thumb. Mirrors
   the gallery page result-card treatment so all categories look uniform. */
.members-only.gallery-card,
.members-only.video-card {
  aspect-ratio: 3 / 4;
  background: #2a1a2e;
}
.members-only.gallery-card .gallery-thumb,
.members-only.video-card .video-thumb {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
}
.members-only.gallery-card .gallery-thumb img,
.members-only.video-card .video-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}
.members-only.gallery-card .gallery-info,
.members-only.video-card .video-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 16px;
  background: linear-gradient(to top, rgba(42,26,46,.94) 0%, rgba(42,26,46,.84) 55%, rgba(42,26,46,0) 100%);
  z-index: 3;
  pointer-events: none;
}
.members-only.gallery-card .gallery-info h3,
.members-only.video-card .video-info h3 {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  font-size: .82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.members-only.gallery-card .gallery-info p,
.members-only.video-card .video-info p {
  color: rgba(255,255,255,.8);
  font-size: .7rem;
}
body.member-unlocked .members-only.gallery-card,
body.member-unlocked .members-only.video-card {
  aspect-ratio: auto;
  background: transparent;
}
body.member-unlocked .members-only.gallery-card .gallery-thumb,
body.member-unlocked .members-only.video-card .video-thumb {
  position: relative !important;
  inset: auto !important;
}
body.member-unlocked .members-only.gallery-card .gallery-info,
body.member-unlocked .members-only.video-card .video-info {
  position: static;
  background: transparent;
  padding: 14px 16px;
}
body.member-unlocked .members-only.gallery-card .gallery-info h3,
body.member-unlocked .members-only.video-card .video-info h3 {
  color: #2a1a2e;
  text-shadow: none;
}
body.member-unlocked .members-only.gallery-card .gallery-info p,
body.member-unlocked .members-only.video-card .video-info p {
  color: #5c3d6e;
}

/* Tag pills on detail pages (illust/manga/video/blog) */
.detail-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed rgba(201,184,240,.5);
}
.detail-tag {
  font-size: .72rem; padding: 4px 12px; border-radius: 999px;
  background: rgba(201,184,240,.2); color: #5c3d6e;
  text-decoration: none; transition: background .2s, color .2s;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 600;
}
.detail-tag:hover {
  background: #f4a7c3; color: #fff;
}

/* Tag pills injected into members-only cards via JS (see index.html) */
.members-only .card-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.members-only .card-tag {
  font-size: .58rem; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff;
}
body.member-unlocked .members-only .card-tag {
  background: rgba(201,184,240,.2); color: #5c3d6e;
}

/* ---- Download button & notice ---- */
.dl-btn {
  display: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--mint), #7dd3b8);
  color: white;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  margin-top: 8px;
}
body.member-unlocked .dl-btn { display: inline-block; }
.dl-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,230,212,.5); }

.dl-notice {
  display: block;
  font-size: .82rem;
  color: var(--mid);
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(201,184,240,.1);
  border: 1.5px dashed var(--lavender);
  border-radius: 12px;
  text-align: center;
}
body.member-unlocked .dl-notice { display: none; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-size: .78rem;
  color: var(--mid);
  margin-bottom: 20px;
}
.breadcrumb a {
  color: var(--pink2);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---- Blog ---- */
.blog-list {
  max-width: 720px;
  margin: 0 auto 56px;
}

.blog-post {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
.blog-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(244,167,195,.25);
}

.blog-post-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.blog-post-date {
  font-size: .72rem;
  color: var(--mid);
  margin-bottom: 10px;
}

.blog-post-excerpt {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text);
}

.blog-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 80px;
  position: relative;
  z-index: 5;
}

.blog-detail-card {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(201,184,240,.4);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 32px;
}

.blog-detail-card h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 8px;
}

.blog-detail-card .blog-date {
  font-size: .78rem;
  color: var(--mid);
  margin-bottom: 20px;
}

.blog-detail-card .blog-body {
  font-size: .92rem;
  line-height: 2;
  color: var(--text);
}

.blog-detail-card .blog-body a {
  color: var(--pink2);
}

.blog-detail-card .blog-body a:hover {
  text-decoration: underline;
}

/* ---- Fullscreen viewer open button + lightbox (viewer.js) ---- */
/* Illust detail pages: viewer.js inserts .fs-bar above the artwork and
   .fs-kbd-hint below it (mirrors the manga reader: button bar on top,
   keyboard legend on bottom). The button never overlays the image. */
.fs-bar {
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}
.fs-kbd-hint {
  text-align: center;
  margin: 6px auto 14px;
  padding: 6px 14px;
  font-size: .75rem;
  color: #5c3d6e;
  letter-spacing: .3px;
}
.fs-kbd-hint b {
  background: rgba(201,184,240,.35);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
}
.fs-open-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, #e8729a, #c9b8f0);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .15s, box-shadow .15s;
}
.fs-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 114, 154, .55);
}
/* Fallback when no .detail-card host: float in top-left of the viewport. */
.fs-open-btn.fs-floating {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  backdrop-filter: blur(4px);
}
@media (max-width: 600px) {
  .fs-open-btn { padding: 8px 16px; font-size: .75rem; }
  .fs-open-btn.fs-floating { top: 8px; left: 8px; }
}


.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 15, .96);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lightbox.open { display: flex; }
.lightbox .lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}
.lightbox .lb-img {
  /* Fill the stage and let object-fit preserve aspect ratio. width/height auto
     would cap small images at their native size, leaving them visibly smaller
     than the viewport on large displays. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.lightbox .lb-stage.lb-two .lb-img {
  width: 50%;
  height: 100%;
}
.lightbox .lb-spread { top: 16px; right: 128px; font-size: .75rem; font-weight: 700; }
.lightbox .lb-spread.active { background: linear-gradient(135deg, #e8729a, #c9b8f0); }
.lightbox:fullscreen { background: #000; }
.lightbox button {
  position: absolute;
  background: rgba(42, 26, 46, .78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: 1.4rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
  z-index: 2;
}
.lightbox button:hover { background: rgba(232, 114, 154, .85); transform: scale(1.06); }
.lightbox .lb-close { top: 16px; right: 16px; }
.lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .82);
  font-size: .85rem;
  background: rgba(42, 26, 46, .78);
  padding: 6px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.lightbox .lb-hint {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-size: .78rem;
  background: rgba(0, 0, 0, .55);
  padding: 10px 22px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 100000;
  opacity: 0;
  transition: opacity .6s ease;
  white-space: nowrap;
  letter-spacing: .3px;
}
@media (max-width: 600px) {
  .lightbox button { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox .lb-spread { right: 110px; font-size: .7rem; }
  .lightbox .lb-stage.lb-two .lb-img { max-width: 50vw; }
  .lightbox .lb-hint { font-size: .65rem; padding: 8px 14px; }
}