:root {
  --bg: #090b13;
  --bg-soft: #151824;
  --card: rgba(15, 18, 28, 0.86);
  --card-strong: rgba(31, 35, 49, 0.92);
  --text: #fff8e9;
  --muted: #c8c0ad;
  --accent: #ffd43b;
  --accent-2: #ff7a1a;
  --accent-3: #7c5cff;
  --good: #7ee35f;
  --bad: #ff4e45;
  --line: rgba(255, 212, 59, 0.34);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", Arial, system-ui, sans-serif;
  background:
    radial-gradient(circle at 45% 20%, rgba(255, 212, 59, 0.18), transparent 24rem),
    radial-gradient(circle at 84% 20%, rgba(124, 92, 255, 0.18), transparent 28rem),
    linear-gradient(145deg, #070910, var(--bg) 58%, #15101f);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 40%, transparent 0 36%, rgba(0, 0, 0, 0.58) 70%);
}

a { color: inherit; text-decoration: none; }

main {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto 56px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto 28px;
  border-top: 1px solid rgba(255, 212, 59, 0.22);
  padding-top: 18px;
  color: var(--muted);
  font-size: 0.94rem;
}

.site-footer a {
  color: var(--accent);
  font-weight: 800;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(14px, 4vw, 40px);
  background: rgba(4, 6, 12, 0.94);
  border-bottom: 2px solid rgba(255, 212, 59, 0.28);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #160c00;
  background: linear-gradient(180deg, #fff179, var(--accent) 55%, #c57700);
  border: 2px solid #ffed90;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(255, 212, 59, 0.12), 0 0 28px rgba(255, 212, 59, 0.28);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #f0eadb;
  font-size: 0.95rem;
}

.nav a:hover { color: var(--accent); }

.hero {
  display: grid;
  grid-template-columns: minmax(340px, 1.25fr) minmax(300px, 0.75fr);
  gap: 22px;
  align-items: start;
  padding: 34px 0 20px;
}

.panel,
.boss-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 30px);
}

.boss-card {
  display: grid;
  position: relative;
  gap: 16px;
  justify-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 212, 59, 0.12), transparent 42%),
    radial-gradient(circle at 52% 38%, rgba(124, 92, 255, 0.24), transparent 42%),
    linear-gradient(135deg, rgba(22, 24, 36, 0.95), rgba(8, 10, 18, 0.95)),
    var(--card);
}

.boss-card.defeated {
  border-color: rgba(102, 208, 138, 0.42);
}

.rescue-card {
  background:
    linear-gradient(180deg, rgba(41, 231, 197, 0.08), transparent),
    radial-gradient(circle at 34% 54%, rgba(255, 209, 102, 0.16), transparent 34%),
    radial-gradient(circle at 70% 44%, rgba(41, 231, 197, 0.14), transparent 40%),
    var(--card);
}

.victory-banner {
  width: 100%;
  border: 1px solid rgba(102, 208, 138, 0.6);
  border-radius: 12px;
  padding: 12px 14px;
  color: #dfffe8;
  background: linear-gradient(135deg, rgba(126, 227, 95, 0.22), rgba(255, 212, 59, 0.12));
  font-size: clamp(1.45rem, 4vw, 2.4rem);
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(102, 208, 138, 0.22);
}

.boss-stage,
.tag {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  color: #ffe987;
  background: rgba(0, 0, 0, 0.42);
  font-size: 0.84rem;
}

.comic-title {
  display: grid;
  width: 100%;
  gap: 2px;
  text-transform: uppercase;
  font-family: "Arial Black", "Segoe UI", system-ui, sans-serif;
  text-shadow: 2px 3px 0 #05060a, 0 0 18px rgba(0, 0, 0, 0.42);
}

.comic-title span {
  font-size: clamp(1.55rem, 4.8vw, 3.8rem);
  line-height: 0.98;
  color: #f9f7ef;
  transform: rotate(-2deg);
  transform-origin: left center;
  letter-spacing: 0;
}

.comic-title strong {
  width: fit-content;
  color: var(--accent);
  font-size: clamp(1.85rem, 5.6vw, 4.3rem);
  line-height: 0.96;
  transform: rotate(-2deg);
  transform-origin: left center;
  -webkit-text-stroke: 0.4px rgba(30, 18, 0, 0.75);
  letter-spacing: 0;
}

.comic-title em {
  width: fit-content;
  margin-top: 8px;
  padding: 8px 18px;
  color: #ffffff;
  background: linear-gradient(90deg, #4b2c9d, #6b3fd1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.9rem, 1.7vw, 1.1rem);
  font-style: normal;
  font-weight: 900;
  transform: rotate(-3deg);
}

.rescue-arena {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid rgba(139, 178, 214, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 24%, rgba(41, 231, 197, 0.12), transparent 22%),
    linear-gradient(180deg, #0c1726 0 43%, #172230 44% 55%, #120f16 56% 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.54);
}

.cavern-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 54px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 84px 100%,
    radial-gradient(circle at 14% 22%, rgba(41, 231, 197, 0.22), transparent 9rem),
    radial-gradient(circle at 84% 20%, rgba(255, 209, 102, 0.2), transparent 10rem);
  opacity: 0.72;
}

.ground-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  height: 12px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.36), transparent),
    #24364a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.44);
}

