/* =========================================================
   BILLY-STAYFREE PAGE — ページ固有スタイル
   共通: style.css（:root変数・back-btn・lang切り替え）
   ========================================================= */

/* ===== RESET（サブページ用上書き） ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{
  background:var(--bg);
  overflow-x:hidden;
}
body{
  background:var(--bg);
  color:var(--white);
  font-family:"BIZ UDPGothic","Noto Sans JP","Helvetica Neue",sans-serif;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== HERO AREA ===== */
.hero{
  position:relative;
  height:auto;
  min-height:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
  padding:56px 20px 16px;
  background:#060606;
}
/* Blood splatter backdrop */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(160,0,0,.7) 0%, transparent 22%),
    radial-gradient(ellipse at 80% 10%, rgba(140,0,0,.5) 0%, transparent 18%),
    radial-gradient(ellipse at 60% 75%, rgba(180,0,0,.4) 0%, transparent 20%),
    radial-gradient(ellipse at 5% 80%,  rgba(120,0,0,.6) 0%, transparent 15%),
    radial-gradient(ellipse at 90% 55%, rgba(100,0,0,.45) 0%, transparent 18%),
    radial-gradient(ellipse at 45% 40%, rgba(90,0,0,.3) 0%, transparent 25%),
    radial-gradient(ellipse at 30% 90%, rgba(150,0,0,.35) 0%, transparent 12%),
    radial-gradient(circle at 70% 30%, rgba(200,0,0,.15) 0%, transparent 30%),
    radial-gradient(ellipse at center, rgba(6,6,6,0) 40%, rgba(0,0,0,.96) 100%);
  animation:bloodPulse 8s ease-in-out infinite alternate;
}
@keyframes bloodPulse{
  0%{opacity:.8}
  100%{opacity:1}
}

/* Skull watermark */
.hero::after{
  content:"☠";
  position:absolute;
  font-size:clamp(160px,25vw,320px);
  color:rgba(255,255,255,.025);
  z-index:0;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  line-height:1;
  pointer-events:none;
  user-select:none;
}

/* Blood drip SVG overlay */
.blood-drips{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
  overflow:hidden;
}
.drip{
  position:absolute;top:0;
  width:3px;
  background:linear-gradient(to bottom, rgba(180,0,0,.9), rgba(120,0,0,.4), transparent);
  border-radius:0 0 50% 50%;
  animation:drip linear infinite;
}
.drip:nth-child(1){left:8%;height:180px;animation-duration:4s;animation-delay:0s;width:4px;}
.drip:nth-child(2){left:23%;height:120px;animation-duration:6s;animation-delay:1.5s;}
.drip:nth-child(3){left:52%;height:210px;animation-duration:5s;animation-delay:.8s;width:5px;}
.drip:nth-child(4){left:71%;height:150px;animation-duration:7s;animation-delay:2s;}
.drip:nth-child(5){left:88%;height:95px;animation-duration:4.5s;animation-delay:.3s;width:4px;}
.drip:nth-child(6){left:37%;height:135px;animation-duration:6.5s;animation-delay:3s;}
@keyframes drip{
  0%{opacity:0;transform:scaleY(0);transform-origin:top;}
  10%{opacity:1;}
  70%{opacity:.8;}
  100%{opacity:0;transform:scaleY(1);transform-origin:top;}
}

/* ===== HERO CONTENT ===== */
.hero-inner{
  position:relative;z-index:2;
  text-align:center;
  max-width:900px;
}
.mag-badge{
  display:inline-block;
  font-family:"Special Elite",monospace;
  font-size:11px;letter-spacing:.25em;
  color:var(--red-glow);
  border:1px solid var(--red);
  padding:5px 18px;
  margin-bottom:14px;
  text-transform:uppercase;
  background:rgba(120,0,0,.15);
}
.article-title-ja{
  font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;
  font-size:clamp(22px,4vw,40px);
  font-weight:900;
  line-height:1.25;
  color:var(--white);
  text-shadow:0 0 40px rgba(200,0,0,.7), 3px 3px 0 rgba(0,0,0,.9);
  margin-bottom:6px;
  letter-spacing:.05em;
}
.article-title-en{
  font-family:"Faster One",sans-serif;
  font-size:clamp(16px,3vw,32px);
  color:var(--red-glow);
  text-shadow:0 0 30px rgba(255,43,43,.8),0 4px 20px rgba(0,0,0,.9);
  letter-spacing:.06em;
  margin-bottom:0;
}
.skull-divider{
  display:flex;align-items:center;gap:16px;
  justify-content:center;
  margin:24px auto;
  max-width:500px;
}
.skull-divider::before,
.skull-divider::after{
  content:"";
  flex:1;
  height:2px;
  background:linear-gradient(to var(--dir,right), transparent, var(--red) 80%);
}
.skull-divider::after{--dir:left;}
.skull-divider span{
  font-size:28px;
  color:var(--red);
  filter:drop-shadow(0 0 8px rgba(255,0,0,.7));
}

