/* ============================================================
   THE GREAT PAPYRUS — site theme
   Underground dark + bone white + Papyrus orange + battle blue
   ============================================================ */

:root {
  --bg: #f7f4ec;
  --panel: rgba(255, 255, 255, 0.93);
  --border: #ddd3c2;
  --text: #17130e;
  --muted: #6b6455;
  --red: #ff2a4a;
  --yellow: #f5e74a;
  --blue: #4d8dff;
  --cyan: #42e9f5;
  --orange: #e8283f;
  --purple: #c45cff;
  --green: #3ddc84;
  --bone: #17130e;
  --glow: rgba(232, 40, 63, 0.3);

  /* === BACKGROUND IMAGE === */
  /* Put background.jpg / background.png / background.gif in this folder, OR paste a full URL */
  --hero-bg: none; /* drop a light Papyrus bg image here if you want one */

  /* Bot avatar: bot-avatar.gif in folder, or set BOT_AVATAR_URL in script.js */
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
}
html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: "Segoe UI", Verdana, Geneva, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body { background: transparent; }

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: rgba(232, 40, 63, 0.13);
  border: 1px solid rgba(232, 40, 63, 0.35);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.9em;
  color: var(--orange);
}
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* ---------------- background layers ---------------- */
.bg-image {
  position: fixed; inset: 0; z-index: -5;
  background: var(--hero-bg) center / cover no-repeat;
  opacity: 0.1;
  filter: saturate(0.9);
}
.bg-dim { opacity: 0.14; }
.bg-gradient {
  position: fixed; inset: 0; z-index: -4;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(232, 40, 63, 0.09), transparent 60%),
    linear-gradient(180deg,
      #2b0e14 0%,
      #7a1a24 8%,
      #c96a72 20%,
      #fbf7f2 34%,
      #faf4f0 52%,
      #f3d9d8 66%,
      #e58f96 80%,
      #a63b45 91%,
      #2b0e14 100%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: -3; opacity: 0.5;
  background-image:
    linear-gradient(rgba(23, 19, 14, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 19, 14, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.scanlines {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.05;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.5) 2px 3px);
}
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025;
  background-image: repeating-conic-gradient(rgba(255,255,255,0.6) 0% 0.0001%, transparent 0% 0.0002%);
}

/* ---------------- page transition ---------------- */
.page-transition {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(5, 3, 3, 0.96); /* near-black: souls & bones pop */
  backdrop-filter: blur(4px);
}
.page-transition.active { display: flex; }
.pt-glitch {
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900; letter-spacing: 0.35em;
  color: var(--orange);
  animation: pt-pulse 0.28s linear infinite alternate;
}
@keyframes pt-pulse { from { opacity: 0.55; } to { opacity: 1; } }
.page-transition.flash { animation: pt-flash 0.28s linear; }
@keyframes pt-flash { 0% { background: rgba(5,3,3,0.96); } 50% { background: rgba(232, 40, 63, 0.25); } 100% { background: rgba(5,3,3,0.96); } }