.scale {
  position: absolute;
  inset: 5% 3% 8%;
}

.scale-top {
  position: absolute;
  left: 48.2%;
  top: 5%;
  width: 3.6%;
  height: 3.6%;
  border: 3px solid #ffd166;
  border-radius: 50%;
  background: #5c3b19;
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.42);
}

.scale-beam {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8e0a0, #8a5d24 58%, #3d260d);
  transform: rotate(var(--tilt));
  transform-origin: 50% 50%;
  animation: scale-sway 4.8s ease-in-out infinite;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.42);
}

.scale-pillar {
  position: absolute;
  left: 49.3%;
  top: 13%;
  width: 1.4%;
  height: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4c2e10, #ffd166 48%, #5c3b19);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.16);
}

.scale-base {
  position: absolute;
  left: 39%;
  right: 39%;
  bottom: 8%;
  height: 8%;
  border-radius: 50% 50% 12px 12px;
  background: linear-gradient(180deg, #9b6a28, #281708);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.45);
}

.chain {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 136px;
  background: repeating-linear-gradient(180deg, #d9c08a 0 8px, #5c3b19 8px 14px);
  transform-origin: top;
}

.chain.left.one { left: 15%; }
.chain.left.two { left: 29%; }
.chain.right.one { right: 15%; }
.chain.right.two { right: 29%; }

.pan {
  position: absolute;
  top: 132px;
  width: 25%;
  min-width: 150px;
  height: 118px;
  border: 3px solid #8a5d24;
  border-radius: 0 0 50% 50%;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(180deg, #d4a34a, #5c3b19);
  box-shadow: inset 0 -18px 24px rgba(0, 0, 0, 0.34), 0 20px 32px rgba(0, 0, 0, 0.38);
}

.coffin-pan {
  left: 8%;
  transform: translateY(var(--coffin-lift));
  animation: pan-left-sway 3.8s ease-in-out infinite;
}

.money-pan {
  right: 8%;
  transform: translateY(var(--money-drop));
  animation: pan-right-sway 3.5s ease-in-out infinite;
}

.pit {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3%;
  height: 120%;
  overflow: hidden;
  border-radius: 12px 12px 50% 50%;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.88), transparent 56%),
    linear-gradient(180deg, rgba(53, 34, 22, 0.2), rgba(31, 18, 13, 0.82));
}

.coffin {
  position: absolute;
  left: 22%;
  bottom: 7%;
  width: 56%;
  height: 94px;
  border: 3px solid #26170d;
  border-radius: 14px 14px 8px 8px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.1) 48% 52%, transparent 53%),
    linear-gradient(145deg, #59321c, #22130c);
  box-shadow: inset 0 -14px 18px rgba(0, 0, 0, 0.42), 0 12px 16px rgba(0, 0, 0, 0.32);
}

.coffin::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 16%;
  height: 8px;
  border-radius: 999px;
  background: #d6a44a;
  box-shadow: 0 22px 0 #d6a44a, 0 44px 0 #d6a44a;
}

.coffin-lid {
  position: absolute;
  left: -4%;
  top: -7%;
  width: 108%;
  height: 26px;
  border: 3px solid #21130c;
  border-radius: 12px;
  background: linear-gradient(145deg, #744326, #2b170d);
  transform: rotate(calc(-1 * var(--lid-open)));
  transform-origin: 8% 50%;
  transition: transform 350ms ease;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.34);
}

.person {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 50px;
  height: 64px;
  transform: translateX(-50%);
}

.person span {
  position: absolute;
  display: block;
}

.person .head {
  left: 16px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3c7a2;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.16);
}

.person .body {
  left: 18px;
  top: 18px;
  width: 14px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, #29e7c5, #126f68);
}

.person .limb {
  top: 22px;
  width: 24px;
  height: 6px;
  border-radius: 999px;
  background: #f3c7a2;
}

.person .limb.left {
  left: -1px;
  transform: rotate(30deg);
}

.person .limb.right {
  right: -1px;
  transform: rotate(-30deg);
}

.person.trapped {
  opacity: var(--trapped-opacity);
  transform: translateX(-50%) translateY(calc(34px - var(--progress) * 0.46px));
}

.coin-stack {
  position: absolute;
  bottom: 42px;
  width: 34px;
}

.coin-stack span {
  display: block;
  height: 9px;
  margin-top: -2px;
  border: 2px solid #8f5a12;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a4, #d79d23);
  box-shadow: 0 3px 0 #7c4d12;
}

