/* =============================================
   ZapQ — ROCK / PYRO SKIN 🤘
============================================= */

html:has(body.rock-on),
body.rock-on {
  overflow-x: hidden;
}

/* ── Rock-knapp ── */
.rockBtn {
  background: linear-gradient(135deg, rgba(220,40,0,.22), rgba(255,120,0,.12));
  border: 1px solid rgba(255,80,0,.45);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #ffe0c0;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  transition: all .15s;
  box-shadow: 0 0 14px rgba(220,60,0,.2);
  flex-shrink: 0;
}
.rockBtn:hover {
  background: linear-gradient(135deg, rgba(255,60,0,.35), rgba(255,150,0,.22));
  box-shadow: 0 0 26px rgba(255,80,0,.45);
  transform: scale(1.06);
}
.rockBtn:active { transform: scale(.95); }
.rockIcon { font-size: 18px; line-height: 1; }

/* ── Body-puls: röd/orange ton ── */
body.rock-on {
  animation: rockPulse 1.8s ease-in-out infinite alternate;
}

@keyframes rockPulse {
  from { filter: brightness(1)    saturate(1)    hue-rotate(0deg); }
  to   { filter: brightness(1.06) saturate(1.25) hue-rotate(4deg); }
}

/* ── Eldglöd på panelkanter ── */
body.rock-on .panel {
  box-shadow:
    0 0 0 1px rgba(255,80,0,.15),
    0 0 20px rgba(255,60,0,.12),
    0 0 40px rgba(200,40,0,.06);
  transition: box-shadow .3s;
}

body.rock-on .card {
  box-shadow:
    0 0 0 1px rgba(255,80,0,.1),
    0 0 16px rgba(255,50,0,.1);
  transition: box-shadow .3s;
}

/* ── Rubriker glöder ── */
body.rock-on h1,
body.rock-on h2,
body.rock-on .cardTitle {
  text-shadow:
    0 0 12px rgba(255,100,0,.5),
    0 0 30px rgba(255,60,0,.25);
  transition: text-shadow .3s;
}

/* ── Skicka-knapp pulserar som eld ── */
body.rock-on .btnGold {
  animation: fireBtn 1.2s ease-in-out infinite alternate;
}
@keyframes fireBtn {
  from { box-shadow: 0 0 8px rgba(255,80,0,.3), inset 0 1px 0 rgba(255,200,100,.3); }
  to   { box-shadow: 0 0 22px rgba(255,120,0,.6), inset 0 1px 0 rgba(255,220,100,.5); }
}