/* ---------------- nav ---------------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px clamp(16px, 5vw, 56px);
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 5, 5, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 242, 232, 0.15);
}
.logo {
  font-weight: 900; font-size: 1.25rem; letter-spacing: 0.14em;
  color: var(--bone); text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo span {
  color: var(--orange);
  margin-left: 6px; padding: 2px 8px;
  border: 2px solid var(--orange); border-radius: 6px;
  font-size: 0.72em; vertical-align: 2px;
}
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav-links a { color: #cfc6b8; font-weight: 600; letter-spacing: 0.04em; }
.nav-links a:hover { color: #ffffff; text-decoration: none; }
.nav-links a.active { color: #ff4d5e; }
.logo { color: #f5f2e8; }
.logo span { color: #ff4d5e; border-color: #ff4d5e; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block;
  background: var(--orange); color: #ffffff;
  font-weight: 800; letter-spacing: 0.05em;
  padding: 10px 22px; border-radius: 10px;
  border: 2px solid var(--orange);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 0 18px var(--glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 28px var(--glow); text-decoration: none; }
.btn-ghost {
  background: transparent; color: var(--bone);
  border-color: var(--border); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); box-shadow: none; }
.btn-sm { padding: 7px 16px; font-size: 0.9em; }

/* ---------------- hero ---------------- */
.hero { padding: clamp(24px, 6vw, 80px) clamp(16px, 5vw, 56px) 40px; }
.hero-row {
  display: flex; gap: clamp(24px, 5vw, 72px);
  align-items: center; justify-content: center; flex-wrap: wrap;
}
.avatar-stage { position: relative; width: min(340px, 80vw); text-align: center; }
.avatar-ring {
  position: absolute; left: 50%; top: 44%;
  width: 300px; height: 300px; transform: translate(-50%, -50%);
  border: 2px dashed rgba(232, 40, 63, 0.45); border-radius: 50%;
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.avatar-glitch { position: relative; display: inline-block; }
.pfp-banner {
  position: absolute; left: -44px; right: -44px; top: -96px; height: 190px;
  background: url("banner.webp") center / cover no-repeat, linear-gradient(120deg, #e8283f, #1a0508);
  border-radius: 22px; opacity: 1; z-index: 0;
  box-shadow: 0 0 40px rgba(232, 40, 63, 0.45), 0 14px 34px rgba(0,0,0,0.35);
  border: 2px solid rgba(255, 255, 255, 0.25);
  animation: banner-drift 7s ease-in-out infinite;
}
@keyframes banner-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.avatar-glitch .bot-avatar { position: relative; z-index: 1; }
.bot-avatar {
  width: min(240px, 60vw); height: auto; border-radius: 24px;
  border: 3px solid var(--orange);
  box-shadow: 0 0 40px var(--glow);
}
.bot-avatar.sm { width: 64px; border-radius: 12px; }
.soul-orbit {
  position: absolute; left: 50%; top: 44%;
  width: 300px; height: 300px; transform: translate(-50%, -50%);
  animation: spin 26s linear infinite;
}
.soul {
  position: absolute; left: 50%; top: 50%;
  font-size: 1.15rem;
  filter: grayscale(1) brightness(1.6);
  text-shadow: 0 0 10px rgba(245, 242, 232, 0.6);
}
.soul:nth-child(1) { transform: rotate(0deg) translate(150px) rotate(0deg); }
.soul:nth-child(2) { transform: rotate(60deg) translate(150px) rotate(-60deg); }
.soul:nth-child(3) { transform: rotate(120deg) translate(150px) rotate(-120deg); }
.soul:nth-child(4) { transform: rotate(180deg) translate(150px) rotate(-180deg); }
.soul:nth-child(5) { transform: rotate(240deg) translate(150px) rotate(-240deg); }
.soul:nth-child(6) { transform: rotate(300deg) translate(150px) rotate(-300deg); }
.s-cyan { color: var(--cyan); }
.s-orange { color: var(--orange); }
.s-blue { color: var(--blue); }
.s-purple { color: var(--purple); }
.s-green { color: var(--green); }
.s-yellow { color: var(--yellow); }
.avatar-caption { margin-top: 14px; color: var(--muted); font-style: italic; }

.hero-copy { max-width: 640px; }
.tag {
  display: inline-block;
  color: var(--orange); font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; font-size: 0.8rem;
  border: 1px solid rgba(232, 40, 63, 0.5); border-radius: 999px;
  padding: 4px 14px; margin: 0 0 14px;
}
.glitch-title {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 900; letter-spacing: 0.06em; line-height: 1.08;
  margin: 0 0 18px; color: var(--bone);
  text-shadow: 0 0 26px rgba(232, 40, 63, 0.4);
}
.textbox {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin: 0 0 16px;
}
.textbox p { margin: 4px 0; }
.star { color: var(--orange); font-weight: 900; }
.lead { color: var(--muted); font-size: 1.02rem; }
.flicker-soft { animation: flicker 4.5s infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; } 93% { opacity: 0.72; } 94% { opacity: 1; }
  97% { opacity: 0.85; } 98% { opacity: 1; }
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; }

/* ---------------- status pill ---------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 16px; color: var(--muted); font-size: 0.9rem;
  background: rgba(13, 17, 28, 0.8);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.online { background: var(--green); box-shadow: 0 0 10px var(--green); }
.dot.degraded { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.dot.offline { background: var(--red); box-shadow: 0 0 10px var(--red); }

/* ---------------- mini battle ---------------- */
.mini-battle { margin-top: clamp(28px, 5vw, 56px); text-align: center; }
.mb-frame {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 18px; padding: 22px;
  background: var(--panel); border: 2px solid var(--border); border-radius: 18px;
  max-width: 860px; width: 100%;
}
.mb-stage {
  position: relative; min-width: 220px; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(232, 40, 63, 0.13), transparent 70%);
  border: 2px solid var(--border); border-radius: 14px;
}
.error-sprite { width: 150px; height: auto; image-rendering: auto; filter: drop-shadow(0 0 16px rgba(232, 40, 63, 0.5)); }
.mb-bones { position: absolute; inset: 0; pointer-events: none; }
.mb-hud { flex: 1; min-width: 260px; text-align: left; font-family: Consolas, monospace; }
.mb-names { display: flex; justify-content: space-between; font-weight: 800; letter-spacing: 0.08em; color: var(--bone); }
.lv { color: var(--orange); }
.mb-hp { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.82rem; color: var(--muted); }
.mb-bar {
  flex: 1; height: 12px; background: rgba(23, 19, 14, 0.08);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.mb-bar i { display: block; height: 100%; width: 100%; transition: width 0.4s ease; }
.mb-bar i.boss { background: linear-gradient(90deg, #e8283f, #ff6b7d); }
.mb-bar i.you { background: linear-gradient(90deg, var(--yellow), #fff3a0); }
.mb-dialogue {
  border: 2px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0; min-height: 44px;
  color: var(--bone); font-size: 0.92rem;
}
.mb-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-act {
  font-family: inherit; font-weight: 800; letter-spacing: 0.08em;
  background: rgba(232, 40, 63, 0.1); color: var(--orange);
  border: 2px solid rgba(255, 154, 60, 0.45); border-radius: 10px;
  padding: 8px 18px; cursor: pointer; transition: background 0.12s ease;
}
.mb-act:hover { background: rgba(232, 40, 63, 0.22); }
.mb-hint {
  display: inline-block; margin-top: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 12px;
  color: var(--muted); font-size: 0.85rem; font-style: italic;
}

/* ---------------- layout blocks ---------------- */
main { padding: 10px clamp(16px, 5vw, 56px) 40px; max-width: 1100px; margin: 0 auto; }
.page { padding-top: 20px; }
.page-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.panel {
  background: var(--panel);
  border: 2px solid var(--border); border-radius: 16px;
  padding: clamp(18px, 3vw, 30px);
  margin: 0 0 26px;
}
.panel h2 {
  margin: 0 0 16px; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 1.1rem; color: var(--bone);
}
.hash { color: var(--orange); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--orange); transform: translateY(-3px); }
.card h3 { margin: 0 0 8px; color: var(--orange); letter-spacing: 0.04em; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.steps { margin: 0; padding-left: 22px; }
.steps li { margin: 8px 0; }
.dialogue { color: var(--bone); }
main > .dialogue, .steps + .dialogue, .panel + * .dialogue { }
.page .dialogue, main .dialogue.tight {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: inline-block;
  padding: 6px 14px;
}
.dialogue.tight { margin: 14px 0 0; }

/* ---------------- commands page ---------------- */
.cmd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cmd {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.75);
}
.cmd span { color: var(--muted); font-size: 0.92rem; }
.cmd-cat { margin: 22px 0 8px; color: var(--orange); letter-spacing: 0.08em; }

/* ---------------- status page ---------------- */
.status-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.status-header h2 { margin: 0; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(255, 255, 255, 0.75); }
.stat-label { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.stat-value { font-weight: 700; color: var(--bone); }
.incident-list { margin: 0; padding-left: 20px; }

/* ---------------- changelog ---------------- */
.release h2 { color: var(--orange); }
.release h3 { color: var(--bone); letter-spacing: 0.06em; }
.release ul { color: var(--muted); }

/* ---------------- footer ---------------- */
.footer {
  border-top: 1px solid rgba(245, 242, 232, 0.15);
  padding: 22px clamp(16px, 5vw, 56px);
  text-align: center; color: #f5f2e8; font-size: 0.9rem;
}
.footer .muted { color: rgba(245, 242, 232, 0.65); }

/* ---------------- responsive ---------------- */
@media (max-width: 720px) {
  .hero-row { flex-direction: column; text-align: center; }
  .hero-actions { justify-content: center; }
  .status-pill { justify-content: center; }
}


/* ---------------- spaghetti rain ---------------- */
.spaghetti-rain {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.spaghetti-rain span {
  position: absolute; top: -70px; display: block;
  animation: spaghetti-fall linear infinite;
}
@keyframes spaghetti-fall {
  from { transform: translateY(-8vh) rotate(0deg); }
  to   { transform: translateY(115vh) rotate(340deg); }
}
.spaghetti-rain span:nth-child(1)  { left: 4%;  font-size: 26px; opacity: 0.75; animation-duration: 11s; animation-delay: 0s; }
.spaghetti-rain span:nth-child(2)  { left: 13%; font-size: 18px; opacity: 0.55; animation-duration: 15s; animation-delay: 3s; }
.spaghetti-rain span:nth-child(3)  { left: 22%; font-size: 32px; opacity: 0.8;  animation-duration: 9s;  animation-delay: 6s; }
.spaghetti-rain span:nth-child(4)  { left: 31%; font-size: 20px; opacity: 0.6;  animation-duration: 13s; animation-delay: 1.5s; }
.spaghetti-rain span:nth-child(5)  { left: 40%; font-size: 28px; opacity: 0.7;  animation-duration: 10s; animation-delay: 8s; }
.spaghetti-rain span:nth-child(6)  { left: 49%; font-size: 17px; opacity: 0.5;  animation-duration: 16s; animation-delay: 4.5s; }
.spaghetti-rain span:nth-child(7)  { left: 58%; font-size: 30px; opacity: 0.75; animation-duration: 9.5s; animation-delay: 2s; }
.spaghetti-rain span:nth-child(8)  { left: 67%; font-size: 22px; opacity: 0.6;  animation-duration: 14s; animation-delay: 7s; }
.spaghetti-rain span:nth-child(9)  { left: 76%; font-size: 34px; opacity: 0.8;  animation-duration: 8.5s; animation-delay: 5s; }
.spaghetti-rain span:nth-child(10) { left: 85%; font-size: 19px; opacity: 0.55; animation-duration: 12.5s; animation-delay: 9.5s; }
.spaghetti-rain span:nth-child(11) { left: 93%; font-size: 27px; opacity: 0.7;  animation-duration: 10.5s; animation-delay: 3.5s; }


/* ---------------- bones rain ---------------- */
.bones-rain {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.bones-rain span {
  position: absolute; top: -70px; display: block;
  filter: grayscale(1) brightness(1.5);
  animation: spaghetti-fall linear infinite;
}
.bones-rain span:nth-child(1)  { left: 8%;  font-size: 22px; opacity: 0.6;  animation-duration: 17s; animation-delay: 2.5s; }
.bones-rain span:nth-child(2)  { left: 18%; font-size: 30px; opacity: 0.75; animation-duration: 12s; animation-delay: 5.5s; }
.bones-rain span:nth-child(3)  { left: 27%; font-size: 18px; opacity: 0.5;  animation-duration: 18s; animation-delay: 0.5s; }
.bones-rain span:nth-child(4)  { left: 36%; font-size: 26px; opacity: 0.7;  animation-duration: 13.5s; animation-delay: 9s; }
.bones-rain span:nth-child(5)  { left: 45%; font-size: 33px; opacity: 0.8;  animation-duration: 10s;  animation-delay: 6.5s; }
.bones-rain span:nth-child(6)  { left: 54%; font-size: 20px; opacity: 0.55; animation-duration: 15.5s; animation-delay: 3s; }
.bones-rain span:nth-child(7)  { left: 63%; font-size: 28px; opacity: 0.7;  animation-duration: 11.5s; animation-delay: 10.5s; }
.bones-rain span:nth-child(8)  { left: 72%; font-size: 17px; opacity: 0.5;  animation-duration: 19s;  animation-delay: 1s; }
.bones-rain span:nth-child(9)  { left: 81%; font-size: 31px; opacity: 0.75; animation-duration: 11s;  animation-delay: 7.5s; }
.bones-rain span:nth-child(10) { left: 90%; font-size: 23px; opacity: 0.6;  animation-duration: 16s;  animation-delay: 4s; }

/* =====================================================================
   BATTLE V2 — black box, white border, bones that mean it
===================================================================== */
.mini-battle { position: relative; }
.mb-frame {
  background: rgba(5, 3, 3, 0.94);
  border: 4px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #0a0505, 0 0 40px rgba(232, 40, 63, 0.35), 0 18px 50px rgba(0,0,0,0.5);
  padding: 26px;
}
.mb-frame.shake { animation: mb-shake 0.45s ease; }
@keyframes mb-shake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-9px,3px) rotate(-0.4deg); }
  30% { transform: translate(8px,-4px) rotate(0.4deg); }
  45% { transform: translate(-7px,2px); }
  60% { transform: translate(6px,-2px); }
  80% { transform: translate(-3px,1px); }
}
.mb-frame.spared { border-color: #ffe25a; box-shadow: 0 0 0 2px #0a0505, 0 0 50px rgba(255, 226, 90, 0.45); }
.mb-stage {
  min-width: 260px; min-height: 250px;
  border: none; border-radius: 4px;
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 40, 63, 0.22), transparent 72%),
    linear-gradient(180deg, #12090a 0%, #050303 100%);
  overflow: hidden;
}
.error-sprite {
  width: 175px;
  filter: drop-shadow(0 0 20px rgba(232, 40, 63, 0.65));
  animation: enemy-float 3.2s ease-in-out infinite;
  transition: transform 0.1s;
}
@keyframes enemy-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.error-sprite.hit { animation: enemy-hit 0.38s ease; }
@keyframes enemy-hit {
  0% { transform: translateX(0); filter: brightness(3) drop-shadow(0 0 20px #fff); }
  25% { transform: translateX(-12px); }
  50% { transform: translateX(10px); filter: brightness(3) drop-shadow(0 0 20px #fff); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
.mt-spared .error-sprite, .mb-frame.spared .error-sprite { animation-play-state: paused; filter: drop-shadow(0 0 24px rgba(255,226,90,0.8)); }

/* sweeping bone attacks */
.atk-bone {
  position: absolute; left: -90px;
  width: 78px; height: 13px;
  background: linear-gradient(90deg, #fff, #e8e2d4);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255,255,255,0.7), 0 0 26px rgba(232,40,63,0.4);
  animation: bone-sweep 1.2s linear forwards;
  z-index: 3;
}
.atk-bone::before, .atk-bone::after {
  content: ""; position: absolute; top: -5px; width: 15px; height: 15px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
.atk-bone::before { left: -7px; }
.atk-bone::after { right: -7px; }
@keyframes bone-sweep {
  from { left: -90px; transform: rotate(-6deg); }
  to { left: 110%; transform: rotate(6deg); }
}

/* damage numbers */
.dmg-num {
  position: absolute; left: 50%; top: 34%;
  transform: translateX(-50%);
  font-family: Consolas, monospace; font-weight: 900; font-size: 1.6rem;
  color: #ff4d5e; text-shadow: 0 2px 0 #0a0505, 0 0 14px rgba(232,40,63,0.8);
  animation: dmg-pop 1.05s ease forwards;
  z-index: 4; pointer-events: none;
}
.dmg-num.on-you { color: #ff9d3d; top: 60%; }
.dmg-num.heal { color: #7dde63; }
@keyframes dmg-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -6px) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* HUD */
.mb-hud { font-family: "Courier New", Consolas, monospace; }
.mb-names { color: #f5f2e8; text-shadow: 0 1px 0 #000; }
.mb-hp { color: #cfc6b8; }
.mb-bar {
  height: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
}
.mb-bar i.boss { background: linear-gradient(90deg, #e8283f, #ff6b7d); box-shadow: 0 0 12px rgba(232,40,63,0.6); }
.mb-bar i.you { background: linear-gradient(90deg, #ffd52e, #fff3a0); box-shadow: 0 0 12px rgba(255,213,46,0.6); }
.mb-dialogue {
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  color: #f5f2e8;
  min-height: 50px;
}
.mb-act {
  font-family: "Courier New", Consolas, monospace;
  font-weight: 900; letter-spacing: 0.08em; font-size: 0.95rem;
  color: #ff7d2e;
  background: #050303;
  border: 2px solid #ff7d2e;
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s, color 0.15s, background 0.15s;
  position: relative;
}
.mb-act:hover, .mb-act:focus-visible {
  color: #ffe25a;
  border-color: #ffe25a;
  box-shadow: 0 0 16px rgba(255, 226, 90, 0.4);
  transform: translateY(-2px);
  outline: none;
}
.mb-act::before { content: "♥ "; opacity: 0; }
.mb-act:hover::before { opacity: 1; }
.mb-act:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.mb-frame.spared .mb-act[data-act="mercy"] { color: #ffe25a; border-color: #ffe25a; opacity: 1; }

/* =====================================================================
   SIGN-IN + SERVERS + DASHBOARD
===================================================================== */
.me-panel { border: 2px solid rgba(232,40,63,0.35); }
.signin-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Sign in with Discord: make it POP on the dark nav */
#real-signin {
  position: relative;
  background: #e8283f;
  border-color: #ff5a6e;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255,255,255,0.95), 0 0 12px rgba(255,255,255,0.55);
  box-shadow: 0 0 14px rgba(232,40,63,0.9), 0 0 34px rgba(232,40,63,0.55), inset 0 0 8px rgba(255,255,255,0.25);
  animation: signin-pulse 2.2s ease-in-out infinite;
}
#real-signin:hover {
  box-shadow: 0 0 20px rgba(255,90,110,1), 0 0 48px rgba(232,40,63,0.8), inset 0 0 10px rgba(255,255,255,0.35);
}
@keyframes signin-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(232,40,63,0.9), 0 0 34px rgba(232,40,63,0.55), inset 0 0 8px rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 0 18px rgba(255,90,110,1), 0 0 46px rgba(232,40,63,0.75), inset 0 0 10px rgba(255,255,255,0.3); }
}
.me-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.65);
}
.me-pfp { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--orange); }
.me-hi { font-weight: 800; letter-spacing: 0.04em; margin: 0 0 2px; }
.demo-tag {
  font-size: 0.7rem; vertical-align: middle;
  border: 1px solid var(--orange); color: var(--orange);
  border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: #cfc6b8;
}
.nav-user:hover { color: #fff; text-decoration: none; }
.nav-pfp { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--orange); }
.g-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.g-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.7);
  padding: 14px;
  transition: transform 0.12s, box-shadow 0.15s;
}
.g-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(232,40,63,0.16); }
.g-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g-head img, .g-icon-letter {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, #e8283f, #611017);
}
.g-head h3 { font-size: 1rem; margin: 0; }
.g-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.g-no-admin { font-size: 0.75rem; color: var(--muted); font-style: italic; }
.sd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sd-icon img, .sd-icon .g-icon-letter { width: 64px; height: 64px; }
.sd-title { margin: 0 0 4px; font-size: 1.2rem; }
.demo-tag-inline {
  font-size: 0.65rem; letter-spacing: 0.2em; color: var(--orange);
  border: 1px solid rgba(232,40,63,0.5); border-radius: 4px; padding: 2px 6px; vertical-align: middle;
}
.sd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.sd-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,0.7); padding: 14px;
}
.sd-card h4 { margin: 0 0 6px; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--muted); }
.sd-card p { margin: 0; font-weight: 800; }

/* =====================================================================
   UNDERTALE FONTS
===================================================================== */
body, .btn, .nav-links a { font-family: "Pixelify Sans", "Segoe UI", system-ui, sans-serif; }
h1, h2, h3, h4, .logo, .glitch-title, .tag { font-family: "Pixelify Sans", "Courier New", monospace; }
.textbox p, .dialogue, .mb-dialogue, .mb-hint, .avatar-caption {
  font-family: "VT323", "Courier New", monospace;
  font-size: 1.2em; letter-spacing: 0.02em;
}
.mb-hud, .sd-card p, .fn-chip { font-family: "VT323", "Courier New", monospace; }
.mb-hud { font-size: 1.05em; }

/* =====================================================================
   THE BROTHERS — clickable sprites + banter bubbles
===================================================================== */
.hangout-stage {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(24px, 8vw, 90px); padding: 30px 10px 0;
}
.banter-actor {
  position: relative; cursor: pointer; text-align: center;
  transition: transform 0.15s;
}
.banter-actor:hover { transform: translateY(-6px); }
.banter-actor:active { transform: translateY(0) scale(0.97); }
.actor-img {
  height: clamp(160px, 26vw, 240px); width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  animation: enemy-float 3.6s ease-in-out infinite;
  image-rendering: pixelated;
}
.banter-actor[data-actor="sans"] .actor-img {
  height: clamp(105px, 17vw, 155px);
  animation-delay: 1.4s;
}
.actor-name {
  margin: 8px 0 0; font-weight: 800; letter-spacing: 0.14em; font-size: 0.8rem;
  color: var(--muted);
}
.bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  min-width: 210px; max-width: 280px;
  background: #ffffff; color: #171310;
  border: 3px solid #0a0505; border-radius: 12px;
  padding: 10px 14px; text-align: left;
  font-family: "VT323", "Courier New", monospace; font-size: 1.15rem; line-height: 1.25;
  box-shadow: 4px 4px 0 rgba(10,5,5,0.85);
  z-index: 10;
}
.bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 10px solid transparent; border-top-color: #0a0505;
}
.bubble.papyrus { border-color: var(--orange); box-shadow: 4px 4px 0 rgba(232,40,63,0.75); }
.bubble.papyrus::after { border-top-color: var(--orange); }
.bubble .who { display: block; font-family: "Pixelify Sans", monospace; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--orange); margin-bottom: 2px; }

/* =====================================================================
   FULL-FUNCTION DASHBOARD — every command + the whole admin suite
===================================================================== */
.sd-tabs { display: flex; gap: 8px; margin: 16px 0 14px; flex-wrap: wrap; }
.sd-tab {
  font-family: "Pixelify Sans", monospace; font-weight: 800; letter-spacing: 0.06em;
  border: 2px solid var(--orange); color: var(--orange); background: #fff;
  border-radius: 8px; padding: 8px 18px; cursor: pointer;
}
.sd-tab.active { background: var(--orange); color: #fff; }
.fn-group { margin: 0 0 18px; }
.fn-group h4 {
  margin: 0 0 8px; font-size: 0.85rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.fn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-chip {
  border: 1.5px solid rgba(232, 40, 63, 0.45); background: rgba(255,255,255,0.85);
  color: #1a0508; border-radius: 999px; padding: 4px 13px;
  font-size: 1.02rem; cursor: pointer; transition: all 0.12s;
}
.fn-chip:hover { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateY(-2px); }
.fn-chip.admin-chip { border-color: rgba(10,5,5,0.4); }
.fn-chip.admin-chip:hover { background: #0a0505; border-color: #0a0505; }
.sd-note {
  border: 1.5px dashed rgba(232,40,63,0.5); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  color: var(--muted); font-size: 0.88rem;
}
#sd-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #0a0505; color: #f5f2e8; border: 2px solid var(--orange);
  border-radius: 10px; padding: 10px 20px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 200;
  font-family: "VT323", monospace; font-size: 1.1rem;
}
#sd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   BIGGER FALLING EMOJIS
===================================================================== */
.spaghetti-rain span:nth-child(1)  { font-size: 34px; }
.spaghetti-rain span:nth-child(2)  { font-size: 48px; }
.spaghetti-rain span:nth-child(3)  { font-size: 30px; }
.spaghetti-rain span:nth-child(4)  { font-size: 42px; }
.spaghetti-rain span:nth-child(5)  { font-size: 54px; }
.spaghetti-rain span:nth-child(6)  { font-size: 32px; }
.spaghetti-rain span:nth-child(7)  { font-size: 46px; }
.spaghetti-rain span:nth-child(8)  { font-size: 28px; }
.spaghetti-rain span:nth-child(9)  { font-size: 50px; }
.spaghetti-rain span:nth-child(10) { font-size: 38px; }
.spaghetti-rain span:nth-child(11) { font-size: 44px; }
.bones-rain span:nth-child(1)  { font-size: 38px; }
.bones-rain span:nth-child(2)  { font-size: 52px; }
.bones-rain span:nth-child(3)  { font-size: 30px; }
.bones-rain span:nth-child(4)  { font-size: 44px; }
.bones-rain span:nth-child(5)  { font-size: 56px; }
.bones-rain span:nth-child(6)  { font-size: 34px; }
.bones-rain span:nth-child(7)  { font-size: 48px; }
.bones-rain span:nth-child(8)  { font-size: 28px; }
.bones-rain span:nth-child(9)  { font-size: 52px; }
.bones-rain span:nth-child(10) { font-size: 40px; }

/* =====================================================================
   SKELETON ANIMATION OVERHAUL
===================================================================== */
/* Papyrus: marches in place — bounce, squash, sway, occasional flourish */
.banter-actor[data-actor="papyrus"] .actor-img {
  animation: papyrus-march 3.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes papyrus-march {
  0%   { transform: translateY(0) rotate(0deg) scale(1, 1); }
  8%   { transform: translateY(-14px) rotate(-2deg) scale(0.97, 1.05); }
  16%  { transform: translateY(0) rotate(0deg) scale(1.04, 0.94); }
  24%  { transform: translateY(-10px) rotate(2deg) scale(0.98, 1.03); }
  32%  { transform: translateY(0) rotate(0deg) scale(1.03, 0.96); }
  46%  { transform: translateY(-4px) rotate(-1deg) scale(1, 1); }
  60%  { transform: translateY(0) rotate(0deg) scale(1, 1); }
  78%  { transform: translateY(-3px) rotate(0.6deg); }
  100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
/* Sans: deep breathing, lazy tilt, the shrug */
.banter-actor[data-actor="sans"] .actor-img {
  animation: sans-breathe 3.2s ease-in-out infinite, sans-shrug 9s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes sans-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.02, 0.975); }
}
@keyframes sans-shrug {
  0%, 55%, 100% { rotate: 0deg; }
  62% { rotate: 3.5deg; }
  70% { rotate: -2deg; }
  76% { rotate: 1deg; }
  82% { rotate: 0deg; }
}
/* Hover: Papyrus spins with joy, Sans dips like "welp" */
.banter-actor[data-actor="papyrus"]:hover .actor-img {
  animation: papyrus-spin 0.9s ease-in-out;
}
@keyframes papyrus-spin {
  0% { transform: rotate(0); }
  50% { transform: rotate(360deg) scale(1.06); }
  100% { transform: rotate(360deg); }
}
.banter-actor[data-actor="sans"]:hover .actor-img {
  animation: sans-dip 0.7s ease-in-out;
}
@keyframes sans-dip {
  0% { transform: translateY(0); }
  40% { transform: translateY(10px) rotate(-4deg); }
  100% { transform: translateY(0); }
}
/* Ground shadows that breathe with them */
.banter-actor::after {
  content: ""; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10,5,5,0.28), transparent 70%);
  animation: shadow-pulse 3.8s ease-in-out infinite;
}
.banter-actor[data-actor="sans"]::after {
  width: 75%; animation-duration: 3.2s;
}
@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  16% { transform: translateX(-50%) scale(0.82); opacity: 0.6; }
  32% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* rising sparkles around each brother */
.spark {
  position: absolute; bottom: 20%; left: 50%;
  font-size: 18px; opacity: 0; pointer-events: none;
  animation: spark-rise 3.4s linear infinite;
  z-index: 1;
}
.spark:nth-of-type(2) { left: 12%; animation-delay: 1.1s; font-size: 13px; }
.spark:nth-of-type(3) { left: 82%; animation-delay: 2.2s; font-size: 15px; }
@keyframes spark-rise {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-90px) rotate(160deg); }
}

/* =====================================================================
   SITEWIDE DESIGN POLISH
===================================================================== */
/* panels: top accent bar + deeper shadow + hover lift */
.panel {
  position: relative; overflow: hidden;
  box-shadow: 0 12px 34px rgba(43, 14, 20, 0.14);
  border-top: 3px solid var(--orange);
  transition: transform 0.18s, box-shadow 0.18s;
}
.panel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(43, 14, 20, 0.2); }
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #ff4d5e, transparent);
  animation: accent-sweep 5s linear infinite;
}
@keyframes accent-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* section headings get a bone-red gradient underline */
.panel h2 {
  display: inline-block; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #e8283f, #ff9d3d) 1;
  padding-bottom: 4px;
}
/* feature cards: pop + tilt on hover */
.card {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  border: 1px solid var(--border);
}
.card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  border-color: var(--orange);
  box-shadow: 0 14px 30px rgba(232, 40, 63, 0.22);
}
.card h3 { transition: transform 0.15s; display: inline-block; }
.card:hover h3 { transform: scale(1.12) rotate(-2deg); }
/* buttons get a shine sweep */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
}
.btn:hover::after { left: 130%; }
/* nav links: animated underline on hover */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #ff4d5e, #ff9d3d);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* quick-start steps: numbered bones */
.steps { counter-reset: step; }
.steps li { position: relative; padding-left: 8px; transition: transform 0.15s; }
.steps li:hover { transform: translateX(6px); }
/* hero title: gentle pulse on the glow */
.glitch-title { animation: title-glow 4s ease-in-out infinite; }
@keyframes title-glow {
  0%, 100% { text-shadow: 0 0 26px rgba(232, 40, 63, 0.4); }
  50% { text-shadow: 0 0 42px rgba(232, 40, 63, 0.75), 0 0 12px rgba(255, 157, 61, 0.4); }
}
/* status pill breathes */
.status-pill { animation: pill-breathe 3s ease-in-out infinite; }
@keyframes pill-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(232,40,63,0); }
  50% { box-shadow: 0 0 18px rgba(232,40,63,0.35); }
}
/* footer gets a bone divider */
.footer::before {
  content: "🦴 🦴 🦴";
  display: block; text-align: center; letter-spacing: 1.2em;
  margin-bottom: 14px; opacity: 0.5;
}