.coin-stack.s1 { left: 23%; }
.coin-stack.s2 { left: 43%; bottom: 37px; }
.coin-stack.s3 { left: 62%; bottom: 45px; }

.coin-fall {
  position: absolute;
  top: -26px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3b2408;
  background: linear-gradient(180deg, #fff3ac, #d79d23);
  font-weight: 950;
  animation: coin-bounce 2.2s ease-in-out infinite;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.coin-fall.f1 { left: 28%; animation-delay: -0.3s; }
.coin-fall.f2 { left: 48%; animation-delay: -1s; }
.coin-fall.f3 { left: 67%; animation-delay: -1.6s; }

.freedom-person {
  position: absolute;
  left: 24%;
  bottom: 31%;
  width: 70px;
  height: 94px;
  opacity: var(--freedom-opacity);
  transform: translateY(var(--freedom-rise));
  transition: opacity 300ms ease, transform 300ms ease;
}

.freedom-person .head,
.freedom-person .body,
.freedom-person .limb {
  position: absolute;
  display: block;
}

.freedom-person .head {
  left: 24px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3c7a2;
}

.freedom-person .body {
  left: 27px;
  top: 22px;
  width: 16px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(180deg, #29e7c5, #126f68);
}

.freedom-person .limb {
  top: 30px;
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background: #f3c7a2;
}

.freedom-person .limb.left {
  left: -1px;
  transform: rotate(-34deg);
  transform-origin: right center;
}

.freedom-person .limb.right {
  right: -1px;
  transform: rotate(34deg);
  transform-origin: left center;
}

.rescue-card.defeated .freedom-person {
  opacity: 1;
  animation: freedom-cheer 1.8s ease-in-out infinite;
}

.boss-arena {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 520px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 59, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(4, 6, 12, 0.08), rgba(4, 6, 12, 0.9)),
    radial-gradient(circle at 50% 60%, rgba(255, 122, 26, 0.28), transparent 31%),
    linear-gradient(135deg, #111521, #221f3a 48%, #16100f);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.52);
}

.boss-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 7, 15, 0.1), transparent 36%, rgba(3, 7, 15, 0.16)),
    radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.32));
}

.dungeon-wall {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 74px 100%,
    radial-gradient(circle at 18% 32%, rgba(255, 212, 59, 0.14), transparent 10rem),
    radial-gradient(circle at 82% 22%, rgba(124, 92, 255, 0.18), transparent 12rem);
}

.dungeon-wall::before,
.dungeon-wall::after {
  content: "";
  position: absolute;
  bottom: 21%;
  width: 16%;
  height: 38%;
  border: 1px solid rgba(255, 209, 102, 0.18);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 209, 102, 0.52), transparent 18%),
    linear-gradient(180deg, rgba(255, 209, 102, 0.08), rgba(0, 0, 0, 0.3));
  clip-path: polygon(18% 100%, 34% 28%, 50% 0, 66% 28%, 82% 100%);
  filter: blur(0.2px);
}

.dungeon-wall::before { left: 5%; }
.dungeon-wall::after { right: 5%; }

.arena-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 28%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(41, 231, 197, 0.26), transparent 38%),
    repeating-linear-gradient(14deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(18, 37, 62, 0.72), rgba(2, 6, 14, 0.92));
  clip-path: polygon(10% 10%, 90% 10%, 100% 100%, 0 100%);
}

.boss-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(calc(1 + var(--phase, 0) * 0.002));
  animation: boss-art-idle 3.4s ease-in-out infinite;
}

.comic-boss-art {
  padding: 10px 0 0;
  filter:
    drop-shadow(0 30px 28px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 calc(10px + var(--phase) * 3px) rgba(255, 212, 59, 0.22));
}

.damage-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.boss-card.defeated .boss-art {
  filter: grayscale(0.66) brightness(0.7);
  animation-duration: 5s;
}

.boss-face {
  position: relative;
  z-index: 2;
  width: min(72vw, 390px);
  aspect-ratio: 0.82;
  border: 0;
  border-radius: 46% 46% 38% 38%;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 122, 26, 0.24), transparent 32%),
    linear-gradient(145deg, #544332, #24202a 46%, #08090f);
  filter: saturate(calc(1.05 + var(--phase) * 0.07)) contrast(calc(1.05 + var(--phase) * 0.02));
  transform: translateY(4%) rotate(calc((var(--phase) - 4) * 0.35deg));
  animation: boss-breathe 2.6s ease-in-out infinite;
  box-shadow:
    inset 0 -42px 58px rgba(0, 0, 0, 0.48),
    inset 0 16px 28px rgba(255, 255, 255, 0.07),
    0 30px 50px rgba(0, 0, 0, 0.48),
    0 0 calc(18px + var(--phase) * 7px) rgba(255, 79, 139, 0.25);
}

