:root{
  --bg:#0a0505;
  --bg-panel:#150a0b;
  --bg-panel2:#1c0d0e;
  --red-deep:#4a0a0e;
  --red-blood:#7a0f16;
  --red-bright:#c81620;
  --red-glow:#ff2b36;
  --pink:#ff6fb0;
  --pink-dim:#a34778;
  --gold:#ff6fb0;
  --gold-dim:#a34778;
  --cream:#f5eef2;
  --cream-dim:#c9b8c4;
  --muted:#75636e;
  --line: rgba(255,111,176,0.25);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Noto Sans JP', sans-serif;
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(122,15,22,0.25), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(122,15,22,0.18), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
}
/* language toggle */
body.lang-en .jp{display:none;}
body.lang-ja .en{display:none;}

a{color:var(--gold); text-decoration:none;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:linear-gradient(180deg, rgba(10,5,5,0.97), rgba(10,5,5,0.85));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.topbar .mark{
  font-family:'Cinzel Decorative','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--pink);
  letter-spacing:1px;
  text-shadow:0 0 12px rgba(255,111,176,0.55);
}
.nav-links{display:flex; gap:22px; font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;}
.nav-links a{color:var(--cream-dim); transition:color .2s;}
.nav-links a:hover{color:var(--red-glow);}
.langtoggle{
  display:flex; border:1px solid var(--gold-dim); border-radius:2px; overflow:hidden;
  font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:12px; letter-spacing:1px;
}
.langtoggle button{
  background:transparent; border:none; color:var(--cream-dim); padding:7px 14px; cursor:pointer;
  font-family:inherit; font-size:inherit; letter-spacing:inherit;
  transition:all .2s;
}
.langtoggle button.active{background:var(--red-blood); color:var(--cream);}
@media (max-width:820px){ .nav-links{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;
  max-width:none;
  margin:0;
  width:100%;
  padding:0;
  overflow:hidden;
  background:var(--bg);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 38%, rgba(122,15,22,0.55) 0%, transparent 72%),
    radial-gradient(ellipse farthest-corner at 50% 40%, transparent 0 25%, var(--bg) 85%);
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:2;
  width:calc(100% + 2cm);
  margin-left:-1cm;
  line-height:0;
}
.hero-content::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:44%;
  background:linear-gradient(to bottom, transparent 0%, var(--bg) calc(100% - 2.6cm), var(--bg) 100%);
  pointer-events:none;
  z-index:3;
}
.eyebrow{
  font-family:'Nosifer', cursive;
  font-size:13px; letter-spacing:6px; color:var(--pink);
  text-transform:uppercase; opacity:.9; margin-bottom:18px;
  text-shadow:0 0 10px rgba(255,111,176,.6);
}
.hero h1{
  font-family:'UnifrakturMaguntia', cursive;
  font-size:clamp(52px, 11vw, 128px);
  color:var(--cream);
  line-height:1;
  text-shadow:0 0 30px rgba(200,22,32,0.65), 0 0 70px rgba(200,22,32,0.35);
  letter-spacing:2px;
}
.hero .logo-img{
  display:block;
  width:100%;
  height:auto;
  animation: logoGlow 3.4s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(255,111,176,0.35)) drop-shadow(0 0 26px rgba(200,22,32,0.25)); }
  50%{ filter: drop-shadow(0 0 24px rgba(255,111,176,0.6)) drop-shadow(0 0 42px rgba(200,22,32,0.4)); }
}
@media (prefers-reduced-motion: reduce){
  .hero .logo-img{ animation:none; filter: drop-shadow(0 0 30px rgba(255,111,176,0.5)); }
}
.hero .site-logo{
  position:absolute;
  top:calc(50% - 4cm); left:50%;
  width:min(460px, 62vw);
  height:auto;
  z-index:4;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.7) rotate(-4deg);
  filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 0px rgba(255,111,176,0)) drop-shadow(0 0 0px rgba(255,111,176,0));
  animation:
    logoPop 1.15s cubic-bezier(.22,1.25,.36,1) 0.5s forwards,
    logoBloomIn 2.2s ease-out 1.65s forwards,
    logoPulse 3.6s ease-in-out 3.85s infinite;
}
@keyframes logoPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.7) rotate(-4deg); }
  55%{ opacity:1; transform:translate(-50%,-50%) scale(1.1) rotate(1.5deg); }
  80%{ transform:translate(-50%,-50%) scale(0.97) rotate(-0.5deg); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
@keyframes logoBloomIn{
  0%{ filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 0px rgba(255,111,176,0)) drop-shadow(0 0 0px rgba(255,111,176,0)); }
  100%{ filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(255,111,176,0.95)) drop-shadow(0 0 30px rgba(255,111,176,0.8)); }
}
@keyframes logoPulse{
  0%,100%{ filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(255,111,176,0.95)) drop-shadow(0 0 30px rgba(255,111,176,0.8)); }
  50%{ filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 17px rgba(255,111,176,1)) drop-shadow(0 0 40px rgba(255,111,176,0.95)); }
}
@media (prefers-reduced-motion: reduce){
  .hero .site-logo{
    animation:none; opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);
    filter:drop-shadow(0 0 20px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(255,111,176,0.95)) drop-shadow(0 0 30px rgba(255,111,176,0.8));
  }
}
@media (max-width:600px){
  .hero-content::after{
    height:40%;
    background:linear-gradient(to bottom, transparent 0%, var(--bg) calc(100% - 2.2cm), var(--bg) 100%);
  }
}
.hero .sub{
  font-family:'Cinzel','Noto Sans JP',sans-serif;
  font-size:14px;
  letter-spacing:4px;
  color:var(--gold);
  margin-top:18px;
  text-transform:uppercase;
}
.disclaimer{
  position:absolute;
  top:18px;
  left:14px;
  z-index:5;
  max-width:min(240px, 58vw);
  border:1px solid var(--gold-dim);
  background:rgba(10,5,5,0.7);
  padding:8px 12px;
  font-size:9.5px;
  letter-spacing:0.2px;
  color:var(--cream-dim);
  line-height:1.55;
  text-align:left;
}
.disclaimer .stamp{color:var(--red-glow); letter-spacing:2.5px; display:block; margin-bottom:4px; font-family:'Noto Sans JP', sans-serif; font-weight:900; font-size:10.5px;}

