/* =========================================================
   万話異聞録 ADD-ON CSS
   既存 style.css を変更せず、万話異聞録とTOP追加分だけを拡張
   ========================================================= */

.manwa-series-card{margin-top:20px}

/* ----- 万話異聞録ページ：黒・赤・白を軸に既存はり研UIを継承 ----- */
.manwa-page{
  --manwa-red:#d9141e;
  --manwa-red-dark:#78070d;
  --manwa-black:#080808;
  --manwa-white:#fffdf4;
  --manwa-paper:#fff0a8;
  --manwa-blue:#223477;
  background:#080808;
}
.manwa-page:before{
  background:
    radial-gradient(circle at 15% 18%,rgba(217,20,30,.28),transparent 27%),
    radial-gradient(circle at 86% 20%,rgba(255,255,255,.11),transparent 25%),
    radial-gradient(circle at 50% 78%,rgba(217,20,30,.18),transparent 32%),
    linear-gradient(145deg,#050505,#130506 48%,#050505);
}
.manwa-page:after{
  opacity:.10;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(0deg,rgba(217,20,30,.18) 1px,transparent 1px);
  background-size:38px 38px;
}
.manwa-page .site-header{border-bottom-color:rgba(217,20,30,.86)}
.manwa-page .site-header:after{background:linear-gradient(90deg,#fff,var(--manwa-red),#111,var(--manwa-red),#fff)}
.manwa-page .nav a:hover{background:var(--manwa-red);color:#fff}
.manwa-page .progress-bar{background:linear-gradient(90deg,#fff,var(--manwa-red),#fff,var(--manwa-red),#fff);box-shadow:0 0 18px rgba(217,20,30,.88)}
.manwa-page .ambient-bg span:nth-child(1){background:#fff;opacity:.08}
.manwa-page .ambient-bg span:nth-child(2){background:var(--manwa-red);opacity:.27}
.manwa-page .ambient-bg span:nth-child(3){background:#5d0005;opacity:.24}
.manwa-page .cursor-glow{background:radial-gradient(circle,rgba(217,20,30,.18),rgba(255,255,255,.06) 35%,transparent 70%)}

.manwa-hero{padding-top:38px}
.manwa-logo-wrap{
  width:min(920px,94%);
  margin:0 auto 22px;
  padding:16px 28px;
  border-top:2px solid rgba(255,255,255,.18);
  border-bottom:2px solid rgba(217,20,30,.48);
}
.manwa-logo{max-width:900px;margin:0 auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.78)) drop-shadow(0 0 24px rgba(217,20,30,.25))}
.manwa-concept-img{
  border-color:#050505;
  box-shadow:0 0 0 3px rgba(217,20,30,.68),0 22px 58px rgba(0,0,0,.62);
}
.manwa-btn{background:linear-gradient(#ff4853,#c90c16);color:#fff;border-color:#080808}

.manwa-section-title h2{text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 20px rgba(217,20,30,.22)}
.manwa-section-title .sub{color:#ffb4b8}

.manwa-lead-card{
  background:linear-gradient(135deg,#fff8d8,#ffec91);
  border-color:#0a0a0a;
  box-shadow:0 0 0 2px rgba(217,20,30,.42),0 22px 55px rgba(0,0,0,.46);
}
.manwa-hook{
  font-size:clamp(22px,3vw,34px)!important;
  line-height:1.45;
  margin-top:0;
  color:#8e0710;
  font-weight:1000!important;
}

.manwa-emblems{align-items:stretch}
.manwa-emblem-card{
  min-height:100%;
  background:#fff2b9;
  border-color:#070707;
  position:relative;
  overflow:hidden;
}
.manwa-emblem-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:8px;
  background:#223477;
}
.manwa-emblem-card img{
  width:min(190px,72%);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  border:3px solid #0b0b0b;
  background:#fff;
}
.manwa-emblem-card h3{
  font-size:34px;
  line-height:1;
  margin:3px 0 0;
  color:#111;
  font-weight:1000;
}
.manwa-emblem-card p{max-width:300px}
.manwa-emblem-card.katari-card:before{background:#223477}
.manwa-emblem-card.sei-card:before{background:#f2f2f2;box-shadow:inset 0 -2px 0 #223477}
.manwa-emblem-card.ma-card:before{background:#d9141e}

.manwa-static-tab{cursor:default;pointer-events:none;background:#fff0a8!important}

.manwa-page #manwaCardsMount .faction-heading{
  justify-content:center;
  text-align:center;
  margin:46px auto 22px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
}
.manwa-page #manwaCardsMount .faction-heading img{
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:18px;
  border:3px solid #fff;
  box-shadow:0 9px 0 #000,0 0 0 3px rgba(217,20,30,.34);
}
.manwa-page #manwaCardsMount .faction-heading h3{
  font-size:clamp(30px,4vw,46px);
  margin:0;
  font-weight:1000;
  text-shadow:3px 3px 0 #000;
}
.manwa-page #manwaCardsMount .faction-heading .faction-sub{
  font-size:12px;
  display:block;
  color:#ffdbdd;
  letter-spacing:.12em;
  margin-top:4px;
}

.manwa-page .seal-card{
  background:linear-gradient(180deg,#fff9db 0%,#ffefaa 100%);
  border-color:#0a0a0a;
}
.manwa-page .seal-card:hover{transform:translateY(-5px) rotate(var(--tilt,0deg))}
.manwa-page .seal-card.flipped .back{opacity:1}
.manwa-page .seal-card.flipped .front{opacity:0}
.manwa-page .seal-card.flipped:hover .back{opacity:1}
.manwa-page .seal-card.flipped:hover .front{opacity:0}
.manwa-page .tag.katari{background:#223477;color:#fff}
.manwa-page .tag.sei{background:#fff;color:#18255f}
.manwa-page .tag.ma{background:#d9141e;color:#fff}
.manwa-page .tag.story{background:#fff5cf;color:#1c1713}
.manwa-page .seal-name{color:#15100d}

.manwa-feature-cards{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto 30px;
}
.manwa-feature-cards .seal-card{
  width:min(390px,100%);
  padding:18px;
  border-width:5px;
  border-radius:28px;
  box-shadow:0 0 0 5px #fff,0 0 0 10px rgba(34,52,119,.95),0 24px 58px rgba(0,0,0,.55);
}
.manwa-faction-sei .manwa-feature-cards .seal-card{box-shadow:0 0 0 5px #fff,0 0 0 10px rgba(255,255,255,.78),0 0 0 13px rgba(34,52,119,.9),0 24px 58px rgba(0,0,0,.55)}
.manwa-faction-ma .manwa-feature-cards .seal-card{box-shadow:0 0 0 5px #fff,0 0 0 10px rgba(217,20,30,.95),0 24px 58px rgba(0,0,0,.55)}
.manwa-faction-katari .manwa-feature-cards .seal-card{box-shadow:0 0 0 5px #fff,0 0 0 10px rgba(34,52,119,.95),0 24px 58px rgba(0,0,0,.55)}

.manwa-page .seal-media{overflow:hidden}
.manwa-page .seal-media:after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:10px;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 24%,rgba(255,255,255,.28) 42%,transparent 60%);
  transform:translateX(-145%);
  transition:transform .65s ease;
  z-index:3;
}
.manwa-page .seal-card:hover .seal-media:after{transform:translateX(145%)}

.manwa-footer{border-top-color:#d9141e}

/* Lightbox */
.manwa-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}
.manwa-lightbox.open{display:flex}
.manwa-lightbox-inner{
  width:min(780px,94vw);
  max-height:92vh;
  display:grid;
  place-items:center;
  position:relative;
}
.manwa-lightbox img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border:4px solid #fff;
  border-radius:18px;
  box-shadow:0 0 0 4px #d9141e,0 24px 70px #000;
  background:#111;
}
.manwa-lightbox-close{
  position:absolute;
  right:-8px;
  top:-14px;
  z-index:2;
  width:46px;height:46px;
  border-radius:50%;
  border:3px solid #fff;
  background:#d9141e;
  color:#fff;
  font-size:28px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 6px 0 #000;
}
.manwa-lightbox-caption{
  margin-top:14px;
  color:#fff;
  font-weight:1000;
  text-align:center;
  text-shadow:2px 2px 0 #000;
}

@media(max-width:900px){
  .manwa-logo-wrap{padding:12px 18px}
  .manwa-emblem-card img{width:160px}
  .manwa-page #manwaCardsMount .faction-heading{margin-top:36px}
}
@media(max-width:560px){
  .manwa-series-card{margin-top:14px}
  .manwa-logo-wrap{width:100%;padding:8px 10px;margin-bottom:14px}
  .manwa-hero{padding-top:20px}
  .manwa-page #manwaCardsMount .faction-heading{display:grid;place-items:center;gap:8px}
  .manwa-page #manwaCardsMount .faction-heading img{width:76px;height:76px}
  .manwa-feature-cards .seal-card{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .manwa-page .seal-media:after{display:none}
}


/* Touch devices: shared style.css has hover-flip rules.
   On touch browsers :hover can remain sticky, so tap state must take priority. */
@media (hover:none), (pointer:coarse){
  .manwa-page .seal-card:not(.flipped):hover .back{opacity:0;transform:rotateY(-90deg)}
  .manwa-page .seal-card:not(.flipped):hover .front{opacity:1;transform:rotateY(0)}
  .manwa-page .seal-card.flipped .back,
  .manwa-page .seal-card.flipped:hover .back{opacity:1;transform:rotateY(0)}
  .manwa-page .seal-card.flipped .front,
  .manwa-page .seal-card.flipped:hover .front{opacity:0;transform:rotateY(90deg)}
}