.aura {
  position: absolute;
  inset: -28%;
  z-index: -1;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--phase) * 28deg), rgba(255, 212, 59, 0.02), rgba(255, 122, 26, 0.34), rgba(124, 92, 255, 0.2), rgba(255, 212, 59, 0.02));
  filter: blur(12px);
  opacity: calc(0.7 + var(--phase) * 0.03);
  animation: aura-spin 7s linear infinite;
}

.wing {
  position: absolute;
  top: 18%;
  width: 45%;
  height: 34%;
  z-index: -1;
  background: linear-gradient(145deg, #151a2f, #315071 64%, #07111f);
  clip-path: polygon(0 8%, 100% 34%, 78% 100%, 48% 66%, 24% 94%);
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.38));
  animation: wing-idle 3.8s ease-in-out infinite;
}

.wing.left {
  left: -30%;
  transform-origin: 100% 45%;
}

.wing.right {
  right: -30%;
  transform: scaleX(-1);
  transform-origin: 0 45%;
  animation-name: wing-idle-right;
  animation-delay: -1.1s;
}

.horn {
  position: absolute;
  top: -10%;
  width: 20%;
  height: 28%;
  z-index: 3;
  background: linear-gradient(145deg, #fff8d2, #ffd43b 55%, #9a5c00);
  clip-path: polygon(50% 0, 94% 100%, 8% 88%);
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 9px 8px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 calc(10px + var(--phase) * 2px) rgba(255, 212, 59, 0.7));
}

.horn.crown-left {
  left: 20%;
  transform: rotate(calc(-23deg - var(--phase) * 0.6deg));
}

.horn.crown-mid {
  left: 40%;
  top: -14%;
  height: 31%;
}

.horn.crown-right {
  right: 20%;
  transform: rotate(calc(23deg + var(--phase) * 0.6deg)) scaleX(-1);
}

.arm {
  position: absolute;
  top: 54%;
  width: 38%;
  height: 13%;
  z-index: 2;
  border: 3px solid rgba(5, 9, 20, 0.7);
  border-radius: 999px 40px 40px 999px;
  background: linear-gradient(90deg, #0b1326, #315071 50%, #29e7c5);
  box-shadow: inset 0 -12px 18px rgba(0, 0, 0, 0.38);
  animation: claw-swipe 3.4s ease-in-out infinite;
}

.arm.left {
  left: -28%;
  transform-origin: 100% 50%;
}

.arm.right {
  right: -28%;
  transform-origin: 0 50%;
  animation-name: claw-swipe-right;
  animation-delay: -1.4s;
  transform: scaleX(-1);
}

.arm span {
  position: absolute;
  top: -16px;
  width: 18%;
  height: 150%;
  border-radius: 10px;
  background: #dffaff;
  clip-path: polygon(0 0, 100% 16%, 70% 100%, 22% 100%);
}

.arm i {
  position: absolute;
  right: 4%;
  top: 44%;
  width: 20%;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 79, 139, 0.75);
  box-shadow: 0 0 14px rgba(255, 79, 139, 0.6);
}

.arm.left span { left: -8%; }
.arm.right span { right: -8%; }

.boss-hood {
  position: absolute;
  inset: 8% 12% 35%;
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 50% 34%, rgba(41, 231, 197, 0.12), transparent 22%),
    linear-gradient(145deg, #334866, #11182b 58%, #050914);
  box-shadow:
    inset 0 16px 24px rgba(255, 255, 255, 0.06),
    inset 0 -22px 34px rgba(0, 0, 0, 0.46);
}

.face-plate {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 26%;
  height: 31%;
  z-index: 3;
  border: 3px solid rgba(5, 9, 20, 0.9);
  border-radius: 46% 46% 34% 34%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.14) 49% 51%, transparent 52%),
    linear-gradient(145deg, #cfddea, #53677f 48%, #1b2535);
  box-shadow: inset 0 -16px 20px rgba(0, 0, 0, 0.38);
}