/* ---------- section framing ---------- */
section{ position:relative; padding:90px 24px; max-width:1180px; margin:0 auto; }
.hero + section{ padding-top:2cm; }
.section-head{ text-align:center; margin-bottom:56px; }
.section-head .num{
  font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:12px; letter-spacing:5px; color:var(--gold-dim); text-transform:uppercase;
}
.section-head h2{
  font-family:'Cinzel Decorative','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:clamp(28px, 4vw, 44px);
  color:var(--cream);
  margin-top:10px;
  text-shadow:0 0 20px rgba(200,22,32,0.3);
  opacity:0;
  letter-spacing:10px;
  transition:
    letter-spacing 1s cubic-bezier(.16,.8,.4,1) .15s,
    opacity 1s cubic-bezier(.16,.8,.4,1) .15s,
    text-shadow 1s ease .15s;
}
.section-head.visible h2{
  opacity:1;
  letter-spacing:2px;
  text-shadow:0 0 26px rgba(255,111,176,0.5), 0 0 20px rgba(200,22,32,0.3);
}
.divider{
  width:100%; max-width:1180px; margin:0 auto; padding:0 24px;
}
.divider svg{ width:100%; height:auto; display:block; opacity:.55; }

/* ---------- about / factions ---------- */
.lede{ max-width:760px; margin:0 auto 10px; text-align:center; color:var(--cream-dim); font-size:19px; }
.faction-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px; }
@media (max-width:900px){ .faction-grid{grid-template-columns:1fr;} }
.faction-card{
  border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-panel), var(--bg));
  padding:34px 28px; position:relative;
  border-radius:30px 6px 30px 6px;
  box-shadow:0 0 0 1px rgba(255,111,176,0.06) inset;
}
.faction-card::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg, transparent, var(--red-blood), transparent);
}
.faction-card .icon{ font-size:26px; color:var(--red-glow); margin-bottom:16px; }
.faction-card h3{ font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:18px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:14px; }
.faction-card p{ color:var(--cream-dim); font-size:16px; }

