
body.s-manga{
  background-color:#fff8dc;
  background-image:radial-gradient(#ff7a1a33 1.5px,transparent 1.5px);
  background-size:18px 18px;
  font-weight:900;
  color:#111;
}
.comic{display:grid;gap:28px;padding:24px 16px 56px;max-width:880px}
.panel{
  background:#fff;
  border:5px solid #111;
  box-shadow:10px 10px 0 #111;
  border-radius:8px;
  padding:24px 20px;
  position:relative;
  overflow:hidden;
}
.panel.img{padding:0;line-height:0}
.title{
  background:#ffe135;
  text-align:center;
  padding:44px 20px;
}
.rays{
  position:absolute;
  inset:-60%;
  background:repeating-conic-gradient(from 0deg,#ff5e1444 0 4deg,transparent 4deg 11deg);
  animation:spin 55s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.comic-badge{
  position:relative;
  display:inline-block;
  background:#111;
  color:#ffe135;
  font-size:.9rem;
  font-weight:900;
  padding:.3em 1.1em;
  border:3px solid #fff;
  box-shadow:4px 4px 0 #111;
  margin-bottom:1rem;
  transform:rotate(-1.5deg);
}
.title h1{
  position:relative;
  color:#fff;
  font-size:clamp(2.2rem,7.5vw,4rem);
  -webkit-text-stroke:7px #111;
  paint-order:stroke fill;
  text-shadow:6px 6px 0 #111;
  transform:rotate(-1.5deg);
  line-height:1.18;
  margin:.2em 0;
}
.shout-sub{
  position:relative;
  margin:1rem auto 1.4rem;
  font-size:clamp(1.05rem,2.6vw,1.35rem);
  background:#fff;
  color:#111;
  border:4px solid #111;
  box-shadow:5px 5px 0 #111;
  display:inline-block;
  padding:.35em 1.1em;
  transform:rotate(1deg);
}
.title-cta{position:relative;z-index:2;margin-top:.5rem}
.s-manga .cta{
  background:#ff2e17;
  border:4px solid #111;
  box-shadow:6px 6px 0 #111;
}
.s-manga .cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #111}
.cap{
  display:inline-block;
  background:#111;
  color:#fff;
  padding:.2em .9em;
  font-size:.86rem;
  position:relative;
  z-index:1;
}
.comic-h2{
  font-size:clamp(1.5rem,4vw,2.2rem);
  margin:.4rem 0 1rem;
  color:#111;
}
.comic-episodes{display:grid;gap:24px}
.ep-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:4px solid #111;
  padding-bottom:10px;
  margin-bottom:16px;
}
.ep-scene{font-size:.85rem;color:#555}
.comic-split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:16px;
}
@media(max-width:680px){.comic-split{grid-template-columns:1fr}}
.c-frame{
  border:4px solid #111;
  padding:18px 16px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:190px;
}
.c-bad{
  background:repeating-linear-gradient(135deg,#e5e7eb,#e5e7eb 8px,#d1d5db 8px,#d1d5db 16px);
}
.c-good{
  background:#fff4b8;
}
.rays-sm{
  position:absolute;
  inset:-50%;
  background:repeating-conic-gradient(from 0deg,#ff7a1a33 0 6deg,transparent 6deg 14deg);
}
.sfx{
  position:relative;
  display:inline-block;
  font-weight:900;
  font-size:1.45rem;
  color:#fff;
  -webkit-text-stroke:5px #111;
  paint-order:stroke fill;
  text-shadow:3px 3px 0 #111;
  margin-bottom:10px;
  align-self:flex-start;
}
.sfx-bad{color:#60a5fa;transform:rotate(-4deg)}
.sfx-good{color:#ff2e17;font-size:1.65rem;transform:rotate(3deg);align-self:flex-end}
.bubble{
  background:#fff;
  border:4px solid #111;
  border-radius:22px;
  padding:14px 16px;
  font-size:1.05rem;
  position:relative;
  box-shadow:4px 4px 0 #111;
}
.bubble b{
  display:inline-block;
  font-size:.75rem;
  background:#111;
  color:#fff;
  padding:.15em .6em;
  border-radius:4px;
  margin-bottom:6px;
}
.bubble.ans{
  background:#ffe135;
  font-size:1.15rem;
  line-height:1.45;
}
.bubble.ans b{background:#ff2e17}
.comic-feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.cf-item{
  border:3px solid #111;
  background:#fffbe8;
  padding:12px 14px;
  box-shadow:4px 4px 0 #111;
}
.cf-item b{display:flex;align-items:center;gap:6px;font-size:.98rem;margin-bottom:4px}
.cf-item p{font-size:.84rem;font-weight:700;color:#333;line-height:1.5}
.real-comic .real{padding:1rem 0}
.s-manga details{border:4px solid #111;box-shadow:5px 5px 0 #111;border-radius:10px}
.title.end h2{
  position:relative;
  color:#fff;
  -webkit-text-stroke:6px #111;
  paint-order:stroke fill;
  text-shadow:5px 5px 0 #111;
  font-size:clamp(1.9rem,6vw,3.2rem);
  margin-bottom:.6em;
}