/* ===== BLOOD SPLATTER IMAGES ===== */
.splat{
  position:absolute;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  user-select:none;
  z-index:0;
}
.splat-a{ background-image:url('img/common/splat_a.png'); }
.splat-b{ background-image:url('img/common/splat_b.png'); }

/* ===== BILLY PHOTO (floated inside article) ===== */
.article-photo-float{
  float:right;
  max-width:180px;
  margin:0 0 20px 24px;
  clear:right;
}
@media(max-width:520px){
  .article-photo-float{
    float:none;
    max-width:180px;
    margin:0 auto 24px;
    display:block;
  }
}
.billy-photo-wrap{
  position:relative;z-index:2;
  margin:0 auto 0;
  max-width:300px;
  padding:0 20px;
}
.billy-photo-frame{
  position:relative;
  border:3px solid #1a1a1a;
  box-shadow:
    0 0 0 1px rgba(180,0,0,.5),
    0 0 30px rgba(180,0,0,.3),
    inset 0 0 30px rgba(0,0,0,.6),
    8px 12px 40px rgba(0,0,0,.9);
  transform:rotate(-1.5deg);
  background:#0a0908;
}
.billy-photo-frame img{
  width:100%;
  display:block;
  filter:contrast(1.1) saturate(0.85) brightness(0.9);
}
.billy-photo-frame::after{
  content:"";
  position:absolute;
  bottom:-10px;right:-10px;
  width:90px;height:70px;
  background:radial-gradient(ellipse at 30% 40%, rgba(160,0,0,.85) 0%, rgba(100,0,0,.4) 50%, transparent 75%);
  transform:rotate(15deg);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.billy-photo-caption{
  font-family:"Special Elite",monospace;
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(220,200,180,.6);
  text-align:center;
  margin-top:12px;
  transform:rotate(-1.5deg);
}

/* ===== ARTICLE BODY ===== */
.article-wrap{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120,0,0,.1), transparent 50%),
    #060606;
  border-top:3px solid var(--red-deep);
}
.article-wrap::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 12%,  rgba(160,0,0,.22) 0%, rgba(120,0,0,.08) 10%, transparent 16%),
    radial-gradient(ellipse at 94% 6%,  rgba(180,0,0,.2)  0%, rgba(140,0,0,.06) 8%,  transparent 14%),
    radial-gradient(ellipse at 2% 55%,  rgba(150,0,0,.18) 0%, transparent 10%),
    radial-gradient(ellipse at 98% 40%, rgba(140,0,0,.16) 0%, transparent 8%),
    radial-gradient(ellipse at 50% 98%, rgba(120,0,0,.14) 0%, transparent 12%),
    radial-gradient(circle at 20% 30%, rgba(170,0,0,.3)  0%, transparent 3%),
    radial-gradient(circle at 78% 22%, rgba(160,0,0,.28) 0%, transparent 2.5%),
    radial-gradient(circle at 45% 48%, rgba(180,0,0,.25) 0%, transparent 2%),
    radial-gradient(circle at 65% 65%, rgba(150,0,0,.22) 0%, transparent 3%),
    radial-gradient(circle at 12% 78%, rgba(160,0,0,.26) 0%, transparent 2%),
    radial-gradient(circle at 88% 72%, rgba(140,0,0,.22) 0%, transparent 2.5%),
    radial-gradient(circle at 55% 28%, rgba(175,0,0,.2)  0%, transparent 2%),
    radial-gradient(circle at 30% 62%, rgba(165,0,0,.18) 0%, transparent 2.5%),
    radial-gradient(circle at 33% 15%, rgba(200,0,0,.38) 0%, transparent 1%),
    radial-gradient(circle at 67% 42%, rgba(190,0,0,.32) 0%, transparent 1%),
    radial-gradient(circle at 52% 85%, rgba(180,0,0,.3)  0%, transparent 1.2%),
    radial-gradient(circle at 85% 90%, rgba(170,0,0,.28) 0%, transparent 1%),
    radial-gradient(circle at 15% 95%, rgba(160,0,0,.25) 0%, transparent 1.3%),
    radial-gradient(circle at 42% 36%, rgba(200,0,0,.3)  0%, transparent 0.8%),
    radial-gradient(circle at 73% 55%, rgba(185,0,0,.28) 0%, transparent 0.9%),
    radial-gradient(ellipse at 0% 100%,   rgba(120,0,0,.1) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 0%,   rgba(100,0,0,.08) 0%, transparent 25%),
    radial-gradient(ellipse at 100% 100%, rgba(110,0,0,.08) 0%, transparent 20%);
}
.article-inner{
  position:relative;z-index:1;
  max-width:780px;
  margin:0 auto;
  padding:20px 24px 80px;
}
.byline{
  font-family:"Special Elite",monospace;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--red-glow);
  text-align:center;
  margin-bottom:20px;
  opacity:.85;
}
.byline span{
  display:inline-block;
  padding:6px 20px;
  border:1px solid rgba(200,0,0,.4);
  background:rgba(180,0,0,.08);
}