/* ---------- characters ---------- */
.group-label{
  font-family:'Cinzel','Noto Sans JP',sans-serif; letter-spacing:4px; text-transform:uppercase; font-size:13px;
  color:var(--red-glow); text-align:center; margin:70px 0 30px; opacity:.9;
}
.group-label:first-of-type{ margin-top:0; }
.char-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:22px; }
#grid-lucifer{ display:flex; justify-content:center; }
.gate-band{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:56px 24px;
  overflow:hidden;
}
.gate-band::before{
  content:"";
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  z-index:0;
  pointer-events:none;
}
.gate-band > *{ position:relative; z-index:1; }
.gate-band--lucifer{ margin-bottom:2cm; }
.gate-band--lucifer::before{
  background-image:url("../assets/images/lucifer-gate.png");
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}
.gate-band--center{
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  padding:40px 24px;
}
.gate-band--center::before{
  background-image:url("../assets/images/sera-gate.png");
  background-position:center;
  -webkit-mask-image:linear-gradient(to top, black 55%, transparent 100%);
  mask-image:linear-gradient(to top, black 55%, transparent 100%);
}
.char-card--center{ max-width:340px; width:100%; }
.char-card--center.open{ max-width:800px; }
#grid-lucifer .char-card{ max-width:340px; width:100%; }
.char-card{
  border:1px solid var(--line); background:var(--bg-panel);
  padding:26px 24px; cursor:pointer; transition:border-color .25s, transform .25s, background .25s;
  position:relative; overflow:hidden;
  border-radius:26px 6px 26px 6px;
  box-shadow:0 0 0 1px rgba(255,111,176,0.06) inset;
}
.char-card.open{ grid-column: 1 / -1; }
.char-card:hover{ border-color:var(--red-blood); transform:translateY(-3px); background:var(--bg-panel2); }
.char-card .role{ font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.char-card h4{ font-family:'Cinzel Decorative','Noto Sans JP',sans-serif; font-size:23px; color:var(--cream); margin:8px 0 12px; }
.char-card p{ font-size:15.5px; color:var(--cream-dim); white-space:pre-line; }
.char-card .more{
  margin-top:14px; font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:11px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
}
.char-card .more::before{
  content:"♡";
  display:inline-block;
  font-size:13px;
  transition:transform .3s ease, color .3s ease;
}
.char-card:hover .more::before{ animation:heartBeat 1.1s ease-in-out infinite; }
.char-card.open .more::before{ content:"♥"; color:var(--red-glow); animation:none; transform:scale(1.15); }
@keyframes heartBeat{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25); }
}
.char-card.open p{ }
.char-card .full{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  padding-top:0;
  border-top:1px dashed transparent;
  font-size:15.5px; color:var(--cream-dim);
  transition:max-height .5s cubic-bezier(.2,.8,.3,1), opacity .45s ease, margin-top .4s ease, padding-top .4s ease, border-color .4s ease;
}
.char-card.open .full{
  display:block;
  max-height:1200px;
  opacity:1;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.char-card .full-portrait-wrap{ display:none; }
.char-card.has-portrait.open{ display:flex; align-items:flex-start; }
.char-card .text-col{ order:1; flex:1 1 auto; min-width:0; }
.char-card.has-portrait.open .full-portrait-wrap{
  display:block;
  position:relative;
  order:2;
  width:calc(240px * var(--portrait-scale, 100) / 100);
  flex-shrink:0;
  margin:1cm -24px -26px 24px;
  z-index:1;
  opacity:0;
  transform:translateX(14px);
  transition:opacity .6s ease .1s, transform .6s cubic-bezier(.2,.8,.3,1) .1s;
  filter:drop-shadow(0 0 22px rgba(255,111,176,0.35));
}
.char-card.has-portrait.open .full-portrait-wrap .full-portrait{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.char-card.open.portrait-in .full-portrait-wrap{ opacity:1; transform:translateX(0); }
.char-card.open .more{ color:var(--red-glow); }
#grid-lucifer .char-card.open{ max-width:800px; }
@media (max-width:640px){
  .char-card.has-portrait.open{ flex-direction:column; grid-column:span 1; }
  .char-card .text-col{ order:2; }
  .char-card.has-portrait.open .full-portrait-wrap{
    order:1;
    width:100%;
    height:auto;
    margin:0 0 14px;
    filter:drop-shadow(0 0 18px rgba(255,111,176,0.3));
  }
}

/* ---------- glossary ---------- */
#glossary{ position:relative; }
#glossary .section-head, #glossary .gloss-list{ position:relative; z-index:1; }
.splatter{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform:scale(0.3) rotate(-25deg);
  transition:opacity .7s ease, transform 1s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 0 24px rgba(0,0,0,0.35));
}
.splatter.visible{ opacity:0.5; transform:scale(1) rotate(0deg); }
.splatter-1{ top:-30px; left:-50px; width:200px; transition-delay:.05s; }
.splatter-2{ top:100px; right:-30px; width:150px; transition-delay:.25s; }
.splatter-3{ bottom:-60px; left:8%; width:240px; transition-delay:.15s; }
.splatter-4{ bottom:10px; right:6%; width:220px; transition-delay:.35s; }
@media (prefers-reduced-motion: reduce){
  .splatter{ transition:none; opacity:0.5; transform:scale(1) rotate(0deg); }
}
@media (max-width:700px){
  .splatter-1{ width:130px; }
  .splatter-2{ width:100px; }
  .splatter-3{ width:150px; }
  .splatter-4{ width:140px; }
}
.gloss-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.gloss-item{ display:grid; grid-template-columns:220px 1fr; gap:26px; padding:22px 4px; border-bottom:1px solid var(--line); }
@media (max-width:700px){ .gloss-item{grid-template-columns:1fr;} }
.gloss-item dt{ font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:17px; letter-spacing:1px; color:var(--gold); }
.gloss-item dd{ color:var(--cream-dim); font-size:16px; }

/* ---------- columns ---------- */
.column-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:820px){ .column-grid{grid-template-columns:1fr;} }
.column-card{ border:1px solid var(--line); background:var(--bg-panel); padding:30px 28px; border-radius:28px 6px 28px 6px; box-shadow:0 0 0 1px rgba(255,111,176,0.06) inset; position:relative; }
.column-card .tag{ font-family:'Noto Sans JP', sans-serif; font-weight:900; font-size:12px; color:var(--red-glow); letter-spacing:2px; }
.column-card h3{ font-family:'Cinzel','Noto Sans JP',sans-serif; font-size:19px; color:var(--cream); margin:12px 0 16px; letter-spacing:1px; }
.column-card ul, .column-card ol{ list-style:none; }
.column-card li{ font-size:15.5px; color:var(--cream-dim); padding:5px 0; display:flex; gap:10px; }
.schedule li{ justify-content:space-between; border-bottom:1px dotted var(--line); }
.column-card .note{ margin-top:14px; font-size:13.5px; color:var(--muted); font-style:italic; }
.quiz-list li{ padding:3px 0; }
.quiz-check{
  display:flex; align-items:center; gap:12px;
  cursor:pointer;
  width:100%;
}
.quiz-check input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.quiz-box{
  flex-shrink:0;
  width:19px; height:19px;
  border:1.5px solid var(--gold-dim);
  border-radius:4px;
  position:relative;
  transition:border-color .2s, background .2s;
}
.quiz-box::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:11px;
  border:solid var(--bg-panel);
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .2s cubic-bezier(.4,1.6,.6,1);
}
.quiz-check input:checked + .quiz-box{
  background:var(--red-glow);
  border-color:var(--red-glow);
}
.quiz-check input:checked + .quiz-box::after{ transform:rotate(45deg) scale(1); }
.quiz-check input:focus-visible + .quiz-box{ outline:2px solid var(--pink); outline-offset:2px; }
.quiz-check:hover .quiz-box{ border-color:var(--red-glow); }
.quiz-success{
  margin-top:0;
  padding:0 16px;
  border:1px solid var(--red-glow);
  border-radius:14px 4px 14px 4px;
  background:rgba(200,22,32,0.12);
  color:var(--cream);
  font-size:15px;
  text-align:center;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform:translateY(-6px) scale(0.97);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), max-height .5s ease, margin-top .5s ease, padding .5s ease;
}
.quiz-success.visible{
  opacity:1;
  max-height:200px;
  margin-top:16px;
  padding:14px 16px;
  transform:translateY(0) scale(1);
}