/* =====================================================================
   LIVE CONTROL (dashboard v2 — talks to the bot's API)
===================================================================== */
.live-note {
  border: 1.5px dashed rgba(232,40,63,0.5); border-radius: 10px;
  padding: 10px 14px; margin: 12px 0; color: var(--muted); font-size: 0.88rem;
}
.api-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.api-row input { flex: 1; min-width: 220px; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.live-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.8); padding: 14px;
}
.live-card h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--orange); }
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; gap: 10px; border-bottom: 1px dashed rgba(232,40,63,0.15);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row code { font-size: 0.78rem; color: var(--muted); word-break: break-all; }
.switch { position: relative; width: 44px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
  background: #c9beb2; transition: background 0.2s;
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.switch input:checked + i { background: var(--orange); }
.switch input:checked + i::after { transform: translateX(22px); }
.live-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.live-form input, .live-form select, .api-row input {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 10px;
  font-family: "VT323", monospace; font-size: 1.05rem; background: #fff;
}
.live-form input { flex: 1; min-width: 60px; }
.mini-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; margin: 8px 0; }
.mini-table th { text-align: left; color: var(--muted); border-bottom: 1px solid var(--border); padding: 3px 6px; }
.mini-table td { padding: 3px 6px; border-bottom: 1px dashed rgba(232,40,63,0.12); }
.mini-x {
  border: none; background: none; color: #e8283f; cursor: pointer; font-weight: 900;
}
.mini-x:hover { transform: scale(1.3); }
.battle-preview { margin-top: 10px; }
.bp-turn { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-family: "VT323", monospace; font-size: 1.05rem; }
.bp-turn .t { color: var(--muted); width: 42px; }
.bp-bar { flex: 1; height: 10px; border-radius: 4px; background: rgba(0,0,0,0.1); overflow: hidden; }
.bp-bar i { display: block; height: 100%; transition: width 0.3s; }
.bp-bar.you i { background: linear-gradient(90deg, #ffd52e, #fff3a0); }
.bp-bar.boss i { background: linear-gradient(90deg, #e8283f, #ff6b7d); }
.bp-verdict { font-weight: 900; margin-top: 8px; color: var(--orange); }

/* ---------------- papyrus HP loader (page transition) ----------------
   Canon Papyrus head rides the leading edge of a charging red HP bar. */
.hp-loader { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hp-name {
  font-family: "Pixelify Sans", monospace; font-weight: 900;
  letter-spacing: .35em; font-size: clamp(1.6rem, 5vmin, 3rem); color: #ffffff;
  text-shadow: 0 0 18px #e8283f, 0 0 44px rgba(232,40,63,.7);
  animation: hp-pulse 1s ease-in-out infinite;
}
.hp-track {
  position: relative; width: min(58vmin, 460px); height: 38px;
  border: 4px solid #ffffff; border-radius: 4px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 34px rgba(232,40,63,.55), inset 0 0 16px rgba(0,0,0,.75);
}
.hp-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, #4a0e15, #a02130 35%, #e8283f 68%, #ff7a4d 100%);
  box-shadow: 0 0 20px rgba(232,40,63,.85);
  animation: hp-grow 2.2s cubic-bezier(.25,.1,.25,1) infinite;
}
.hp-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 12px, rgba(255,255,255,0) 12px 26px);
  animation: hp-stripes .7s linear infinite;
}
.hp-head {
  position: absolute; right: -30px; top: 50%; width: 64px;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.4));
  animation: hp-bob .5s ease-in-out infinite alternate;
}
@keyframes hp-grow { 0% { width: 0; } 62% { width: 100%; } 100% { width: 100%; } }
@keyframes hp-stripes { to { background-position: 34px 0; } }
@keyframes hp-bob { from { transform: translateY(-56%) rotate(-4deg); } to { transform: translateY(-44%) rotate(4deg); } }
@keyframes hp-pulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
50% { transform: scale(1.3); } }