/* Article paragraphs */
.article-body p{
  font-size:clamp(15px,2.2vw,17px);
  line-height:2;
  letter-spacing:.04em;
  color:#e8dfc8;
  margin-bottom:28px;
  text-align:justify;
}
.article-body .lede{
  font-size:clamp(16px,2.8vw,22px);
  line-height:2;
  color:var(--white);
  font-weight:900;
  margin-bottom:34px;
  text-align:center;
  letter-spacing:.08em;
}
.article-body .date-line{
  font-family:"Special Elite",monospace;
  font-size:clamp(18px,3vw,28px);
  color:var(--red-glow);
  text-align:center;
  margin-bottom:8px;
  letter-spacing:.1em;
  text-shadow:0 0 20px rgba(255,43,43,.6);
}

/* Mid-article skull separator */
.mid-skull{
  text-align:center;
  margin:52px 0;
  position:relative;
}
.mid-skull::before{
  content:"";
  position:absolute;
  top:50%;left:0;right:0;
  height:2px;
  background:linear-gradient(to right, transparent, var(--red) 25%, var(--red) 75%, transparent);
  transform:translateY(-50%);
  box-shadow:0 0 8px rgba(255,0,0,.4);
}
.mid-skull span{
  position:relative;z-index:1;
  display:inline-block;
  font-size:52px;
  background:#060606;
  padding:0 24px;
  color:var(--red-glow);
  filter:drop-shadow(0 0 12px rgba(255,0,0,.8)) drop-shadow(0 0 24px rgba(200,0,0,.5));
  line-height:1;
}

/* Manifesto section */
.manifesto{
  margin-top:60px;
  padding:40px 32px;
  border:2px solid var(--red-deep);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(200,0,0,.06) 27px, rgba(200,0,0,.06) 28px),
    rgba(0,0,0,.4);
  position:relative;
}
.manifesto::before{
  content:"☠ ROCK'N'ROLL ☠";
  position:absolute;
  top:-12px;left:50%;transform:translateX(-50%);
  background:#0a0908;
  padding:0 16px;
  font-family:"Faster One",sans-serif;
  font-size:14px;
  color:var(--red);
  letter-spacing:.15em;
  white-space:nowrap;
}
.manifesto p{
  font-size:clamp(15px,2.5vw,20px) !important;
  line-height:2.2 !important;
  text-align:center !important;
  color:var(--white) !important;
  font-weight:900;
  letter-spacing:.06em;
}

/* RIP stamp */
.rip-stamp{
  text-align:center;
  margin:56px auto 0;
  display:inline-block;
  width:100%;
}
.rip-stamp .stamp-inner{
  display:inline-block;
  border:5px solid var(--red);
  padding:16px 40px;
  transform:rotate(-3deg);
  font-family:"Faster One",sans-serif;
  font-size:clamp(28px,5vw,52px);
  color:var(--red);
  letter-spacing:.15em;
  text-shadow:0 0 30px rgba(255,0,0,.5);
  box-shadow:
    0 0 0 2px rgba(255,0,0,.3),
    inset 0 0 20px rgba(255,0,0,.07);
  opacity:.88;
  background:rgba(0,0,0,.3);
}

/* Footer back link */
.article-footer{
  text-align:center;
  padding:50px 20px 80px;
  background:#060606;
  border-top:1px solid rgba(180,0,0,.2);
}
.article-footer a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Special Elite",monospace;
  font-size:14px;letter-spacing:.15em;
  color:rgba(220,200,180,.7);
  border-bottom:1px solid rgba(180,0,0,.4);
  padding-bottom:4px;
  transition:color .2s;
}
.article-footer a:hover{color:var(--red-glow);}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a0908}
::-webkit-scrollbar-thumb{background:var(--red-deep)}