/* ---------- footer ---------- */
footer{
  position:relative;
  overflow:hidden;
  padding:5cm 24px 40px;
  text-align:center;
  background:var(--bg);
}
.footer-scene{
  position:relative;
  width:calc(100% + 2cm);
  margin-left:-1cm;
  aspect-ratio:2400/822;
  background-image:url("../assets/images/crowd-band.png");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  box-shadow:
    inset 220px 0 160px -80px var(--bg),
    inset -220px 0 160px -80px var(--bg);
}
.footer-scene::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, transparent 55%, var(--bg) 100%);
  pointer-events:none;
}
.footer-content{ position:relative; z-index:1; padding-top:36px; }
footer .mark{ font-family:'Cinzel Decorative','Noto Sans JP',sans-serif; font-weight:700; font-size:24px; color:var(--pink); margin-bottom:14px; text-shadow:0 0 14px rgba(255,111,176,0.4); }
footer p{ font-size:13px; color:var(--muted); max-width:520px; margin:0 auto; letter-spacing:.5px; }
footer p.credit{ font-weight:700; color:var(--cream-dim); margin-top:22px; }
footer p.credit a{ color:var(--pink); text-decoration:none; transition:color .2s; }
footer p.credit a:hover{ color:var(--red-glow); text-decoration:underline; }
footer .flames{ margin-top:22px; font-size:20px; color:var(--red-blood); letter-spacing:16px; }