.body-core {
  position: absolute;
  left: 35%;
  top: 57%;
  width: 30%;
  height: 23%;
  z-index: 4;
  border: 3px solid rgba(255, 209, 102, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff6ba 0 10%, #ffd166 12% 26%, rgba(255, 79, 139, 0.8) 28% 48%, rgba(10, 14, 28, 0.82) 50%);
  box-shadow: 0 0 calc(16px + var(--phase) * 5px) rgba(255, 209, 102, 0.5);
  animation: core-pulse 1.2s ease-in-out infinite;
}

.eye {
  position: absolute;
  top: 36%;
  z-index: 4;
  width: 54px;
  height: 19px;
  background: linear-gradient(90deg, #ffb0c9, #ff2e72 44%, #ffffff 50%, #ff2e72 56%, #6d092a);
  border: 2px solid #050914;
  border-radius: 999px;
  box-shadow: 0 0 calc(8px + var(--phase) * 4px) rgba(255, 79, 139, 0.9);
  animation: eye-glow 1.8s ease-in-out infinite;
}

.eye.left { left: 29%; transform: rotate(6deg); }
.eye.right { right: 29%; transform: rotate(-6deg); animation-delay: -0.6s; }

.mouth {
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 31%;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 5px;
  height: 24px;
  border-bottom: 9px solid #050914;
  border-radius: 0 0 50% 50%;
}

.mouth span {
  width: 9px;
  height: 19px;
  background: #edf7ff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.wound {
  position: absolute;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.wound::before,
.wound::after {
  content: "";
  position: absolute;
  inset: 0;
}

.w1, .w2, .w3, .w4, .w5, .w6, .w7, .w8, .w9,
.w10, .w11, .w12, .w13, .w14, .w15, .w16, .w17, .w18 {
  opacity: clamp(0, calc(var(--wounds) - var(--need)), 1);
}

.w1 { --need: 0; left: 50%; top: 41%; width: 5%; height: 1.3%; border-radius: 999px; background: #ff1f4f; transform: rotate(-12deg); box-shadow: 0 0 14px rgba(255, 31, 79, 0.85); }
.w2 { --need: 1; left: 45%; top: 38%; width: 3.6%; height: 8%; background: #ffd166; transform: rotate(28deg); box-shadow: 0 0 12px rgba(255, 209, 102, 0.7); }
.w3 { --need: 2; left: 36%; top: 51%; width: 8%; height: 6%; border-radius: 50%; background: rgba(72, 28, 122, 0.62); filter: blur(1px); }
.w4 { --need: 3; right: 35%; top: 52%; width: 7%; height: 5.6%; border-radius: 50%; background: rgba(72, 28, 122, 0.6); filter: blur(1px); }
.w5 { --need: 4; left: 27%; top: 60%; width: 12%; height: 1.4%; border-radius: 999px; background: #ff4f8b; transform: rotate(19deg); box-shadow: 0 0 14px rgba(255, 79, 139, 0.65); }
.w6 { --need: 5; right: 25%; top: 59%; width: 12%; height: 1.4%; border-radius: 999px; background: #ff4f8b; transform: rotate(-22deg); box-shadow: 0 0 14px rgba(255, 79, 139, 0.65); }
.w7 { --need: 6; left: 49%; top: 28%; width: 0.7%; height: 12%; background: rgba(4, 8, 18, 0.82); transform: rotate(4deg); }
.w8 { --need: 7; left: 57%; top: 34%; width: 0.7%; height: 10%; background: rgba(4, 8, 18, 0.82); transform: rotate(-24deg); }
.w9 { --need: 8; left: 42%; top: 58%; width: 16%; height: 7%; border-radius: 50%; background: rgba(42, 23, 74, 0.52); filter: blur(1.5px); }
.w10 { --need: 9; left: 18%; top: 76%; width: 11%; height: 1.5%; border-radius: 999px; background: #29e7c5; transform: rotate(-7deg); box-shadow: 0 0 14px rgba(41, 231, 197, 0.7); }
.w11 { --need: 10; right: 15%; top: 77%; width: 11%; height: 1.5%; border-radius: 999px; background: #29e7c5; transform: rotate(9deg); box-shadow: 0 0 14px rgba(41, 231, 197, 0.7); }
.w12 { --need: 11; left: 67%; top: 39%; width: 9%; height: 8%; border-radius: 50%; background: rgba(255, 31, 79, 0.23); filter: blur(1px); }
.w13 { --need: 12; left: 24%; top: 41%; width: 9%; height: 8%; border-radius: 50%; background: rgba(255, 31, 79, 0.22); filter: blur(1px); }
.w14 { --need: 13; left: 59%; top: 68%; width: 11%; height: 1.1%; border-radius: 999px; background: #ffd166; transform: rotate(28deg); box-shadow: 0 0 13px rgba(255, 209, 102, 0.65); }
.w15 { --need: 14; left: 32%; top: 68%; width: 10%; height: 1.1%; border-radius: 999px; background: #ffd166; transform: rotate(-31deg); box-shadow: 0 0 13px rgba(255, 209, 102, 0.65); }
.w16 { --need: 15; right: 18%; top: 50%; width: 0.8%; height: 14%; background: linear-gradient(#ffd166, #ff4f8b); transform: rotate(-40deg); box-shadow: 0 0 15px rgba(255, 79, 139, 0.6); }
.w17 { --need: 16; left: 18%; top: 50%; width: 0.8%; height: 14%; background: linear-gradient(#ffd166, #ff4f8b); transform: rotate(40deg); box-shadow: 0 0 15px rgba(255, 79, 139, 0.6); }
.w18 { --need: 17; left: 48%; top: 13%; width: 1%; height: 23%; background: linear-gradient(#ffd166, #ff4f8b); transform: rotate(-5deg); box-shadow: 0 0 18px rgba(255, 79, 139, 0.72); }

.hp-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
}

.hp-bar {
  position: relative;
  width: 100%;
  height: 24px;
  overflow: hidden;
  border: 2px solid rgba(5, 9, 20, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(90deg, #b01818, #ff3333 52%, #ff9a2f);
  box-shadow: 0 0 18px rgba(255, 51, 51, 0.45);
  transition: width 280ms ease;
}

.hp-bar strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8e9;
  font-size: 0.86rem;
  font-weight: 950;
  text-shadow: 1px 1px 0 #250000, 0 0 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

h1, h2, h3 { margin: 0 0 12px; line-height: 1.05; }
h1 { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 760px; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
p { line-height: 1.6; }

.muted { color: var(--muted); }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--text);
  background: var(--card-strong);
  font-weight: 800;
  cursor: pointer;
}

.button.primary {
  color: #1b1000;
  background: linear-gradient(180deg, #fff179, var(--accent) 55%, #e08910);
  border-color: #fff0a8;
  box-shadow: 0 6px 0 #8d4e00, 0 18px 28px rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
}

.button.danger { background: rgba(255, 107, 85, 0.18); }
.button.victory {
  color: #dfffe8;
  border-color: rgba(102, 208, 138, 0.42);
  background: rgba(102, 208, 138, 0.18);
}

.hero-side {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
  border-color: rgba(255, 212, 59, 0.5);
}

.hero-side h1 {
  color: var(--accent);
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #05060a;
}

.mobile-summary {
  display: none;
  gap: 14px;
  margin: 0 0 22px;
}

.mobile-about-content {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mobile-about-photo {
  display: block;
  width: 118px;
  aspect-ratio: 1;
  max-height: none;
  margin: 4px 0 0;
  object-fit: cover;
  border: 1px solid rgba(255, 212, 59, 0.28);
  border-radius: 10px;
}

.mobile-about-content p {
  margin: 0;
}

.grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 22px 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.analytics-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.stats strong { display: block; font-size: 1.4rem; }
.stats span { color: var(--muted); font-size: 0.9rem; }

.leaderboard {
  display: grid;
  gap: 10px;
}

.section-head.compact {
  margin: 6px 0 2px;
}

.section-head.compact h2 {
  margin: 0;
  font-size: 1.25rem;
}

.leader-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-color: rgba(255, 212, 59, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg, rgba(255, 212, 59, 0.08), transparent),
    rgba(0, 0, 0, 0.18);
}

.leader-row .rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 209, 102, 0.36);
  border-radius: 10px;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
  font-weight: 900;
}

.stage-list {
  display: grid;
  gap: 10px;
}

.stage-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  border: 1px solid rgba(255, 212, 59, 0.28);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(90deg, rgba(255, 212, 59, 0.06), rgba(0, 0, 0, 0.18));
  opacity: 0.56;
}

.stage-row.active {
  opacity: 1;
  border-color: rgba(255, 212, 59, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 212, 59, 0.08), 0 0 22px rgba(255, 212, 59, 0.08);
}

.stage-row strong {
  grid-row: span 2;
  display: grid;
  min-height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 212, 59, 0.45);
  border-radius: 12px;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.42);
  font-size: 1.2rem;
}

.stage-row span {
  color: #fff8e9;
  font-weight: 950;
  text-transform: uppercase;
}

.stage-row small {
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.quick-damage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.quick-damage a {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #5fd044, #2d9a25);
  font-size: 1.2rem;
  font-weight: 950;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.34);
}

.quick-damage a:nth-child(2) { background: linear-gradient(180deg, #51a8f5, #2665b4); }
.quick-damage a:nth-child(3) { background: linear-gradient(180deg, #9a7cff, #5b39b8); }
.quick-damage a:nth-child(4) { background: linear-gradient(180deg, #ff9a2f, #d5530d); }

.gift-callout {
  display: grid;
  width: 100%;
  gap: 8px;
  border: 1px solid rgba(255, 212, 59, 0.54);
  border-radius: 14px;
  padding: 14px 16px;
  background:
    linear-gradient(90deg, rgba(255, 212, 59, 0.16), rgba(124, 92, 255, 0.08)),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.gift-callout strong {
  color: var(--accent);
  font-size: 1.08rem;
  text-transform: uppercase;
}

.gift-callout span {
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.45;
}

.gift-callout a {
  width: fit-content;
  color: #1b1000;
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #fff179, var(--accent) 60%, #d1840e);
  font-weight: 900;
}

.gift-callout.inline {
  margin: -4px 0 6px;
}

.gift-showcase-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 2px solid #fff0a8;
  border-radius: 12px;
  padding: 10px 16px;
  color: #1b1000;
  background: linear-gradient(180deg, #fff8a8, var(--accent) 58%, #e08910);
  font-weight: 950;
  text-transform: uppercase;
  box-shadow:
    0 0 0 0 rgba(255, 212, 59, 0.52),
    0 8px 0 #8d4e00,
    0 18px 30px rgba(0, 0, 0, 0.34);
  animation: gift-link-pulse 1.35s ease-in-out infinite;
}

.gift-showcase-link:hover {
  transform: translateY(-1px);
}

.leader-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-row small {
  grid-column: 2 / 4;
  color: var(--muted);
}

.feed,
.admin-list {
  display: grid;
  gap: 12px;
}

.compact-list {
  margin-top: 16px;
}

.feed-item,
.admin-row,
.gift-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.feed-item { display: grid; gap: 4px; }
.feed-item.pending { opacity: 0.7; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gift-card {
  display: grid;
  gap: 12px;
}

.gift-card img,
.gift-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: linear-gradient(135deg, #4d3512, #08090f);
}

.gift-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gift-slides {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gift-slides::-webkit-scrollbar {
  display: none;
}

.gift-slides img {
  scroll-snap-align: start;
  border-radius: 0;
}

.gift-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.gift-dots span {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.gift-dots span:first-child {
  background: var(--accent);
}

.gift-slide-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  color: #1b1000;
  background: rgba(255, 212, 59, 0.88);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.gift-slide-button.prev { left: 8px; }
.gift-slide-button.next { right: 8px; }

.gift-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 3rem;
}

.gift-card.reserved { opacity: 0.68; }
.gift-card.claimed { opacity: 0.45; filter: grayscale(0.7); }

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.narrow {
  max-width: 720px;
  margin: 34px auto;
}

.form,
.inline-form {
  display: grid;
  gap: 14px;
}

.inline-form {
  grid-template-columns: 1fr auto;
  margin: 20px 0;
}

label { display: grid; gap: 8px; color: var(--muted); }

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-color: rgba(255, 212, 59, 0.32);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.42);
  font: inherit;
}

.check-row {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--text);
  line-height: 1.45;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.check-row a {
  color: var(--accent);
  font-weight: 800;
}

.payment-box {
  border: 1px dashed rgba(255, 212, 59, 0.55);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 212, 59, 0.08);
}

.payment-box.attention {
  border: 2px solid rgba(255, 212, 59, 0.78);
  background:
    linear-gradient(90deg, rgba(255, 212, 59, 0.18), rgba(124, 92, 255, 0.09)),
    rgba(0, 0, 0, 0.22);
  animation: payment-pulse 1.45s ease-in-out infinite;
}

.payment-instruction {
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff8e9;
  background: rgba(0, 0, 0, 0.3);
  font-weight: 800;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gallery article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

.about-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 22px;
  padding-top: 34px;
}

.about-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.about-photo.placeholder {
  display: grid;
  place-items: center;
  background: var(--card-strong);
  font-size: 7rem;
}

.admin-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.admin-row.simple,
.message-row,
.gift-admin-row {
  grid-template-columns: 1fr auto;
}

.message-row {
  align-items: start;
}

.message-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.message-row p,
.gift-admin-row p {
  margin: 10px 0 0;
}

.gift-admin-actions,
.gift-photo-form {
  display: grid;
  gap: 10px;
}

.gift-photo-form {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  align-items: end;
}

.gift-photo-form label {
  gap: 5px;
  font-size: 0.86rem;
}

.gift-photo-form input {
  max-width: 230px;
  padding: 8px;
  font-size: 0.86rem;
}

.contact-panel h1 {
  font-size: clamp(2rem, 7vw, 3.6rem);
}

.legal-docs {
  margin-top: 34px;
}

.legal-docs h1 {
  font-size: clamp(2rem, 7vw, 4rem);
}

.legal-note,
.legal-section {
  border: 1px solid rgba(255, 212, 59, 0.24);
  border-radius: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.18);
}

.legal-note {
  margin-bottom: 14px;
  border-color: rgba(255, 212, 59, 0.5);
  background: linear-gradient(90deg, rgba(255, 212, 59, 0.13), rgba(124, 92, 255, 0.08));
}

.gift-legal-note,
.support-legal-note {
  margin: 14px 0 18px;
}

.gift-legal-note strong,
.support-legal-note strong {
  color: var(--accent);
  text-transform: uppercase;
}

.legal-section {
  margin-top: 12px;
}

.legal-section h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

.legal-section p:last-child,
.legal-note p:last-child {
  margin-bottom: 0;
}

.flash-wrap { margin-top: 18px; }
.flash {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--card-strong);
}
.flash.error { border-color: rgba(255, 107, 85, 0.5); }
.flash.success { border-color: rgba(126, 227, 95, 0.5); }

.danger-zone {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-color: rgba(255, 99, 128, 0.34);
  background:
    linear-gradient(90deg, rgba(255, 99, 128, 0.12), transparent),
    var(--card);
}

@keyframes boss-breathe {
  0%, 100% { transform: translateY(4%) rotate(calc((var(--phase) - 4) * 0.35deg)) scale(1); }
  50% { transform: translateY(2%) rotate(calc((var(--phase) - 4) * 0.35deg)) scale(1.025); }
}

@keyframes boss-art-idle {
  0%, 100% { transform: scale(calc(1 + var(--phase, 0) * 0.002)) translateY(0); }
  50% { transform: scale(calc(1.012 + var(--phase, 0) * 0.002)) translateY(-4px); }
}

@keyframes scale-sway {
  0%, 100% { transform: rotate(var(--tilt)); }
  50% { transform: rotate(calc(var(--tilt) + 1.3deg)); }
}

@keyframes pan-left-sway {
  0%, 100% { transform: translateY(var(--coffin-lift)) rotate(-1.2deg); }
  50% { transform: translateY(calc(var(--coffin-lift) - 5px)) rotate(1deg); }
}

@keyframes pan-right-sway {
  0%, 100% { transform: translateY(var(--money-drop)) rotate(1.2deg); }
  50% { transform: translateY(calc(var(--money-drop) + 5px)) rotate(-1deg); }
}

@keyframes coin-bounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(12px) rotate(10deg); }
}

@keyframes freedom-cheer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

@keyframes claw-swipe {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(9deg) translateY(-5px); }
}

@keyframes claw-swipe-right {
  0%, 100% { transform: scaleX(-1) rotate(-5deg); }
  50% { transform: scaleX(-1) rotate(9deg) translateY(-5px); }
}

@keyframes wing-idle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg) translateY(5px); }
}

@keyframes wing-idle-right {
  0%, 100% { transform: scaleX(-1) rotate(-4deg); }
  50% { transform: scaleX(-1) rotate(5deg) translateY(5px); }
}

@keyframes core-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.78; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes eye-glow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@keyframes gift-link-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 212, 59, 0.44),
      0 8px 0 #8d4e00,
      0 18px 30px rgba(0, 0, 0, 0.34);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(255, 212, 59, 0),
      0 8px 0 #8d4e00,
      0 0 34px rgba(255, 212, 59, 0.5);
  }
}

@keyframes payment-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.4), 0 0 20px rgba(255, 212, 59, 0.12);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 212, 59, 0), 0 0 34px rgba(255, 212, 59, 0.34);
  }
}

@media (max-width: 820px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .hero,
  .grid.two,
  .about-layout,
  .cards,
  .gallery { grid-template-columns: 1fr; }
  .hero { padding-top: 18px; }
  .hero-side {
    display: none;
  }
  .mobile-summary {
    display: grid;
  }
  .boss-card { padding: 14px; }
  .comic-title span {
    font-size: clamp(1.65rem, 10vw, 3.1rem);
  }
  .comic-title strong {
    font-size: clamp(1.9rem, 11vw, 3.5rem);
  }
  .quick-damage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .boss-arena {
    min-height: clamp(430px, 118vw, 620px);
  }
  .rescue-arena {
    aspect-ratio: 4 / 5;
    min-height: 560px;
  }
  .scale {
    inset: 5% -8% 6%;
  }
  .scale-beam {
    left: 12%;
    right: 12%;
  }
  .pan {
    width: 30%;
    min-width: 132px;
  }
  .coffin-pan { left: 10%; }
  .money-pan { right: 10%; }
  .chain {
    height: 126px;
  }
  .freedom-person {
    left: 22%;
    bottom: 33%;
  }
  .boss-face {
    width: min(78vw, 330px);
  }
  .boss-stage {
    justify-content: center;
    text-align: center;
  }
  .hp-row {
    font-size: 0.92rem;
  }
  .leader-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 9px 10px;
  }
  .stage-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }
  .inline-form { grid-template-columns: 1fr; }
  .admin-row,
  .admin-row.simple,
  .message-row,
  .gift-admin-row { grid-template-columns: 1fr; }
  .gift-photo-form { grid-template-columns: 1fr; }
  .gift-photo-form input { max-width: none; }
  .analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: clamp(1.8rem, 10vw, 3rem); }
}

@media (max-width: 460px) {
  main {
    width: min(100% - 18px, 1180px);
  }
  .panel,
  .boss-card {
    padding: 14px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .comic-title em {
    font-size: 0.95rem;
  }
  .leader-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .leader-row > span:last-of-type {
    grid-column: 2;
  }
  .leader-row small {
    grid-column: 2;
  }
  .mobile-about-content {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }
  .mobile-about-photo {
    width: 86px;
  }
  .boss-arena {
    min-height: 430px;
  }
  .rescue-arena {
    min-height: 520px;
  }
  .scale {
    inset: 4% -18% 5%;
  }
  .pan {
    width: 31%;
    min-width: 118px;
    height: 104px;
  }
  .coffin {
    height: 82px;
  }
  .coin-stack {
    transform: scale(0.86);
    transform-origin: bottom center;
  }
  .boss-face {
    width: min(84vw, 290px);
  }
}