::selection{ background:var(--red-blood); color:var(--cream); }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(38px);
  transition:opacity .9s cubic-bezier(.16,.8,.4,1), transform .9s cubic-bezier(.16,.8,.4,1);
}
.reveal.visible{ opacity:1; transform:translateY(0); }
.hero .logo-img.reveal{
  transform:translateY(56px);
  transition:opacity 1.4s cubic-bezier(.16,.8,.4,1), transform 1.4s cubic-bezier(.16,.8,.4,1);
}
.hero .logo-img.reveal.visible{ transform:translateY(0); }
.faction-grid .reveal:nth-child(1){ transition-delay:.05s; }
.faction-grid .reveal:nth-child(2){ transition-delay:.18s; }
.faction-grid .reveal:nth-child(3){ transition-delay:.31s; }
.char-grid .char-card.reveal:nth-child(6n+1){ transition-delay:.03s; }
.char-grid .char-card.reveal:nth-child(6n+2){ transition-delay:.1s; }
.char-grid .char-card.reveal:nth-child(6n+3){ transition-delay:.17s; }
.char-grid .char-card.reveal:nth-child(6n+4){ transition-delay:.24s; }
.char-grid .char-card.reveal:nth-child(6n+5){ transition-delay:.31s; }
.char-grid .char-card.reveal:nth-child(6n+6){ transition-delay:.38s; }
.column-grid .reveal:nth-child(odd){ transition-delay:.06s; }
.column-grid .reveal:nth-child(even){ transition-delay:.2s; }
.gloss-item.reveal:nth-child(odd){ transition-delay:.03s; }
.gloss-item.reveal:nth-child(even){ transition-delay:.12s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .section-head h2{ opacity:1; letter-spacing:2px; transition:none; }
}
.topbar-right{ display:flex; align-items:center; gap:22px; }
.bgm-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  filter:drop-shadow(0 0 6px rgba(255,111,176,0.5));
  transition:filter .3s;
}
.bgm-toggle:hover{ filter:drop-shadow(0 0 12px rgba(255,111,176,0.85)); }
.bgm-toggle img{
  display:block;
  width:25px;
  height:40px;
  transform:scale(1.3);
  transform-origin:center;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.bgm-toggle .bgm-label{
  font-family:'Cinzel','Noto Sans JP',sans-serif;
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--cream-dim);
  transition:color .3s;
}
.bgm-toggle.muted .bgm-label{ color:var(--muted); }
.bgm-toggle.muted img{ opacity:0.45; filter:grayscale(1); }
@media (max-width:820px){
  .topbar-right{ gap:14px; }
}

/* ---------- basic image protection (deterrent, not foolproof) ---------- */
img{
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
}
.footer-scene{
  -webkit-touch-callout:none;
  user-select:none;
}