:root {
  --bg: #18151a;
  --ink: #f4efe6;
  --press-ms: 90ms;
  background: var(--bg);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
}

.arena {
  position: relative;
  width: min(100vw, calc(100dvh * 1.829427083));
  height: min(100dvh, calc(100vw / 1.829427083));
  aspect-ratio: 1405 / 768;
  container-type: inline-size;
  --world-scale: 1;
  --actor-scale: 0.72;
  --fog-x: 50%;
  --fog-y: 50%;
  --fog-radius: 250px;
  overflow: hidden;
  background-color: #18151a;
  --map-image: url("./assets/map-1-3d.jpg?v=3");
  --map-base: url("./assets/map-1-base.jpg?v=3");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  --ambient-top: rgb(54 78 150 / 0.5);
  --ambient-bottom: rgb(24 30 74 / 0.55);
  --lantern: rgb(255 196 128 / 0.75);
  --mist: rgb(190 205 230 / 0.2);
}

.arena[data-wave="2"] {
  --map-image: url("./assets/map-2-3d.jpg?v=3");
  --map-base: url("./assets/map-2-base.jpg?v=3");
  --ambient-top: rgb(120 70 40 / 0.4);
  --ambient-bottom: rgb(40 34 70 / 0.5);
  --lantern: rgb(255 180 100 / 0.8);
  --mist: rgb(235 200 160 / 0.18);
}

.arena[data-wave="3"] {
  --map-image: url("./assets/map-3-3d.jpg?v=3");
  --map-base: url("./assets/map-3-base.jpg?v=3");
}

.arena[data-wave="5"] {
  --map-image: url("./assets/map-5-3d.jpg?v=1");
  --map-base: url("./assets/map-5-base.jpg?v=1");
}

.arena[data-wave="3"],
.arena[data-wave="5"] {
  --ambient-top: rgb(96 46 150 / 0.5);
  --ambient-bottom: rgb(30 18 70 / 0.55);
  --lantern: rgb(255 190 150 / 0.7);
  --mist: rgb(200 160 240 / 0.2);
}

.arena[data-wave="4"] {
  --map-image: url("./assets/map-4-3d.jpg?v=3");
  --map-base: url("./assets/map-4-base.jpg?v=3");
  --ambient-top: rgb(40 70 140 / 0.5);
  --ambient-bottom: rgb(20 26 64 / 0.55);
  --lantern: rgb(255 200 120 / 0.8);
  --mist: rgb(180 200 235 / 0.18);
}

.arena-throne-room {
  background-color: #171321;
  --ambient-top: rgb(120 40 110 / 0.45);
  --ambient-bottom: rgb(40 16 40 / 0.5);
  --lantern: rgb(255 170 110 / 0.7);
  --mist: rgb(220 180 230 / 0.16);
  --map-image:
    linear-gradient(180deg, rgb(13 10 20 / 9%), rgb(13 10 20 / 0%) 44%, rgb(13 10 20 / 16%)),
    url("./assets/map-throne-3d.jpg");
  --map-base:
    linear-gradient(180deg, rgb(13 10 20 / 9%), rgb(13 10 20 / 0%) 44%, rgb(13 10 20 / 16%)),
    url("./assets/map-throne-base.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.throne-room {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 12%, #08081066 12% 13%, transparent 13% 87%, #08081066 87% 88%, transparent 88%),
    repeating-linear-gradient(90deg, transparent 0 12%, #be8b6724 12.2% 12.5%, transparent 12.8% 25%),
    linear-gradient(180deg, #211228 0 48%, #3c202d 49%, #1b111c 70%, #120b12);
  pointer-events: none;
}

.arena-throne-room .throne-room {
  display: block;
  background: transparent;
}

.arena-throne-room .throne-room::before,
.arena-throne-room .throne-room::after,
.arena-throne-room .throne-room > :not(.throne-room-name) {
  display: none;
}

.throne-room::before {
  position: absolute;
  top: 5%;
  left: 50%;
  width: min(48%, 560px);
  height: 58%;
  border: clamp(10px, 2vw, 25px) ridge #63424a;
  border-bottom: 0;
  border-radius: 48% 48% 0 0;
  background:
    radial-gradient(ellipse at 50% 88%, #ff3d7133, transparent 44%),
    linear-gradient(90deg, #1a0f21, #3a1d34 48%, #1a0f21);
  box-shadow: 0 0 30px #e3497026, inset 0 0 40px #0a0712;
  content: "";
  transform: translateX(-50%);
}

.throne-room::after {
  position: absolute;
  right: -15%;
  bottom: -18%;
  left: -15%;
  height: 52%;
  background:
    linear-gradient(180deg, #25121e 0 10%, transparent 11%),
    repeating-linear-gradient(90deg, transparent 0 11%, #b6866b20 11.1% 11.35%, transparent 11.5% 22%),
    repeating-linear-gradient(0deg, transparent 0 22%, #b6866b1c 22.2% 22.7%, transparent 23% 44%);
  clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
  content: "";
  transform: perspective(260px) rotateX(24deg);
}

.throne-room-name {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: 50%;
  padding: 0.35em 1.1em;
  border: 2px solid #856483;
  background: linear-gradient(90deg, #241730, #523256 50%, #241730);
  color: #f3c887;
  font-size: clamp(0.58rem, 1.3vw, 1rem);
  font-weight: 1000;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px #a548cb, 0 2px 4px #000;
  white-space: nowrap;
  transform: translateX(-50%);
}

.throne-pillar {
  position: absolute;
  top: 8%;
  bottom: 35%;
  width: 7%;
  border: 4px ridge #83605a;
  background:
    linear-gradient(90deg, #281a28, #ac7560 28%, #452637 56%, #211525 100%);
  box-shadow: 0 0 25px #eb744944, inset 0 0 12px #f2bc8544;
}

.throne-pillar::before,
.throne-pillar::after {
  position: absolute;
  right: -28%;
  left: -28%;
  height: 9%;
  border: 3px ridge #ab8066;
  background: linear-gradient(#68414c, #2b1a2b);
  content: "";
}

.throne-pillar::before { top: 0; }
.throne-pillar::after { bottom: 0; }
.throne-pillar-left { left: 8%; }
.throne-pillar-right { right: 8%; }

.throne-flame {
  position: absolute;
  z-index: 1;
  top: 26%;
  color: #ffac4d;
  font-size: clamp(1.5rem, 4vw, 3rem);
  filter: drop-shadow(0 0 8px #ff542c) drop-shadow(0 0 22px #d12d5d);
  animation: throne-flame-flicker 0.32s steps(2, end) infinite alternate;
}

.throne-flame-left { left: 15%; }
.throne-flame-right { right: 15%; }

.throne-dais {
  position: absolute;
  z-index: 1;
  top: 59%;
  left: 50%;
  width: min(41%, 470px);
  height: 13%;
  border: 5px ridge #a77b65;
  background:
    linear-gradient(180deg, #7b3b49, #342039 44%, #1a111d);
  box-shadow: 0 18px 25px #0009, 0 0 28px #f5407655;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.throne-seat {
  position: absolute;
  z-index: 2;
  top: 27%;
  left: 50%;
  width: clamp(90px, 17%, 190px);
  height: 32%;
  border: 7px ridge #9c6a4f;
  border-radius: 46% 46% 14% 14%;
  background:
    radial-gradient(ellipse at 50% 18%, #ff7c5633, transparent 48%),
    linear-gradient(90deg, #2a1426, #65243d 48%, #251324);
  box-shadow: 0 0 20px #ee3d6a77, inset 0 0 18px #0a0712;
  transform: translateX(-50%);
}

.throne-seat::before {
  position: absolute;
  top: -19%;
  left: 50%;
  width: 62%;
  height: 26%;
  border: 5px ridge #dbb66b;
  background: #492238;
  clip-path: polygon(50% 0, 63% 35%, 100% 10%, 82% 100%, 18% 100%, 0 10%, 37% 35%);
  content: "";
  transform: translateX(-50%);
}

.throne-seat::after {
  position: absolute;
  right: -14%;
  bottom: -5%;
  left: -14%;
  height: 19%;
  border: 4px ridge #ad7954;
  background: linear-gradient(#613548, #211621);
  content: "";
}

.throne-seat > span {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 20%;
  height: 26%;
  border: 2px solid #ffd27a;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdc7b, #df4a63 60%, transparent 70%);
  box-shadow: 0 0 16px #ff5a79;
  transform: translateX(-50%);
}

.arena-throne-room .fog {
  background: radial-gradient(
    circle at var(--fog-x) var(--fog-y),
    transparent 0,
    rgb(8 9 18 / 0.02) var(--fog-radius),
    rgb(8 9 18 / 0.38) calc(var(--fog-radius) + 150px),
    rgb(8 9 18 / 0.7) calc(var(--fog-radius) + 420px)
  );
}

.game-hud {
  position: absolute;
  z-index: 10;
  top: 20px;
  left: 50%;
  display: flex;
  max-width: calc(100vw - 20px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 16px;
  border: 2px solid #252b30;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 0 #252b30;
  color: #252b30;
  transform: translateX(-50%);
  pointer-events: none;
}

.player-health {
  width: 76px;
  height: 12px;
  overflow: hidden;
  border: 2px solid #252b30;
  border-radius: 5px;
  background: #eee;
}

.player-health-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #56c96b;
  transition: width 0.16s ease, background-color 0.16s ease;
}

.player-health-fill.health-critical {
  background: #e34e4e;
}

.sound-toggle {
  padding: 4px 7px;
  border: 1px solid #a2a89c;
  border-radius: 6px;
  background: #f4f5ef;
  color: #30392f;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: auto;
  white-space: nowrap;
}

.menu-music-toggle {
  margin: 6px auto 0;
}

.sound-toggle:hover {
  background: #e9eee4;
}

.wave-display {
  color: #626b5d;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.player-name-display {
  max-width: 145px;
  overflow: hidden;
  padding: 4px 8px;
  border: 1px solid #788a73;
  border-radius: 8px;
  background: #e7eddb;
  color: #304332;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-coins {
  padding: 4px 8px;
  border: 1px solid #b27a25;
  border-radius: 8px;
  background: linear-gradient(#ffe797, #f3b83f);
  box-shadow: 0 2px 0 #986020;
  color: #593b20;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.hud-coins.is-bump {
  animation: coin-bump 0.28s ease;
}

@keyframes coin-bump {
  40% { scale: 1.14; }
  100% { scale: 1; }
}

.timer-label {
  color: #758071;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.timer {
  min-width: 54px;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

.timer-urgent {
  color: #d9463d;
  animation: timer-pulse 0.7s ease-in-out infinite alternate;
}

.controls-hint {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #ffffff55;
  border-radius: 8px;
  background: #17151bd9;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

.combat-loadout {
  position: absolute;
  z-index: 10;
  bottom: 52px;
  left: 12px;
  display: grid;
  width: min(570px, calc(100% - 24px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  pointer-events: auto;
}

.combat-slot {
  position: relative;
  display: grid;
  min-width: 0;
  max-width: none;
  min-height: 65px;
  align-content: center;
  gap: 3px;
  padding: 7px 10px;
  overflow: hidden;
  border: 2px solid #252b30;
  border-radius: 9px;
  background: #fff3d9ed;
  box-shadow: 0 3px 0 #252b30;
  color: #252b30;
  text-align: left;
}

.combat-boost-slot {
  cursor: pointer;
  font: inherit;
}

.combat-boost-slot:disabled {
  cursor: not-allowed;
}

.combat-boost-slot.is-recharging {
  background: #d7d6c8ed;
}

.combat-boost-slot.is-recharging::after,
.combat-power-slot.is-recharging::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #6d8797;
  content: "";
  transform: scaleX(var(--boost-cooldown-progress, 0));
  transform-origin: left center;
}

.combat-slot-kicker {
  color: #69705e;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.combat-slot-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.combat-slot-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
}

.combat-slot-name {
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-slot-detail {
  color: #585648;
  font-size: 0.62rem;
  font-weight: 750;
}

.combat-boost-slot:focus-visible {
  outline: 3px solid #df5537;
  outline-offset: 2px;
}

.combat-power-slot {
  cursor: pointer;
  font: inherit;
  background: #d9eff8ed;
}

.combat-power-slot:disabled {
  cursor: not-allowed;
}

.combat-power-slot:focus-visible {
  outline: 3px solid #48b9db;
  outline-offset: 2px;
}

.player-name-tag {
  position: absolute;
  z-index: 6;
  top: -23px;
  left: 50%;
  max-width: 120px;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid #252b30;
  border-radius: 5px;
  background: #fff3d9ed;
  color: #252b30;
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .game-hud {
    top: 8px;
    gap: 6px;
    padding: 7px;
  }

  .sound-toggle {
    padding: 4px 5px;
    font-size: 0.65rem;
  }

  .wave-display {
    font-size: 0.65rem;
  }

  .player-name-display {
    max-width: 100px;
    font-size: 0.64rem;
  }

  .combat-loadout {
    bottom: 48px;
    left: 7px;
    gap: 5px;
  }

  .combat-slot {
    min-width: 0;
    max-width: none;
    min-height: 57px;
    padding: 5px 7px;
  }

  .combat-slot-kicker {
    font-size: 0.52rem;
  }

  .combat-slot-name {
    font-size: 0.66rem;
  }

  .combat-slot-detail {
    font-size: 0.57rem;
  }
}

.round-message {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  padding: 12px 20px;
  border: 2px solid #252b30;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 0 #252b30;
  color: #252b30;
  font-weight: 800;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wave-countdown {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 160px;
  justify-items: center;
  gap: 2px;
  padding: 10px 28px 16px;
  border: 2px solid #f4d28b;
  border-radius: 12px;
  background: #17151be8;
  box-shadow: 0 4px 0 #252b30, 0 0 24px #17151b88;
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wave-countdown-number {
  color: #f4d28b;
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 8px #000b;
}

.wave-countdown-label {
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 5px #0009;
}

.game-over {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  background: #202922b8;
  color: white;
}

.front-menu {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: start center;
  overflow: auto;
  overflow-x: hidden;
  padding: clamp(12px, 3vw, 32px);
  background:
    radial-gradient(ellipse at 50% 42%, #344d33aa 0, #172125bb 57%, #121920e8 100%),
    #172125aa;
}

.front-menu[hidden] {
  display: none;
}

.menu-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  overflow: visible;
  margin-block: auto;
  padding: clamp(18px, 4vw, 34px);
  border: 4px solid #252a2b;
  border-radius: 20px;
  background:
    linear-gradient(135deg, #fff5ce 0 9%, transparent 9% 91%, #efb34a 91%),
    linear-gradient(160deg, #fff1be, #e9c57a 75%, #c78e45);
  box-shadow: 0 8px 0 #242726, 0 14px 30px #090d0dcc, inset 0 0 0 3px #fff7d4;
  color: #272a25;
}

.menu-panel::before,
.menu-panel::after {
  position: absolute;
  z-index: 0;
  width: 96px;
  height: 20px;
  border: 3px solid #342b25;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #ed6844 0 9px, #f08c48 9px 17px);
  content: "";
}

.menu-panel::before {
  top: 15px;
  right: -23px;
  transform: rotate(38deg);
}

.menu-panel::after {
  bottom: 18px;
  left: -26px;
  transform: rotate(-38deg);
}

.menu-decorations {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.menu-decorations span {
  position: absolute;
  display: block;
  filter: drop-shadow(0 3px 2px #241a1ab8);
  user-select: none;
}

.menu-bat {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  animation: menu-bat-drift 4s ease-in-out infinite;
}

.menu-bat-left {
  top: 17%;
  left: -31px;
  transform: rotate(-14deg);
}

.menu-bat-right {
  top: 37%;
  right: -32px;
  animation-delay: -2s;
  transform: rotate(12deg);
}

.menu-pumpkin {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  filter: drop-shadow(0 0 9px #f47a27b5);
  animation: menu-pumpkin-glow 2.8s ease-in-out infinite alternate;
}

.menu-pumpkin-left {
  bottom: 9%;
  left: -27px;
}

.menu-pumpkin-right {
  right: -27px;
  bottom: 9%;
  animation-delay: -1.4s;
}

.menu-spider {
  top: -18px;
  right: 13%;
  font-size: 2rem;
  transform-origin: 50% -18px;
  animation: menu-spider-sway 3.2s ease-in-out infinite;
}

.screen-ornament {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  margin: -9px 0 3px;
  padding-inline: 5px;
  color: #52313a;
  font-size: 1.25rem;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

.screen-ornament span:nth-child(2),
.screen-ornament span:nth-child(4) {
  color: #342b43;
  font-size: 1.45rem;
  animation: menu-bat-drift 3.5s ease-in-out infinite;
}

.screen-ornament span:nth-child(4) {
  animation-delay: -1.7s;
}

.shop-ornament {
  border-bottom: 1px dotted #9b6a42;
}

.locker-ornament {
  border-bottom: 1px dotted #685064;
  color: #75432b;
}

@keyframes menu-bat-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes menu-pumpkin-glow {
  from { filter: drop-shadow(0 0 5px #ef762b85); }
  to { filter: drop-shadow(0 0 13px #ff9b35d9); }
}

@keyframes menu-spider-sway {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 7deg; }
}

.menu-heading,
.menu-screen,
.progression-feedback {
  position: relative;
  z-index: 1;
}

.menu-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3px 16px;
  margin: 0 0 20px;
  padding-bottom: 13px;
  border-bottom: 3px dashed #906238;
}

.menu-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: #c54e35;
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.22em;
}

.menu-heading h1 {
  margin: 0;
  color: #294539;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 1000;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-shadow: 1px 2px 0 #fff5d2, 2px 3px 0 #b58b53;
}

.menu-coins {
  margin: 0;
  padding: 7px 11px;
  border: 2px solid #633d22;
  border-radius: 10px;
  background: linear-gradient(#ffe77e, #efa93a);
  box-shadow: 0 3px 0 #8d5023;
  color: #523419;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.menu-coins strong {
  padding-left: 4px;
  font-size: 1.05rem;
}

@media (max-width: 520px) {
  .menu-bat-left,
  .menu-pumpkin-left {
    left: -18px;
  }

  .menu-bat-right,
  .menu-pumpkin-right {
    right: -18px;
  }

  .menu-spider {
    right: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-decorations span,
  .screen-ornament span {
    animation: none;
  }
}

.menu-description {
  margin: 0 0 16px;
  color: #4b4738;
  font-size: 0.95rem;
  font-weight: 700;
}

.player-name-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #38473b;
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-name-field input {
  width: 100%;
  min-height: 40px;
  padding: 7px 11px;
  border: 2px solid #3c473d;
  border-radius: 8px;
  background: #fff9e6;
  color: #292d28;
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
}

.player-name-field input:focus-visible {
  outline: 3px solid #df5537;
  outline-offset: 2px;
}

.loadout-preview {
  width: 100%;
  display: flex;
  min-height: 128px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 2px dashed #906238;
  border-radius: 10px;
  background: #fff5d266;
  color: #38473b;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: left;
}

.loadout-preview:hover {
  background: #fff7dc;
  border-style: solid;
}

.loadout-preview:focus-visible {
  outline: 3px solid #df5537;
  outline-offset: 3px;
}

.loadout-preview #loadout-preview-content {
  display: flex;
  align-items: center;
  gap: 18px;
}

.loadout-preview #loadout-preview-content .character-preview {
  width: 92px;
  height: 108px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 80%, #ee81264d 0 43%, transparent 45%),
    linear-gradient(145deg, #1d1524, #34243a);
  box-shadow: inset 0 0 0 2px #f39a4c66, 0 4px 0 #120e18;
}

.loadout-preview #loadout-preview-content .hero-pixel-art {
  width: 76px;
  height: 92px;
}

.loadout-preview-label {
  display: grid;
  gap: 5px;
}

.loadout-preview-label strong {
  color: #ffb45f;
  font-size: 1.15rem;
}

.loadout-preview-label span {
  color: #e7d5e4;
  font-size: 0.8rem;
  font-weight: 800;
}

.locker-hint {
  color: #755022;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.character-preview {
  position: relative;
  display: inline-grid;
  width: 56px;
  height: 64px;
  flex: 0 0 auto;
  place-items: center;
}

.character-preview .hero-pixel-art {
  position: relative;
  width: 52px;
  height: 62px;
}

.loadout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.loadout-grid label {
  display: grid;
  gap: 7px;
  color: #38473b;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.loadout-grid select {
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 2px solid #3c473d;
  border-radius: 8px;
  background: #fff9e6;
  color: #292d28;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.menu-primary,
.menu-secondary,
.shop-buy-button {
  min-height: 42px;
  padding: 9px 16px;
  border: 3px solid #282b28;
  border-radius: 10px;
  box-shadow: 0 4px 0 #282b28;
  cursor: pointer;
  font: inherit;
  font-weight: 1000;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.menu-primary {
  width: 100%;
  background: linear-gradient(#ffdb62, #f4a936);
  color: #51351e;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-secondary {
  margin-top: 11px;
  background: linear-gradient(#e9f2c7, #b4cf85);
  color: #304332;
}

.menu-shop-entry {
  width: 100%;
  margin: 0 0 12px;
}

.menu-primary:hover,
.menu-secondary:hover,
.shop-buy-button:not(:disabled):hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #282b28;
}

.menu-primary:active,
.menu-secondary:active,
.shop-buy-button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #282b28;
}

.menu-primary:focus-visible,
.menu-secondary:focus-visible,
.shop-buy-button:focus-visible,
.locker-equip-button:focus-visible,
.loadout-grid select:focus-visible {
  outline: 3px solid #df5537;
  outline-offset: 3px;
}

.shop-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(45vh, 390px);
  overflow: auto;
  padding: 3px 5px 9px 3px;
}

.preparation-shop {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 3px dashed #906238;
}

.shop-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.shop-section-heading h2 {
  margin: 0;
  color: #294539;
  font-size: 1.1rem;
}

.shop-section-heading span {
  color: #755022;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.shop-rotation-note {
  margin: 5px 0 9px;
  color: #5b5140;
  font-size: 0.75rem;
  font-weight: 700;
}

.shop-category {
  margin: 14px 0;
}

.shop-category-title,
.shop-category > h3 {
  margin: 12px 0 5px;
  color: #294539;
  font-size: 0.95rem;
  font-weight: 1000;
}

.shop-category-note {
  margin: 0 0 8px;
  color: #5b5140;
  font-size: 0.73rem;
  font-weight: 700;
}

.weapon-offers {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  max-height: none;
}

.shop-rotation-footer {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 2px solid #7b562c;
  border-radius: 9px;
  background: linear-gradient(#ffedb0, #f0ce7d);
  box-shadow: 0 3px 0 #8d6236;
  color: #533c24;
  font-size: 0.82rem;
  font-weight: 1000;
  text-align: center;
}

.shop-items-featured {
  max-height: min(34vh, 290px);
}

.shop-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 2px solid #41372b;
  border-radius: 11px;
  background: linear-gradient(150deg, #fff9e6, #ecd49a);
  box-shadow: 0 3px 0 #775332;
}

.shop-card-unavailable {
  border-style: dashed;
  background: linear-gradient(150deg, #e8e3d5, #d1c8b2);
}

.shop-card-improvement {
  border-color: #4f6846;
}

.shop-card-tier-2:not(.shop-card-unavailable) {
  border-color: #a8732e;
  background: linear-gradient(150deg, #fff3d1, #edc77c);
  box-shadow: 0 3px 0 #8f5c26;
}

.shop-card-tier-3:not(.shop-card-unavailable) {
  border-color: #8f4e2c;
  background: linear-gradient(150deg, #ffe2ad, #eda363);
  box-shadow: 0 3px 0 #713c29;
}

.locker-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 3px 5px 9px 3px;
}

.locker-boost-choice {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.locker-boost-choice select {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 2px solid #3c473d;
  border-radius: 8px;
  background: #fff9e6;
  color: #292d28;
  cursor: pointer;
  font: inherit;
}

.locker-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 12px;
  border: 2px dashed #906238;
  border-radius: 10px;
  color: #5b5140;
  font-weight: 700;
  text-align: center;
}

.locker-equip-button {
  min-height: 34px;
  padding: 5px 10px;
  border: 2px solid #344d3d;
  border-radius: 8px;
  background: linear-gradient(#e9f2c7, #b4cf85);
  color: #304332;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 900;
}

.locker-equip-button:disabled {
  background: #c4c0ad;
  color: #53534b;
  cursor: default;
}

.locker-recipe-card {
  border-color: #76528d;
  background: linear-gradient(150deg, #f5e5ff, #d6b8e9);
}

.craft-recipe-cost {
  margin: 0;
  color: #68427b;
  font-size: 0.73rem;
  font-weight: 900;
}

.locker-crafting-items {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: min(48vh, 420px);
}

.boost-use-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.player.boost-vitesse .hero-pixel-art {
  filter: drop-shadow(0 0 5px #7be8c5) drop-shadow(0 0 9px #fff7ce);
}

.player.boost-bouclier .hero-pixel-art {
  filter: drop-shadow(0 0 6px #78bfff) drop-shadow(0 0 11px #fff7ce);
}

.player.boost-puissance .hero-pixel-art {
  filter: drop-shadow(0 0 6px #ff914a) drop-shadow(0 0 11px #ffd36b);
}

.shop-preview {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #b8a174;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 110%, #d4b86f 0 40%, transparent 42%),
    linear-gradient(#e8edcf, #f7e9bd);
}

.shop-preview .character-preview {
  width: 68px;
  height: 68px;
}

.shop-preview .character-preview .hero-pixel-art {
  width: 48px;
  height: 58px;
}

.shop-item-icon {
  font-size: 2.7rem;
  line-height: 1;
  filter: drop-shadow(0 3px 1px #5b493466);
}

.shop-card h3 {
  margin: 0;
  color: #324d3d;
  font-size: 0.92rem;
  font-weight: 1000;
}

.shop-item-category {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #a65535;
  border-radius: 999px;
  background: #412a39;
  color: #ffbd72;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.locker-inventory-count {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed #c1683c;
  border-radius: 8px;
  color: #ffcb91;
  font-size: 0.78rem;
  font-weight: 900;
}

.shop-card p {
  min-height: 34px;
  margin: 0;
  color: #5b5140;
  font-size: 0.78rem;
  font-weight: 650;
}

.shop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  color: #755022;
  font-size: 0.8rem;
  font-weight: 900;
}

.shop-buy-button {
  min-height: 34px;
  padding: 5px 10px;
  background: linear-gradient(#ffdc65, #f3ae3e);
  color: #4b351e;
  font-size: 0.78rem;
}

.shop-buy-free {
  border-color: #4e6936;
  background: linear-gradient(#c8f18b, #76bd53);
  color: #253d24;
  box-shadow: 0 3px 0 #4e6936;
}

.shop-buy-button:disabled {
  border-color: #6b695e;
  background: #c4c0ad;
  box-shadow: 0 3px 0 #777468;
  color: #53534b;
  cursor: not-allowed;
}

.progression-feedback {
  min-height: 1.2em;
  margin: 14px 0 0;
  color: #693d24;
  font-size: 0.8rem;
  font-weight: 800;
}

.player.skin-feuillage .hero-pixel-art,
.character-preview.skin-feuillage .hero-pixel-art {
  filter: hue-rotate(38deg) saturate(0.85);
}

.player.skin-cendre .hero-pixel-art,
.character-preview.skin-cendre .hero-pixel-art {
  filter: grayscale(0.75) sepia(0.2) brightness(0.9);
}

.skin-momie .pixel-skin-momie {
  filter: drop-shadow(0 0 2px #f2dda1);
}

.skin-epouvantail .pixel-skin-epouvantail {
  filter: drop-shadow(0 0 2px #f4a64b);
}

.skin-fantome .pixel-skin-fantome {
  filter: drop-shadow(0 0 3px #9ff5f2);
}

.skin-demon .pixel-skin-demon {
  filter: drop-shadow(0 0 3px #ff5639);
}

.skin-squelette .pixel-skin-squelette {
  filter: drop-shadow(0 0 2px #e6d9b8);
}

.character-pisteur {
  --character-body-filter: hue-rotate(32deg) saturate(0.8);
  --character-pack-filter: hue-rotate(24deg);
}

.character-secouriste {
  --character-body-filter: hue-rotate(150deg) saturate(1.25);
  --character-pack-filter: brightness(1.35) saturate(0.75);
}

.character-sentinelle {
  --character-body-filter: hue-rotate(190deg) saturate(0.75) brightness(0.9);
  --character-pack-filter: grayscale(0.45) brightness(0.8);
}

.equipment-veste {
  --equipment-body-filter: saturate(0.72) brightness(0.88);
}

.equipment-bottes {
  --equipment-legs-filter: brightness(1.18) saturate(0.9);
}

.equipment-sac-renforce {
  --equipment-pack-filter: saturate(1.3) brightness(1.08);
}

@media (max-width: 820px) {
  .loadout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .menu-panel {
    padding: 16px;
    border-width: 3px;
    border-radius: 15px;
    max-height: calc(100% - 8px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .menu-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .menu-coins {
    justify-self: start;
  }

  .loadout-grid {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
  }

  .locker-items {
    grid-template-columns: 1fr;
  }

  .loadout-grid label {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
  }

  .loadout-grid select {
    min-height: 38px;
    font-size: 0.75rem;
  }

  .shop-items {
    grid-template-columns: 1fr;
    max-height: min(43vh, 340px);
  }

  .shop-card {
    padding: 9px 11px;
  }

  .shop-card p {
    min-height: 0;
  }
}

.game-over[hidden],
.round-message[hidden],
.wave-countdown[hidden] {
  display: none;
}

.front-menu {
  background:
    radial-gradient(ellipse at 50% 42%, #542744d9 0, #21142be8 57%, #100c17f5 100%),
    #160f20cc;
}

.menu-panel {
  border-color: #17111d;
  background:
    radial-gradient(ellipse at 94% 4%, #f48b3226 0 12%, transparent 13%),
    linear-gradient(145deg, #302039, #211928 68%, #19151f);
  box-shadow: 0 8px 0 #100d14, 0 14px 34px #09070dcc, inset 0 0 0 2px #f89c4933;
  color: #fff1dc;
}

.menu-panel::before,
.menu-panel::after {
  border-color: #261722;
  background: repeating-linear-gradient(135deg, #e66a2c 0 9px, #f5a444 9px 17px);
}

.menu-heading {
  border-bottom-color: #d56c35;
}

.menu-kicker {
  color: #ffad4f;
}

.menu-kicker::before {
  content: "🎃 ";
}

.player-name-field {
  color: #ffe7cc;
}

.menu-heading h1 {
  color: #fff1d4;
  text-shadow: 1px 2px 0 #1b1420, 2px 3px 0 #a84d2c;
}

.menu-description,
.shop-rotation-note,
.shop-category-note {
  color: #dfd0dd;
}

.player-name-field,
.locker-boost-choice {
  color: #ffe7cc;
}

.player-name-field input,
.locker-boost-choice select {
  border-color: #a65535;
  background: #211923;
  color: #fff1dc;
}

.loadout-preview {
  border-color: #c1683c;
  background: #100d1866;
  color: #fff1dc;
}

.loadout-preview:hover {
  background: #3d2938;
}

.locker-hint,
.shop-section-heading span {
  color: #ffad4f;
}

.menu-primary {
  background: linear-gradient(#ffad4f, #e65f27);
  color: #29171a;
}

.menu-secondary,
.locker-equip-button {
  border-color: #302039;
  background: linear-gradient(#9b6bb1, #684477);
  color: #fff3e8;
}

.shop-section-heading h2 {
  color: #fff1d4;
}

.shop-category-title,
.shop-category > h3 {
  color: #ffad4f;
}

.shop-card {
  border-color: #885238;
  background: linear-gradient(150deg, #483044, #302335);
  box-shadow: 0 3px 0 #17121d;
}

.shop-card-unavailable {
  background: linear-gradient(150deg, #322b36, #27212d);
}

.shop-card-tier-2:not(.shop-card-unavailable) {
  border-color: #df9140;
  background: linear-gradient(150deg, #55353a, #47303b);
  box-shadow: 0 3px 0 #9a532e;
}

.shop-card-tier-3:not(.shop-card-unavailable) {
  border-color: #ffad4f;
  background: linear-gradient(150deg, #6a3934, #55303a);
  box-shadow: 0 3px 0 #843c26;
}

.shop-card h3 {
  color: #ffcb91;
}

.shop-item-category {
  border-color: #df9140;
  background: #211923;
  color: #ffbd72;
}

.locker-inventory-count {
  border-color: #c1683c;
  color: #ffcb91;
}

.shop-card p {
  color: #eadce5;
}

.shop-card-footer {
  color: #ffd194;
}

.shop-rotation-footer {
  border-color: #9a532e;
  background: linear-gradient(#ffbf71, #e87935);
  box-shadow: 0 3px 0 #843c26;
  color: #32191a;
}

.locker-empty {
  border-color: #c1683c;
  color: #dfd0dd;
}

.locker-equip-button:disabled {
  background: #3c3540;
  color: #d0c3cf;
}

.menu-primary:focus-visible,
.menu-secondary:focus-visible,
.shop-buy-button:focus-visible,
.locker-equip-button:focus-visible,
.player-name-field input:focus-visible,
.locker-boost-choice select:focus-visible {
  outline-color: #ffad4f;
}

.game-over-title {
  margin: 0;
  padding: 0 20px;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 8px #0008;
}

.restart-button {
  padding: 11px 22px;
  border: 2px solid #252b30;
  border-radius: 8px;
  background: #f1bd56;
  box-shadow: 0 4px 0 #252b30;
  color: #252b30;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.restart-button:hover {
  background: #ffcf68;
}

.restart-button:active {
  box-shadow: 0 1px 0 #252b30;
  transform: translateY(3px);
}

.game-over-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}

.restart-button-secondary {
  border-color: #f0b571;
  background: linear-gradient(#86547d, #553851);
  box-shadow: 0 4px 0 #211725;
  color: #fff3e8;
}

.restart-button-secondary:hover {
  background: linear-gradient(#a26791, #684363);
}

.player {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 82px;
  transform: translate(-50%, -50%) scale(var(--actor-scale));
  will-change: left, top;
}

.player.is-invulnerable {
  filter: drop-shadow(0 0 7px #e5faff) drop-shadow(0 0 15px #77dbff);
}

.player.is-dodging.is-invulnerable {
  opacity: 0.68;
}

.player-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 98px;
  transform: translate(-50%, -50%) scale(0.82);
  transform-origin: center;
}

.player-art > :not(.health-bar):not(.hero-pixel-art) {
  display: none;
}

.hero-pixel-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  image-rendering: pixelated;
}

.pixel-equipment,
.pixel-weapon,
.pixel-skin {
  display: none;
}

.equipment-veste .pixel-equipment-veste,
.equipment-bottes .pixel-equipment-bottes,
.equipment-sac-renforce .pixel-equipment-sac-renforce,
.weapon-fronde .pixel-weapon.weapon-fronde,
.weapon-arbalete .pixel-weapon.weapon-arbalete,
.weapon-double-fronde .pixel-weapon.weapon-double-fronde,
.weapon-fusil-pompe .pixel-weapon.weapon-fusil-pompe,
.weapon-lance-clous .pixel-weapon.weapon-lance-clous,
.weapon-arc-long .pixel-weapon.weapon-arc-long,
.weapon-faux-spectrale .pixel-weapon.weapon-faux-spectrale,
.weapon-lance-bonbons .pixel-weapon.weapon-lance-bonbons,
.weapon-tir-chauve-souris .pixel-weapon.weapon-tir-chauve-souris,
.weapon-lanterne-ames .pixel-weapon.weapon-lanterne-ames,
.weapon-grimoire-maudit .pixel-weapon.weapon-grimoire-maudit,
.weapon-fouet-ronces .pixel-weapon.weapon-fouet-ronces {
  display: inline;
}

.skin-feuillage .pixel-skin-feuillage,
.skin-cendre .pixel-skin-cendre,
.skin-nomade .pixel-skin-nomade,
.skin-mecanicien .pixel-skin-mecanicien,
.skin-garde-forestier .pixel-skin-garde-forestier,
.skin-aventuriere .pixel-skin-aventuriere,
.skin-renard .pixel-skin-renard,
.skin-loup .pixel-skin-loup,
.skin-chevalier .pixel-skin-chevalier,
.skin-sorciere .pixel-skin-sorciere,
.skin-citrouille .pixel-skin-citrouille,
.skin-vampire .pixel-skin-vampire,
.skin-momie .pixel-skin-momie,
.skin-epouvantail .pixel-skin-epouvantail,
.skin-fantome .pixel-skin-fantome,
.skin-demon .pixel-skin-demon,
.skin-squelette .pixel-skin-squelette {
  display: inline;
}

.pixel-body {
  filter: var(--character-body-filter, none) var(--equipment-body-filter, none);
}

.pixel-backpack {
  filter: var(--character-pack-filter, none) var(--equipment-pack-filter, none);
}

.pixel-legs {
  filter: var(--equipment-legs-filter, none);
}

.player.is-moving .hero-pixel-art {
  animation: hero-pixel-bob 0.26s steps(2, end) infinite alternate;
}

.player.is-moving .pixel-legs {
  animation: hero-pixel-step 0.26s steps(2, end) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

.player.is-moving .pixel-arms {
  animation: hero-pixel-arms 0.26s steps(2, end) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

.player.is-moving .pixel-body {
  animation: hero-pixel-run 0.26s steps(2, end) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

.player.is-shooting .pixel-weapon {
  animation: hero-pixel-shot 0.24s steps(2, end);
  transform-box: fill-box;
  transform-origin: center;
}

.player.is-shooting.weapon-fronde .pixel-weapon {
  animation: weapon-sling-snap 0.24s ease-out;
}

.player.is-shooting.weapon-double-fronde .pixel-weapon {
  animation: weapon-double-snap 0.28s ease-in-out;
}

.player.is-shooting.weapon-arbalete .pixel-weapon {
  animation: weapon-bow-release 0.34s ease-out;
}

.player.is-shooting.weapon-arc-long .pixel-weapon {
  animation: weapon-moon-bow-release 0.46s ease-out;
}

.player.is-shooting.weapon-fusil-pompe .pixel-weapon {
  animation: weapon-recoil-heavy 0.32s ease-out;
}

.player.is-shooting.weapon-lance-clous .pixel-weapon {
  animation: weapon-recoil-rapid 0.18s steps(2, end);
}

.player.is-shooting.weapon-lance-bonbons .pixel-weapon {
  animation: weapon-candy-launch 0.27s ease-out;
}

.player.is-shooting.weapon-tir-chauve-souris .pixel-weapon {
  animation: weapon-bat-launch 0.4s ease-in-out;
}

.player.is-shooting.weapon-faux-spectrale .pixel-weapon {
  animation: weapon-scythe-sweep 0.42s ease-in-out;
}

.player.is-shooting.weapon-lanterne-ames .pixel-weapon {
  animation: weapon-lantern-swing 0.38s ease-out;
}

.player.is-shooting.weapon-grimoire-maudit .pixel-weapon {
  animation: weapon-grimoire-cast 0.35s ease-in-out;
}

.player.is-shooting.weapon-fouet-ronces .pixel-weapon {
  animation: weapon-thorn-whip 0.32s ease-in;
}

.player.is-dodging .hero-pixel-art {
  animation: hero-pixel-dodge 0.24s steps(3, end);
  filter: drop-shadow(0 0 5px #a8e5dc) drop-shadow(0 0 9px #fff7ce);
}

.player.is-dodging .pixel-backpack {
  animation: hero-pixel-dodge-pack 0.24s steps(2, end);
  transform-box: fill-box;
  transform-origin: center;
}

.player.is-dodging .pixel-legs,
.player.is-dodging .pixel-arms,
.player.is-dodging .pixel-body {
  animation: none;
}

.health-bar {
  position: absolute;
  z-index: 4;
  top: -11px;
  left: 15px;
  width: 52px;
  height: 9px;
  overflow: hidden;
  border: 2px solid #222831;
  border-radius: 4px;
  background: #fff;
  transform: translateY(-100%);
}

.health-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #72d66b;
}

.player-head {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 14px;
  width: 54px;
  height: 49px;
  border: 3px solid #252b30;
  border-radius: 43% 43% 46% 46%;
  background: #d89b70;
  box-shadow: inset 0 -5px #b97656;
}

.player-helmet {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 0;
  width: 51px;
  height: 27px;
  border: 3px solid #252b30;
  border-radius: 55% 48% 30% 30%;
  background: linear-gradient(110deg, #77856d 0 70%, #596650 70%);
}

.player-helmet::before {
  position: absolute;
  right: -6px;
  bottom: -5px;
  left: -4px;
  height: 7px;
  border: 2px solid #252b30;
  border-radius: 4px;
  background: #a8b09a;
  content: "";
}

.player-helmet::after {
  position: absolute;
  top: 5px;
  left: 19px;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: #e6a84f;
  content: "";
}

.player-face {
  position: absolute;
  top: 19px;
  left: 12px;
  display: flex;
  gap: 12px;
}

.player-face i {
  width: 8px;
  height: 5px;
  border: 1px solid #252b30;
  border-radius: 2px 2px 3px 3px;
  background: #d9e1d3;
}

.player-mask {
  position: absolute;
  top: 29px;
  left: 8px;
  width: 32px;
  height: 14px;
  border: 2px solid #252b30;
  border-radius: 4px 4px 9px 9px;
  background: #58675d;
}

.player-mask::after {
  position: absolute;
  top: 5px;
  left: 12px;
  width: 5px;
  height: 2px;
  border-radius: 2px;
  background: #bbc5b5;
  content: "";
}

.player-headset {
  position: absolute;
  top: 17px;
  right: -5px;
  width: 9px;
  height: 16px;
  border: 2px solid #252b30;
  border-radius: 3px;
  background: #d3a74e;
}

.player-body {
  position: absolute;
  z-index: 2;
  top: 51px;
  left: 18px;
  width: 46px;
  height: 40px;
  border: 3px solid #252b30;
  border-radius: 10px 10px 8px 8px;
  background: linear-gradient(90deg, #53634e 0 27%, #68765b 27% 73%, #53634e 73%);
  box-shadow: inset 0 -7px #414c40, 0 4px 0 #252b30;
}

.player-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 9px;
  height: 11px;
  border: 2px solid #e3ae50;
  border-radius: 2px 2px 5px 5px;
  background: #313a36;
}

.player-strap {
  position: absolute;
  top: -1px;
  left: 20px;
  width: 5px;
  height: 34px;
  border-right: 1px solid #252b30;
  border-left: 1px solid #252b30;
  background: #a1a48a;
  transform: rotate(-12deg);
}

.player-pouch {
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 11px;
  height: 13px;
  border: 2px solid #252b30;
  border-radius: 3px;
  background: #9a8557;
}

.player-arm {
  position: absolute;
  z-index: 1;
  top: 56px;
  width: 16px;
  height: 27px;
  border: 3px solid #252b30;
  border-radius: 7px;
  background: #69765b;
  transform-origin: 50% 0;
}

.player-arm-left {
  left: 8px;
  transform: rotate(22deg);
}

.player-arm-right {
  right: 8px;
  transform: rotate(-22deg);
}

.player-arm::after {
  position: absolute;
  right: -2px;
  bottom: -5px;
  left: -2px;
  height: 8px;
  border: 2px solid #252b30;
  border-radius: 3px;
  background: #343d3b;
  content: "";
}

.player-slingshot {
  position: absolute;
  z-index: 4;
  top: 51px;
  left: 48px;
  width: 32px;
  height: 42px;
  transform-origin: 50% 55%;
}

.slingshot-grip {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 12px;
  width: 9px;
  height: 27px;
  border: 2px solid #263342;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, #d58a4c, #f0b05d 55%, #a95e3e);
}

.slingshot-fork {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 7px;
  height: 21px;
  border: 2px solid #263342;
  border-radius: 5px;
  background: linear-gradient(90deg, #bd7445, #e7a553);
}

.slingshot-fork-left {
  position: absolute;
  left: 5px;
  transform: rotate(-28deg);
}

.slingshot-fork-right {
  position: absolute;
  right: 5px;
  transform: rotate(28deg);
}

.slingshot-band {
  position: absolute;
  z-index: 3;
  top: 8px;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #78d4dc;
  transform-origin: top center;
}

.slingshot-band-left {
  left: 9px;
  transform: rotate(27deg);
}

.slingshot-band-right {
  right: 9px;
  transform: rotate(-27deg);
}

.slingshot-pouch {
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 12px;
  width: 9px;
  height: 6px;
  border: 2px solid #263342;
  border-radius: 50%;
  background: #f1c35c;
}

.player-hand {
  position: absolute;
  z-index: 5;
  width: 12px;
  height: 11px;
  border: 2px solid #252b30;
  border-radius: 5px 5px 4px 4px;
  background: #c99a67;
  box-shadow: inset 0 -3px #9c704e;
}

.player-hand-left {
  top: 10px;
  left: 0;
  transform: rotate(-24deg);
}

.player-hand-right {
  top: 22px;
  left: 12px;
  transform: rotate(14deg);
}

.player-leg {
  position: absolute;
  z-index: 3;
  top: 79px;
  width: 17px;
  height: 16px;
  border: 3px solid #252b30;
  border-radius: 4px 4px 5px 5px;
  background: #454d48;
  transform-origin: 50% 0;
}

.player-leg-left {
  left: 22px;
  transform: rotate(10deg);
}

.player-leg-right {
  right: 22px;
  transform: rotate(-10deg);
}

.player-leg::after {
  position: absolute;
  right: -4px;
  bottom: -5px;
  left: -4px;
  height: 6px;
  border: 2px solid #252b30;
  border-radius: 3px 5px 3px 3px;
  background: #b17743;
  content: "";
}

.player.is-moving .player-art .player-head {
  animation: head-bob 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-body {
  animation: body-bob 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-arm-left {
  animation: arm-left-swing 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-arm-right {
  animation: arm-right-swing 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-leg-left {
  animation: leg-left-step 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-leg-right {
  animation: leg-right-step 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .player-slingshot {
  animation: slingshot-sway 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .slingshot-band-left {
  animation: band-sway-left 0.36s ease-in-out infinite alternate;
}

.player.is-moving .player-art .slingshot-band-right {
  animation: band-sway-right 0.36s ease-in-out infinite alternate;
}

.player.is-shooting .player-art .player-slingshot {
  animation: slingshot-release 0.24s ease-out;
}

.player.is-shooting .player-art .slingshot-band-left {
  animation: band-release-left 0.24s ease-out;
}

.player.is-shooting .player-art .slingshot-band-right {
  animation: band-release-right 0.24s ease-out;
}

.player.is-shooting .player-art .player-arm-left {
  animation: shooting-arm-left 0.24s ease-out;
}

.player.is-shooting .player-art .player-arm-right {
  animation: shooting-arm-right 0.24s ease-out;
}

.player.is-shooting .player-art .player-hand-left {
  animation: shooting-hand-left 0.24s ease-out;
}

.player.is-shooting .player-art .player-hand-right {
  animation: shooting-hand-right 0.24s ease-out;
}

.enemy {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 2px solid #57301e;
  border-radius: 46% 46% 43% 43%;
  background:
    radial-gradient(ellipse at 31% 26%, #ffd47b 0, #ffbd56 12%, transparent 34%),
    radial-gradient(ellipse at 73% 64%, #743322 0 5%, transparent 13%),
    repeating-linear-gradient(90deg, #a94726 0 10%, #ef8937 18% 31%, #cb5e29 39% 47%, #f3a044 52%);
  box-shadow: inset 0 -5px 0 #87351f, inset 3px 0 3px #ffd07699, inset -3px 2px 4px #55241e88, 0 2px 0 #302321, 0 0 9px #ef623d77;
  transform: translate(-50%, -50%) scale(var(--actor-scale));
  pointer-events: none;
}

.enemy:not(.enemy-boss):not(.enemy-hit):not(.enemy-attacking) {
  animation: enemy-walk 0.62s steps(2, end) infinite alternate;
}

.enemy-minion {
  border-color: #6b4b8e;
  filter: hue-rotate(35deg);
}

.enemy-attacking {
  animation: enemy-attack 0.28s steps(2, end);
}

.enemy-armor,
.enemy-scar {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.enemy-armor {
  right: 2%;
  bottom: 18%;
  width: 28%;
  height: 29%;
  border: 1px solid #352922;
  background: linear-gradient(135deg, #76634a 0 38%, #302f2b 40% 55%, #9c6337 57% 72%, #45413a 75%);
  clip-path: polygon(18% 0, 100% 14%, 83% 100%, 0 78%);
  box-shadow: 0 0 2px #171817;
}

.enemy-armor-dagger {
  right: 0;
  bottom: 21%;
  width: 34%;
  height: 33%;
  background: linear-gradient(135deg, #4b5147 0 28%, #81806a 31% 45%, #3b3832 48% 58%, #a65b32 61%);
  clip-path: polygon(10% 0, 100% 12%, 88% 80%, 58% 100%, 0 72%);
}

.enemy-armor-club {
  right: -2%;
  bottom: 17%;
  width: 40%;
  height: 35%;
  border-width: 2px;
  background: repeating-linear-gradient(135deg, #302e2a 0 3px, #70604a 3px 6px, #9c653b 6px 8px);
  clip-path: polygon(0 13%, 100% 0, 83% 100%, 18% 79%);
}

.enemy-armor-crown {
  right: -3%;
  bottom: 17%;
  width: 41%;
  height: 38%;
  border-width: 2px;
  background: repeating-linear-gradient(135deg, #47312d 0 4px, #886044 4px 7px, #413a36 7px 10px);
  clip-path: polygon(8% 0, 100% 12%, 82% 100%, 0 72%);
}

.enemy-armor-gardien {
  right: -7%;
  bottom: 12%;
  width: 48%;
  height: 47%;
  border: 2px solid #292e32;
  background:
    linear-gradient(90deg, transparent 43%, #d0aa63 44% 51%, transparent 52%),
    repeating-linear-gradient(0deg, #4b6259 0 4px, #9d9a70 4px 6px, #343b37 6px 9px);
  clip-path: polygon(9% 0, 100% 12%, 85% 100%, 0 73%);
  box-shadow: 0 0 0 1px #d5bd81, 1px 2px 0 #171a19;
}

.enemy-armor-chasseur {
  right: -8%;
  bottom: 14%;
  width: 42%;
  height: 45%;
  border: 2px solid #27372e;
  background:
    linear-gradient(130deg, transparent 40%, #b98a4e 42% 48%, transparent 50%),
    repeating-linear-gradient(0deg, #34564a 0 5px, #8a8b61 5px 7px, #263b34 7px 10px);
  clip-path: polygon(16% 0, 100% 20%, 69% 100%, 0 75%);
  box-shadow: 1px 2px 0 #141d1b, 0 0 5px #77e6cc77;
}

.enemy-armor-colosse {
  right: -10%;
  bottom: 10%;
  width: 50%;
  height: 52%;
  border: 2px solid #3a2423;
  background:
    linear-gradient(90deg, transparent 44%, #dfae58 45% 53%, transparent 54%),
    repeating-linear-gradient(0deg, #693b30 0 5px, #bd7540 5px 8px, #492a28 8px 12px);
  clip-path: polygon(12% 0, 100% 10%, 88% 100%, 0 80%);
  box-shadow: 0 0 0 1px #e3ad5d, 2px 3px 0 #201817, 0 0 7px #ff794777;
}

.enemy-scar {
  top: 61%;
  left: 17%;
  width: 24%;
  height: 7%;
  background: #69251f;
  box-shadow: 1px 1px 0 #f29a4777;
  transform: rotate(-24deg);
}

.enemy-scar::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 70%;
  height: 1px;
  background: #ffc26a;
  content: "";
}

.enemy-hat,
.enemy-weapon {
  position: absolute;
  z-index: 3;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.enemy-hat-cap {
  top: -11%;
  left: 18%;
  width: 64%;
  height: 20%;
  border: 1px solid #463322;
  background: linear-gradient(#587442 0 48%, #879348 48% 72%, #49331f 72%);
  clip-path: polygon(24% 0, 70% 0, 82% 50%, 100% 65%, 85% 84%, 12% 84%, 0 68%, 20% 50%);
}

.enemy-hat-club {
  top: -14%;
  left: 21%;
  width: 58%;
  height: 24%;
  background: #5b3122;
}

.enemy-hat-club::before,
.enemy-hat-club::after {
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
  background: #7d4328;
  content: "";
}

.enemy-hat-club::before {
  left: -16%;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.enemy-hat-club::after {
  right: -16%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.enemy-hat-crown {
  top: -18%;
  left: 20%;
  width: 60%;
  height: 26%;
  border: 1px solid #49251e;
  background: linear-gradient(#f5d16b 0 30%, #bd7430 30% 100%);
  clip-path: polygon(0 100%, 8% 0, 34% 48%, 50% 0, 67% 48%, 94% 0, 100% 100%);
}

.enemy-hat-gardien {
  top: -18%;
  left: 15%;
  width: 70%;
  height: 31%;
  border: 2px solid #27312e;
  background:
    linear-gradient(90deg, transparent 44%, #d5b868 46% 53%, transparent 55%),
    linear-gradient(#a3a080 0 30%, #59645a 31% 75%, #353b36 76%);
  clip-path: polygon(13% 0, 87% 0, 100% 28%, 91% 100%, 9% 100%, 0 28%);
  box-shadow: 0 0 0 1px #d5bd81;
}

.enemy-hat-chasseur {
  top: -23%;
  left: 8%;
  width: 84%;
  height: 41%;
  background: transparent;
}

.enemy-hat-chasseur::before,
.enemy-hat-chasseur::after {
  position: absolute;
  top: 4%;
  width: 39%;
  height: 96%;
  border: 2px solid #2c251f;
  background: linear-gradient(90deg, #e4c878, #f1e1a8 45%, #8a6940 72%, #382821);
  content: "";
}

.enemy-hat-chasseur::before {
  left: 0;
  clip-path: polygon(0 100%, 19% 43%, 11% 47%, 49% 0, 45% 55%, 100% 12%, 68% 100%);
  transform: rotate(-12deg);
}

.enemy-hat-chasseur::after {
  right: 0;
  clip-path: polygon(32% 100%, 0 12%, 55% 55%, 51% 0, 89% 47%, 81% 43%, 100% 100%);
  transform: rotate(12deg);
}

.enemy-hat-colosse {
  top: -23%;
  left: 11%;
  width: 78%;
  height: 37%;
  border: 2px solid #352323;
  background: linear-gradient(#f4c862 0 28%, #b94d31 29% 76%, #592a27 77%);
  clip-path: polygon(0 100%, 6% 18%, 28% 49%, 38% 0, 51% 43%, 68% 0, 79% 48%, 95% 11%, 100% 100%);
  box-shadow: 0 0 5px #ffc660;
}

.enemy-hat-colosse::before {
  position: absolute;
  right: 38%;
  bottom: 4%;
  width: 24%;
  height: 36%;
  background: #fff0ae;
  content: "";
}

.enemy-boss .enemy-hat::before,
.enemy-boss .enemy-hat::after {
  filter: drop-shadow(1px 2px 0 #241b18);
}

.enemy-weapon-dagger {
  top: 37%;
  right: -19%;
  width: 12%;
  height: 48%;
  border: 1px solid #493c34;
  background: linear-gradient(90deg, #969a83 0 28%, #e2e4c8 28% 72%, #73776a 72%);
  clip-path: polygon(50% 0, 100% 68%, 65% 68%, 65% 100%, 35% 100%, 35% 68%, 0 68%);
  transform: rotate(-28deg);
}

.enemy-weapon-club {
  top: 39%;
  right: -18%;
  width: 19%;
  height: 48%;
  border: 1px solid #42281c;
  border-radius: 2px;
  background: linear-gradient(90deg, #61351f 0 35%, #9d5b2d 35% 70%, #58311f 70%);
  transform: rotate(-28deg);
}

.enemy-weapon-club::before {
  position: absolute;
  top: -17%;
  left: -42%;
  width: 175%;
  height: 33%;
  border: 1px solid #49271b;
  background: linear-gradient(#b5753b, #774126);
  content: "";
}

.enemy-weapon-crown {
  top: 42%;
  right: -20%;
  width: 14%;
  height: 38%;
  border: 1px solid #49251e;
  background: linear-gradient(90deg, #8f3428 0 28%, #e2b95d 28% 72%, #8f3428 72%);
  transform: rotate(-35deg);
}

.enemy-weapon-gardien {
  top: 38%;
  right: -17%;
  width: 29%;
  height: 43%;
  border: 2px solid #282d2c;
  background: repeating-linear-gradient(0deg, #3b4d47 0 4px, #8f9475 4px 7px, #d5bb74 7px 9px);
  clip-path: polygon(18% 0, 82% 0, 100% 22%, 76% 85%, 50% 100%, 24% 85%, 0 22%);
  box-shadow: 0 0 0 1px #c5ae75;
}

.enemy-weapon-chasseur {
  top: 20%;
  right: -14%;
  width: 12%;
  height: 68%;
  border: 1px solid #322c25;
  background: linear-gradient(90deg, #573923 0 30%, #b9864d 31% 62%, #403027 63%);
  transform: rotate(-24deg);
}

.enemy-weapon-chasseur::before {
  position: absolute;
  top: -2%;
  left: -95%;
  width: 280%;
  height: 24%;
  border: 1px solid #44342c;
  background: linear-gradient(90deg, #6a5238, #e7d8a9 48%, #766043);
  clip-path: polygon(0 50%, 100% 0, 83% 55%, 100% 100%);
  content: "";
}

.enemy-weapon-colosse {
  top: 27%;
  right: -24%;
  width: 22%;
  height: 56%;
  border: 2px solid #392421;
  background: linear-gradient(90deg, #402a26 0 25%, #9a5434 26% 66%, #432622 67%);
  transform: rotate(-30deg);
}

.enemy-weapon-colosse::before {
  position: absolute;
  top: -13%;
  left: -60%;
  width: 205%;
  height: 42%;
  border: 2px solid #3c2421;
  background:
    linear-gradient(90deg, transparent 43%, #f0c867 44% 54%, transparent 55%),
    linear-gradient(#dc7441, #71342c);
  clip-path: polygon(12% 0, 88% 0, 100% 80%, 70% 100%, 50% 78%, 30% 100%, 0 80%);
  box-shadow: 0 0 5px #ff9a4a;
  content: "";
}

.enemy-health {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 34px;
  height: 7px;
  overflow: hidden;
  border: 1px solid #332d35;
  border-radius: 4px;
  background: #fff;
  transform: translateX(-50%);
}

.enemy-health-fill {
  display: block;
  height: 100%;
  background: #58c76a;
  transition: width 0.12s ease;
}

.enemy-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  color: #332d35;
  font-size: 8px;
  font-weight: 800;
  text-shadow: 0 1px #fff;
  transform: translateX(-50%);
  white-space: nowrap;
}

.enemy-scout {
  border-color: #4d3820;
  filter: hue-rotate(-10deg) saturate(1.12);
}

.enemy-brute {
  border-width: 3px;
  border-color: #57301e;
  background:
    radial-gradient(ellipse at 32% 27%, #ffcb68 0, #f3a13d 14%, transparent 38%),
    repeating-linear-gradient(90deg, #a94421 0 12%, #df7630 19% 34%, #bd5326 43% 50%);
  box-shadow: inset 0 -7px 0 #81351f, inset 3px 0 4px #ffc76699, 0 3px 0 #42271e, 0 0 10px #e9843266;
}

.enemy-boss {
  border-width: 4px;
  border-color: #492522;
  background:
    radial-gradient(ellipse at 32% 27%, #ffe08b 0, #ffb94d 14%, transparent 38%),
    repeating-linear-gradient(90deg, #a84325 0 12%, #eb8334 19% 34%, #c75829 43% 50%);
  box-shadow: inset 0 -10px #80301f, inset 5px 0 6px #ffd47a99, 0 4px 0 #3f211d, 0 0 18px #f05c6e99;
  animation: boss-float 1.2s ease-in-out infinite alternate;
}

.enemy-boss .enemy-eye {
  top: 34%;
  height: 22%;
  background: #f4ff9a;
  filter: drop-shadow(0 0 4px #fff27b) drop-shadow(0 0 8px #ff493c);
}

.enemy-boss .enemy-mouth {
  bottom: 13%;
  height: 27%;
  border: 2px solid #331b19;
  background: repeating-linear-gradient(90deg, #261a19 0 14%, #fff0c8 16% 27%, #452321 29% 41%);
}

.enemy-boss .enemy-scar {
  background: #48201f;
  box-shadow: 1px 1px 0 #ffe08b, 0 0 4px #ff784d;
}

.enemy-boss-gardien {
  border-color: #282f2c;
  background:
    radial-gradient(ellipse at 31% 26%, #d7d8a0 0, #99a36a 12%, transparent 34%),
    repeating-linear-gradient(90deg, #53655b 0 10%, #a27b43 18% 23%, #424d46 31% 47%);
  box-shadow: inset 0 -10px #36423c, inset 5px 0 6px #ffd47a99, 0 4px 0 #252622, 0 0 8px #d7c281, 0 0 22px #9b7dffbb;
}

.enemy-boss-chasseur {
  border-color: #283b32;
  background:
    radial-gradient(ellipse at 31% 26%, #c7dc82 0, #83a34c 12%, transparent 34%),
    repeating-linear-gradient(90deg, #345b48 0 10%, #b0763c 18% 23%, #294338 31% 47%);
  box-shadow: inset 0 -10px #254134, inset 5px 0 6px #d4ed8877, 0 4px 0 #1e2d26, 0 0 9px #95e4a0, 0 0 24px #42d8e8bb;
}

.enemy-boss-colosse {
  border-color: #49231f;
  background:
    radial-gradient(ellipse at 31% 26%, #ffda82 0, #f7a849 12%, transparent 34%),
    repeating-linear-gradient(90deg, #8e3927 0 10%, #e17b38 18% 25%, #6c2b25 33% 48%);
  box-shadow: inset 0 -12px #632522, inset 5px 0 6px #ffd47a99, 0 5px 0 #2e1b1a, 0 0 10px #ffc45b, 0 0 28px #ff503dcc;
}

.enemy-boss-mega-cauchemar {
  border-color: #190c20;
  background:
    radial-gradient(ellipse at 33% 25%, #f0c3ff 0, #8b347f 12%, transparent 34%),
    repeating-linear-gradient(90deg, #241428 0 10%, #6a245e 18% 25%, #180f24 33% 48%);
  box-shadow: inset 0 -20px #160d20, inset 7px 0 8px #ff92d355, 0 8px 0 #09080f, 0 0 20px #d43b9d, 0 0 48px #8225c9;
}

.enemy-boss-mega-cauchemar .enemy-eye {
  background: #ff3b72;
  filter: drop-shadow(0 0 8px #ff174f) drop-shadow(0 0 18px #d500ff);
}

.enemy-boss-mega-cauchemar .enemy-mouth {
  background: repeating-linear-gradient(90deg, #100b18 0 14%, #f5d5ff 16% 27%, #231127 29% 41%);
}

.enemy-boss-mega-cauchemar::before {
  top: -23%;
  height: 34%;
  border-color: #291529;
  background: linear-gradient(90deg, #220d2d, #c54a83 48%, #220d2d);
  clip-path: polygon(0 100%, 16% 15%, 33% 100%, 50% 0, 67% 100%, 84% 15%, 100% 100%);
}

.enemy-boss-mega-cauchemar::after {
  top: 8%;
  left: 12%;
  width: 76%;
  height: 13%;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, #ff3b72, #f5d5ff, #ff3b72);
  box-shadow: 0 0 12px #ff3b72;
}

.enemy-mega-slam {
  animation: mega-boss-slam 0.72s ease-in-out;
}

.enemy-boss-charging {
  animation: boss-charge 0.3s ease-in-out infinite alternate;
}

.enemy-boss-mega-cauchemar.boss-state-appearing {
  animation: boss-appear 0.95s ease-out both;
}

.enemy-boss-mega-cauchemar.boss-state-idle {
  animation: boss-float 1s ease-in-out infinite alternate;
}

.enemy-boss-mega-cauchemar.boss-state-attacking-light,
.enemy-boss-mega-cauchemar.boss-state-attacking-heavy {
  animation: boss-attack-windup 0.24s ease-in-out infinite alternate;
}

.enemy-boss-mega-cauchemar.boss-state-transition,
.enemy-boss-mega-cauchemar.enemy-boss-phase-transition {
  animation: boss-phase-transition 1.05s ease-in-out;
}

.enemy-boss-mega-cauchemar.boss-state-defeated {
  animation: boss-defeat 0.65s ease-in forwards;
  pointer-events: none;
}

.enemy-boss-mega-cauchemar[data-phase="2"] {
  filter: drop-shadow(0 0 12px #ff733e);
}

.enemy-boss-mega-cauchemar[data-phase="3"] {
  filter: drop-shadow(0 0 17px #ff174f) drop-shadow(0 0 30px #d500ff);
}

.enemy-boss .enemy-health {
  width: 70px;
  height: 9px;
  border-width: 2px;
}

.enemy-boss-mega-cauchemar .enemy-health {
  width: 108px;
  height: 12px;
}

.enemy-boss .enemy-label {
  top: calc(100% + 6px);
  padding: 1px 4px;
  border: 1px solid #392722;
  border-radius: 3px;
  background: #171a18dd;
  color: #ffe2a1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000, 0 0 5px #ef854b;
}

.enemy-boss .enemy-hat-crown {
  filter: drop-shadow(0 0 2px #f7d875);
}

.enemy-hit {
  animation: enemy-flash 0.12s ease-out;
}

.player-hurt {
  animation: player-flash 0.22s ease-out;
}

.enemy::before {
  position: absolute;
  z-index: 1;
  top: -14%;
  left: 39%;
  width: 22%;
  height: 27%;
  border: 1px solid #57301e;
  border-radius: 45% 45% 25% 25%;
  background: linear-gradient(90deg, #476a37, #91a447 48%, #526638);
  box-shadow: 0 1px 0 #30261b;
  transform: rotate(-7deg);
  content: "";
}

.enemy::after {
  position: absolute;
  top: 2%;
  left: 57%;
  width: 24%;
  height: 15%;
  border: 1px solid #48633b;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #9bab4d, #486a39);
  transform: rotate(-24deg);
  content: "";
}

.enemy-boss::before {
  top: -15%;
  border-color: #50301e;
}

.enemy-boss-gardien::before {
  background: linear-gradient(90deg, #56603a, #a5a34c 48%, #56603a);
}

.enemy-boss-chasseur::before {
  background: linear-gradient(90deg, #35634b, #99b75b 48%, #35634b);
}

.enemy-boss-colosse::before {
  background: linear-gradient(90deg, #7c3b24, #e2a143 48%, #7c3b24);
}

.enemy-eye {
  position: absolute;
  z-index: 2;
  top: 35%;
  left: 25%;
  width: 50%;
  height: 19%;
  background: #d6ff5b;
  filter: drop-shadow(0 0 3px #ceff52) drop-shadow(0 0 5px #ff542e);
  clip-path: polygon(0 0, 43% 17%, 50% 100%, 8% 82%, 100% 0, 58% 17%, 50% 100%, 92% 82%);
}

.enemy-mouth {
  position: absolute;
  z-index: 2;
  bottom: 16%;
  left: 29%;
  width: 42%;
  height: 24%;
  border: 1px solid #51271e;
  border-radius: 0 0 40% 40%;
  background: repeating-linear-gradient(90deg, #271b1a 0 20%, #e7d7ad 22% 31%, #39201d 34% 50%);
  clip-path: polygon(0 0, 23% 20%, 36% 0, 50% 25%, 64% 0, 78% 20%, 100% 0, 88% 100%, 70% 70%, 55% 100%, 40% 70%, 24% 100%, 10% 67%);
}

.weapon-pickup {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 3px solid #384234;
  border-radius: 9px;
  background: #a8e88b;
  box-shadow: 0 3px 0 #384234, 0 0 14px #a8e88b99;
  color: #315b37;
  font-size: 18px;
  font-weight: 900;
  transform: translate(-50%, -50%) scale(var(--world-scale));
  animation: pickup-float 0.65s ease-in-out infinite alternate;
  pointer-events: none;
}

.weapon-pickup-puissante {
  width: 36px;
  height: 36px;
  border-color: #68430c;
  background: #ffd45d;
  box-shadow: 0 4px 0 #68430c, 0 0 22px #ffcd3e;
  color: #995412;
  font-size: 24px;
}

.weapon-pickup-rarity-violette {
  border-color: #542a88;
  background: #d8aaff;
  box-shadow: 0 4px 0 #38204f, 0 0 20px #b965ff;
  color: #40215c;
}

.weapon-pickup-rarity-orange {
  width: 34px;
  height: 34px;
  border-color: #914314;
  background: #ffc17c;
  box-shadow: 0 4px 0 #53290f, 0 0 22px #ff8c35;
  color: #73300e;
}

.rarity-label.rarity-violette { color: #9e54d7; }
.rarity-label.rarity-orange { color: #bd5a1c; }
.rarity-label.rarity-doree { color: #a2760b; }

.shop-card-rarity.rarity-violette { border-color: #b67be0; }
.shop-card-rarity.rarity-orange { border-color: #ef9a5b; }
.shop-card-rarity.rarity-doree { border-color: #d9b53e; }

.mega-shockwave {
  position: absolute;
  z-index: 3;
  width: 300px;
  height: 300px;
  border: 8px solid #ed4bb4;
  border-radius: 50%;
  background: radial-gradient(circle, #b52a8a44 0 38%, transparent 70%);
  box-shadow: 0 0 28px #fa48d6, inset 0 0 22px #f4a4ff;
  transform: translate(-50%, -50%) scale(0.1);
  animation: mega-shockwave 0.82s ease-out forwards;
  pointer-events: none;
}

.throne-sweep {
  width: 220px;
  height: 120px;
  border-color: #ff9b45;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ff6b254d 0 35%, transparent 72%);
  box-shadow: 0 0 28px #ff6b25, inset 0 0 22px #ffe17c;
}

.boss-attack-warning,
.enemy-attack-warning {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: boss-warning-pulse 0.32s ease-in-out infinite alternate;
  pointer-events: none;
}

.boss-attack-warning {
  border: 3px dashed #ff577e;
  background: radial-gradient(circle, #ff315b20 0 45%, #ff315b05 70%, transparent 72%);
  box-shadow: 0 0 14px #ff315b88, inset 0 0 15px #ff315b66;
}

.enemy-attack-warning {
  border: 3px dashed #ffad57;
  background: radial-gradient(circle, #ff9c3020 0 45%, #ff9c3005 70%, transparent 72%);
  box-shadow: 0 0 14px #ff8c3888, inset 0 0 15px #ff9c3066;
}

.enemy-attack-warning-lunge {
  border-color: #ec8dff;
  background: radial-gradient(circle, #d85bff22 0 45%, #d85bff05 70%, transparent 72%);
  box-shadow: 0 0 14px #d85bff88, inset 0 0 15px #d85bff66;
}

.enemy-attack-warning-projectile {
  border-color: #9deaff;
  background: radial-gradient(circle, #67dfff24 0 45%, #67dfff05 70%, transparent 72%);
  box-shadow: 0 0 14px #67dfff88, inset 0 0 15px #67dfff66;
}

.enemy-winding-up .enemy-head,
.enemy-winding-up .enemy-weapon,
.enemy-winding-up .enemy-eye {
  filter: brightness(1.8) drop-shadow(0 0 5px #ff9d4e);
}

.enemy-attack-slash,
.enemy-attack-slam {
  position: absolute;
  z-index: 4;
  width: 72px;
  height: 32px;
  border: 4px solid #e7b5ff;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f5c7ff66, #a84be033 65%, transparent 72%);
  box-shadow: 0 0 15px #bc53eb;
  transform: translate(-50%, -50%) rotate(-24deg);
  animation: enemy-slash 0.38s ease-out forwards;
  pointer-events: none;
}

.enemy-attack-slam {
  width: 80px;
  height: 80px;
  border: 5px solid #ffb34d;
  background: radial-gradient(circle, #ff9d3633 0 44%, transparent 72%);
  box-shadow: 0 0 18px #ff7138;
  transform: translate(-50%, -50%) scale(0.25);
  animation: enemy-slam 0.5s ease-out forwards;
}

@keyframes enemy-slash {
  from { opacity: 0.9; scale: 0.45; }
  to { opacity: 0; scale: 1.35; }
}

@keyframes enemy-slam {
  from { opacity: 0.95; scale: 0.2; }
  to { opacity: 0; scale: 1.25; }
}

.boss-projectile {
  position: absolute;
  z-index: 5;
  width: 24px;
  height: 24px;
  border: 3px solid #ffd5fd;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #fa62dc 28%, #7123a5 68%, #1e102d 74%);
  box-shadow: 0 0 10px #ff77ef, 0 0 24px #bc39e9;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loot-pickup {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid #38291e;
  border-radius: 50%;
  box-shadow: 0 2px 0 #28221e, 0 0 10px #fff3b677;
  font-size: 16px;
  font-weight: 1000;
  transform: translate(-50%, -50%) scale(var(--world-scale));
  animation: pickup-float 0.55s ease-in-out infinite alternate;
  pointer-events: none;
}

.loot-coin {
  width: 26px;
  height: 26px;
  border: 2px solid #6a3d0c;
  background:
    radial-gradient(circle at 32% 28%, #fff4c4 0 12%, transparent 13%),
    radial-gradient(circle, #f0c14b 0 46%, #c4842a 62%, #7a4a10 78%, #4a2a08 100%);
  box-shadow: 0 2px 0 #2a1606, inset 0 0 0 2px #ffe7a2, inset 0 -3px 0 #8a5414;
  color: transparent;
}

.loot-coin::before {
  width: 9px;
  height: 8px;
  background: #6b2c08;
  clip-path: polygon(18% 38%, 50% 8%, 82% 38%, 70% 38%, 70% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 30% 58%, 30% 38%);
  content: "";
  filter: drop-shadow(0 0 0 #3a1404);
}

.loot-health {
  width: 16px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.loot-health::before {
  position: absolute;
  left: 2px;
  width: 12px;
  height: 28px;
  background:
    linear-gradient(#4a2a16, #2a160c) 3px 0 / 6px 4px no-repeat,
    linear-gradient(#d7b48a, #8d623c) 4px 4px / 4px 3px no-repeat,
    linear-gradient(#f3e2c4, #c9aa86 40%, #a78462) 0 8px / 12px 20px no-repeat;
  border-radius: 2px;
  box-shadow: 1px 2px 0 #1a0e08;
  content: "";
}

.loot-health::after {
  position: absolute;
  left: 4px;
  top: 16px;
  width: 8px;
  height: 10px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#ff6a62, #9d1518 70%, #5c0c10);
  box-shadow: inset 2px 0 0 #ffd0c8aa;
  content: "";
}

.stone {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  border: 2px solid #3a342d;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #e7d3a7, #927b59 72%);
  box-shadow: 1px 2px 2px #0003;
  pointer-events: none;
}

.fog {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: radial-gradient(
    circle at var(--fog-x) var(--fog-y),
    transparent 0,
    rgb(8 9 18 / 0.08) var(--fog-radius),
    rgb(8 9 18 / 0.65) calc(var(--fog-radius) + 110px),
    rgb(8 9 18 / 0.88) calc(var(--fog-radius) + 280px)
  );
  pointer-events: none;
  transition: background 0.5s ease;
}

.impact-burst {
  position: absolute;
  z-index: 3;
  width: 54px;
  height: 54px;
  border: 4px solid #e77737;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4a8 0 20%, #ffb63f 22% 52%, #f16c39 55% 70%, transparent 73%);
  filter: drop-shadow(0 0 8px #ff9a3b99);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: impact-pop 0.42s ease-out forwards;
}

.impact-burst.impact-candy {
  border-color: #ffb1d4;
  background: radial-gradient(circle, #fff 0 18%, #ffadd4 22% 52%, #dc4f92 55% 70%, transparent 73%);
  filter: drop-shadow(0 0 9px #ff6cae);
}

.impact-burst.impact-bat {
  border-color: #d4a0ff;
  background: radial-gradient(circle, #fff 0 15%, #c18cff 22% 52%, #663c9a 55% 70%, transparent 73%);
  filter: drop-shadow(0 0 10px #ae62ff);
}

.impact-burst.impact-lance-clous {
  border-color: #b9f7ff;
  background: radial-gradient(circle, #fff 0 15%, #92e5f0 22% 52%, #4e82ad 55% 70%, transparent 73%);
  filter: drop-shadow(0 0 8px #88efff);
}

.impact-burst.impact-fusil-pompe {
  border-color: #ffd56c;
  background: radial-gradient(circle, #fff4a8 0 20%, #ffb63f 22% 52%, #e04423 55% 70%, transparent 73%);
  filter: drop-shadow(0 0 9px #ff5c21);
}

.stone {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 1px 3px #1b1021;
}

.projectile-fronde,
.projectile-double-fronde {
  color: #e3d0a1;
  filter: drop-shadow(0 0 3px #fff2c8);
  animation: projectile-seed 0.28s ease-in-out infinite alternate;
}

.projectile-arbalete,
.projectile-arc-long {
  color: #e9dfc5;
  filter: drop-shadow(1px 0 #5e4128) drop-shadow(0 0 3px #fff);
  animation: projectile-arrow 0.3s ease-in-out infinite alternate;
}

.projectile-fusil-pompe {
  color: #ffae3d;
  filter: drop-shadow(0 0 5px #ff4b20);
  animation: projectile-flame 0.22s ease-in-out infinite alternate;
}

.projectile-lance-clous {
  color: #bac7d0;
  filter: drop-shadow(0 0 3px #8ce2ef);
  animation: projectile-metal 0.2s ease-in-out infinite alternate;
}

.projectile-lance-bonbons {
  width: 23px;
  height: 23px;
  font-size: 20px;
  filter: drop-shadow(0 0 5px #ff76b1);
  animation: projectile-candy 0.24s ease-in-out infinite alternate;
}

.projectile-bat {
  width: 26px;
  height: 23px;
  font-size: 20px;
  filter: drop-shadow(0 0 7px #c497ff);
  animation: projectile-bat 0.2s ease-in-out infinite alternate;
}

.loot-relic {
  z-index: 4;
  width: 34px;
  height: 34px;
  border-color: #c18cf1;
  background: radial-gradient(circle at 35% 28%, #fff 0 7%, #deb5ff 25%, #76429a 78%);
  box-shadow: 0 0 15px #bb73ff;
  font-size: 21px;
}

.locker-relic-card {
  border-color: #9866be;
  background: linear-gradient(145deg, #2e2038, #17141c);
  color: #f4e6ff;
}

.locker-relic-card p,
.locker-relic-card .shop-item-category {
  color: #d7b8ed;
}

.locker-relic-card.is-empty {
  opacity: 0.62;
}

.ice-blast {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  border: 4px solid #c8f8ff;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, #83eaff 40%, #478de8 70%, transparent 72%);
  box-shadow: 0 0 20px #8ceeff, 0 0 45px #4c91ff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ice-blast 0.7s ease-out forwards;
}

.enemy-frozen {
  filter: hue-rotate(155deg) brightness(1.25) drop-shadow(0 0 7px #81edff);
}

.enemy-burn-flames {
  position: absolute;
  z-index: 5;
  top: -27%;
  right: -12%;
  font-size: 20px;
  filter: drop-shadow(0 0 5px #ff4b20);
  pointer-events: none;
  animation: burn-flame-dance 0.32s ease-in-out infinite alternate;
}

.player.power-ice-casting {
  animation: player-ice-cast 0.56s ease-out;
}

.player.power-fire-casting {
  animation: player-fire-cast 0.75s ease-out;
}

@keyframes throne-flame-flicker {
  from { opacity: 0.78; transform: translateY(2px) scale(0.94); }
  to { opacity: 1; transform: translateY(-3px) scale(1.06); }
}

@keyframes ice-blast {
  to { opacity: 0; transform: translate(-50%, -50%) scale(15); }
}

@keyframes weapon-bow-release {
  0%, 100% { transform: rotate(0) translateX(0); }
  40% { transform: rotate(-24deg) translateX(-3px); }
}

@keyframes weapon-sling-snap {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-12deg) translateY(-2px); }
}

@keyframes weapon-double-snap {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px) rotate(-8deg); }
  68% { transform: translateX(2px) rotate(7deg); }
}

@keyframes weapon-recoil-heavy {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-6px) rotate(-8deg); }
  65% { transform: translateX(2px) rotate(4deg); }
}

@keyframes weapon-recoil-rapid {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

@keyframes weapon-candy-launch {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-14deg) scale(1.12); }
}

@keyframes weapon-bat-launch {
  0%, 100% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-18deg) scale(1.08); }
}

.impact-burst::before,
.impact-burst::after {
  position: absolute;
  inset: -11px;
  border: 3px dashed #ff9b3d;
  border-radius: 50%;
  content: "";
}

.impact-burst::after {
  inset: 5px;
  border-color: #fff2a0;
  border-style: solid;
}

.impact-spark {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border-radius: 4px;
  background: #f07837;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: spark-fly 0.36s ease-out forwards;
}

.impact-spark:nth-child(even) {
  background: #ffd65a;
}

@keyframes head-bob {
  to { transform: translateY(-1px) rotate(1deg); }
}

@keyframes body-bob {
  to { transform: translateY(-1px); }
}

@keyframes arm-left-swing {
  from { transform: rotate(14deg); }
  to { transform: rotate(-14deg); }
}

@keyframes arm-right-swing {
  from { transform: rotate(-14deg); }
  to { transform: rotate(14deg); }
}

@keyframes leg-left-step {
  from { transform: rotate(-22deg); }
  to { transform: rotate(22deg); }
}

@keyframes leg-right-step {
  from { transform: rotate(22deg); }
  to { transform: rotate(-22deg); }
}

@keyframes slingshot-sway {
  from { transform: translateY(-1px) rotate(-5deg); }
  to { transform: translateY(1px) rotate(5deg); }
}

@keyframes band-sway-left {
  to { transform: rotate(36deg); }
}

@keyframes band-sway-right {
  to { transform: rotate(-36deg); }
}

@keyframes slingshot-release {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(-5px, 2px) rotate(-12deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes band-release-left {
  0% { transform: rotate(27deg); }
  35% { transform: rotate(8deg) scaleY(0.55); }
  100% { transform: rotate(27deg); }
}

@keyframes band-release-right {
  0% { transform: rotate(-27deg); }
  35% { transform: rotate(-8deg) scaleY(0.55); }
  100% { transform: rotate(-27deg); }
}

@keyframes shooting-arm-left {
  0%, 100% { transform: rotate(22deg); }
  35% { transform: rotate(-13deg) translateY(-2px); }
}

@keyframes shooting-arm-right {
  0%, 100% { transform: rotate(-22deg); }
  35% { transform: rotate(14deg) translateY(-2px); }
}

@keyframes shooting-hand-left {
  0%, 100% { transform: translate(0, 0) rotate(-24deg); }
  35% { transform: translate(-3px, 2px) rotate(-42deg); }
}

@keyframes shooting-hand-right {
  0%, 100% { transform: translate(0, 0) rotate(14deg); }
  35% { transform: translate(3px, 1px) rotate(30deg); }
}

@keyframes impact-pop {
  0% { opacity: 1; scale: 0.3; }
  40% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; scale: 1.5; }
}

@keyframes spark-fly {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-30px) scale(0.25);
  }
}

@keyframes timer-pulse {
  to { opacity: 0.55; }
}

@keyframes enemy-flash {
  50% { filter: brightness(1.8); }
}

@keyframes boss-float {
  from { transform: translate(-50%, -50%) scale(var(--actor-scale)) translateY(-4px) rotate(-2deg); }
  to { transform: translate(-50%, -50%) scale(var(--actor-scale)) translateY(4px) rotate(2deg); }
}

@keyframes boss-charge {
  from { transform: translate(-50%, -50%) scale(var(--actor-scale)); filter: brightness(1); }
  to { transform: translate(-50%, -50%) scale(var(--actor-scale)); filter: brightness(1.7); }
}

@keyframes mega-boss-slam {
  0%, 100% { filter: brightness(1); }
  28% { filter: brightness(2.1) drop-shadow(0 0 18px #ff45cb); }
  55% { filter: brightness(0.62) drop-shadow(0 0 26px #ff45cb); }
}

@keyframes mega-shockwave {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes boss-appear {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); filter: brightness(3) blur(6px); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--actor-scale)); filter: brightness(1); }
}

@keyframes boss-attack-windup {
  from { filter: brightness(1.2) drop-shadow(0 0 8px #ff593f); }
  to { filter: brightness(2) drop-shadow(0 0 24px #ff174f); }
}

@keyframes boss-phase-transition {
  0%, 100% { filter: brightness(1); }
  30%, 70% { filter: brightness(2.8) drop-shadow(0 0 28px #ff284f) hue-rotate(25deg); }
}

@keyframes boss-defeat {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); filter: brightness(3) blur(8px); }
}

@keyframes boss-warning-pulse {
  from { opacity: 0.55; scale: 0.88; }
  to { opacity: 1; scale: 1.04; }
}

@keyframes enemy-walk {
  from { transform: translate(-50%, -50%) scale(var(--actor-scale)) translateY(0) rotate(-2deg); }
  to { transform: translate(-50%, -50%) scale(var(--actor-scale)) translateY(-2px) rotate(2deg); }
}

@keyframes enemy-attack {
  0% { transform: translate(-50%, -50%) scale(var(--actor-scale)); filter: brightness(1); }
  28% { transform: translate(-50%, -50%) scale(var(--actor-scale)) translate(-3px, -2px) rotate(-5deg) scale(0.92); }
  62% { transform: translate(-50%, -50%) scale(var(--actor-scale)) translate(4px, -1px) rotate(5deg) scale(1.16); filter: brightness(1.65) saturate(1.4); }
  100% { transform: translate(-50%, -50%) scale(var(--actor-scale)); filter: brightness(1); }
}

@keyframes hero-pixel-bob {
  to { translate: 0 -1px; }
}

@keyframes hero-pixel-step {
  0% { transform: translate(-1px, 0) rotate(-3deg); }
  100% { transform: translate(1px, -1px) rotate(3deg); }
}

@keyframes hero-pixel-arms {
  0% { transform: translate(1px, 0) rotate(3deg); }
  100% { transform: translate(-1px, -1px) rotate(-3deg); }
}

@keyframes hero-pixel-run {
  0% { transform: translateY(1px) scaleY(0.97); }
  100% { transform: translateY(-1px) scaleY(1.03); }
}

@keyframes hero-pixel-shot {
  0%, 100% { translate: 0 0; }
  40% { translate: 2px 0; }
}

@keyframes hero-pixel-dodge {
  0% { transform: scaleX(1) scaleY(1); opacity: 1; }
  35% { transform: scaleX(0.78) scaleY(1.18); opacity: 0.62; }
  70% { transform: scaleX(1.12) scaleY(0.88); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes hero-pixel-dodge-pack {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px) rotate(-5deg); }
}

@keyframes pickup-float {
  to { translate: 0 -7px; }
}

@keyframes player-flash {
  50% { filter: brightness(1.8) sepia(1) saturate(4); }
}

@media (prefers-reduced-motion: reduce) {
  .player.is-moving .player-art .player-head,
  .player.is-moving .player-art .player-body,
  .player.is-moving .player-art .player-arm-left,
  .player.is-moving .player-art .player-arm-right,
  .player.is-moving .player-art .player-leg-left,
  .player.is-moving .player-art .player-leg-right,
  .player.is-moving .player-art .player-slingshot,
  .player.is-moving .player-art .slingshot-band-left,
  .player.is-moving .player-art .slingshot-band-right {
    animation: none;
  }

  .timer-urgent {
    animation: none;
  }

  .enemy-boss,
  .enemy-boss-charging,
  .enemy:not(.enemy-hit),
  .enemy-attacking,
  .player.is-moving .hero-pixel-art,
  .player.is-moving .pixel-legs,
  .player.is-moving .pixel-arms,
  .player.is-moving .pixel-body,
  .player.is-shooting .pixel-weapon,
  .player.is-dodging .hero-pixel-art,
  .player.is-dodging .pixel-backpack,
  .weapon-pickup {
    animation: none;
  }
}

.front-menu {
  background:
    radial-gradient(ellipse at 50% 42%, #542744d9 0, #21142be8 57%, #100c17f5 100%),
    #160f20cc;
}

.menu-panel {
  border-color: #17111d;
  background:
    radial-gradient(ellipse at 94% 4%, #f48b3226 0 12%, transparent 13%),
    linear-gradient(145deg, #302039, #211928 68%, #19151f);
  box-shadow: 0 8px 0 #100d14, 0 14px 34px #09070dcc, inset 0 0 0 2px #f89c4933;
  color: #fff1dc;
}

.menu-panel::before,
.menu-panel::after {
  border-color: #261722;
  background: repeating-linear-gradient(135deg, #e66a2c 0 9px, #f5a444 9px 17px);
}

.menu-heading {
  border-bottom-color: #d56c35;
}

.menu-kicker {
  color: #ffad4f;
}

.menu-kicker::before {
  content: "🎃 ";
}

.menu-heading h1 {
  color: #fff1d4;
  text-shadow: 1px 2px 0 #1b1420, 2px 3px 0 #a84d2c;
}

.menu-description,
.shop-rotation-note,
.shop-category-note {
  color: #dfd0dd;
}

.player-name-field {
  color: #ffe7cc;
}

.player-name-field input {
  border-color: #a65535;
  background: #211923;
  color: #fff1dc;
}

.player-name-feedback {
  margin: -5px 0 12px;
  color: #ffbd72;
  font-size: 0.75rem;
  font-weight: 800;
}

.player-name-field input[readonly] {
  border-color: #65506b;
  background: #302738;
  color: #c9b9c9;
  cursor: not-allowed;
}

.loadout-preview {
  border-color: #c1683c;
  background: #100d1866;
  color: #fff1dc;
}

.loadout-preview:hover {
  background: #3d2938;
}

.loadout-preview #loadout-preview-content .character-preview {
  width: 92px;
  height: 108px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 80%, #ee81264d 0 43%, transparent 45%),
    linear-gradient(145deg, #1d1524, #34243a);
  box-shadow: inset 0 0 0 2px #f39a4c66, 0 4px 0 #120e18;
}

.loadout-preview #loadout-preview-content .hero-pixel-art {
  width: 76px;
  height: 92px;
}

.character-preview .pixel-weapon {
  display: none !important;
}

.loadout-preview-label strong,
.locker-hint,
.shop-section-heading span {
  color: #ffad4f;
}

.loadout-preview-label span {
  color: #e7d5e4;
}

.menu-primary {
  background: linear-gradient(#ffad4f, #e65f27);
  color: #29171a;
}

.menu-secondary,
.locker-equip-button {
  border-color: #302039;
  background: linear-gradient(#9b6bb1, #684477);
  color: #fff3e8;
}

.shop-section-heading h2 {
  color: #fff1d4;
}

.shop-category-title,
.shop-category > h3 {
  color: #ffad4f;
}

.shop-card {
  border-color: #885238;
  background: linear-gradient(150deg, #483044, #302335);
  box-shadow: 0 3px 0 #17121d;
}

.shop-card-unavailable {
  background: linear-gradient(150deg, #322b36, #27212d);
}

.shop-card-tier-2:not(.shop-card-unavailable) {
  border-color: #df9140;
  background: linear-gradient(150deg, #55353a, #47303b);
  box-shadow: 0 3px 0 #9a532e;
}

.shop-card-tier-3:not(.shop-card-unavailable) {
  border-color: #ffad4f;
  background: linear-gradient(150deg, #6a3934, #55303a);
  box-shadow: 0 3px 0 #843c26;
}

.shop-card h3 {
  color: #ffcb91;
}

.shop-card p {
  color: #eadce5;
}

.shop-card-footer {
  color: #ffd194;
}

.shop-rotation-footer {
  border-color: #9a532e;
  background: linear-gradient(#ffbf71, #e87935);
  box-shadow: 0 3px 0 #843c26;
  color: #32191a;
}

.locker-empty {
  border-color: #c1683c;
  color: #dfd0dd;
}

.locker-equip-button:disabled {
  background: #3c3540;
  color: #d0c3cf;
}

.menu-primary:focus-visible,
.menu-secondary:focus-visible,
.shop-buy-button:focus-visible,
.locker-equip-button:focus-visible,
.player-name-field input:focus-visible {
  outline-color: #ffad4f;
}

.stone.projectile-soul {
  color: #a9ffe2;
  filter: drop-shadow(0 0 3px #75ffd5) drop-shadow(0 0 9px #29b9ad);
  animation: projectile-soulfire 0.24s ease-in-out infinite alternate;
}

.stone.projectile-rune {
  color: #e9b5ff;
  font-size: 19px;
  filter: drop-shadow(0 0 4px #b54cff) drop-shadow(0 0 9px #ee79ff);
  animation: projectile-rune 0.32s linear infinite;
}

.stone.projectile-thorn {
  color: #9eea70;
  font-size: 19px;
  filter: drop-shadow(0 0 3px #5ca543) drop-shadow(0 0 8px #c72f40);
  animation: projectile-thorn 0.2s ease-in-out infinite alternate;
}

.impact-burst.impact-soul {
  border-color: #9dffe0;
  background: radial-gradient(circle, #f4fff9 0 15%, #7bffe0 22% 48%, #35b8ab 55% 72%, transparent 75%);
  filter: drop-shadow(0 0 11px #46ffe0);
}

.impact-burst.impact-rune {
  border-color: #e5a7ff;
  background: radial-gradient(circle, #fff 0 12%, #e1a0ff 20% 43%, #933bd0 52% 70%, transparent 74%);
  filter: drop-shadow(0 0 11px #c252ff);
}

.impact-burst.impact-thorn {
  border-color: #b3ec67;
  background: radial-gradient(circle, #fff6d2 0 14%, #b7e85d 22% 43%, #b92f47 53% 70%, transparent 74%);
  filter: drop-shadow(0 0 10px #9fda46);
}

.player.is-shooting.weapon-arc-long .pixel-weapon,
.player.is-shooting.weapon-lanterne-ames .pixel-weapon,
.player.is-shooting.weapon-grimoire-maudit .pixel-weapon,
.player.is-shooting.weapon-fouet-ronces .pixel-weapon {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes weapon-moon-bow-release {
  0%, 100% { transform: rotate(0) translateX(0); filter: drop-shadow(0 0 0 transparent); }
  36% { transform: rotate(-30deg) translateX(-4px); filter: drop-shadow(0 0 5px #b5eaff); }
  68% { transform: rotate(12deg) translateX(2px); }
}

@keyframes weapon-scythe-sweep {
  0%, 100% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-58deg) scale(1.18); filter: drop-shadow(0 0 7px #bf73ff); }
  75% { transform: rotate(18deg) scale(1.04); }
}

@keyframes weapon-lantern-swing {
  0%, 100% { transform: rotate(0) translateY(0); }
  38% { transform: rotate(-24deg) translateY(-5px); filter: drop-shadow(0 0 7px #ffd76b); }
  70% { transform: rotate(16deg) translateY(1px); }
}

@keyframes weapon-grimoire-cast {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-12deg) scale(1.14); filter: drop-shadow(0 0 8px #bf70ff); }
  62% { transform: rotate(8deg) scale(0.94); }
}

@keyframes weapon-thorn-whip {
  0%, 100% { transform: rotate(0) scaleX(1); }
  30% { transform: rotate(-34deg) scaleX(0.86); }
  67% { transform: rotate(26deg) scaleX(1.18); filter: drop-shadow(0 0 6px #a4e55c); }
}

.enemy {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  image-rendering: pixelated;
}

.enemy-shadow,
.enemy-cape,
.enemy-limb,
.enemy-torso,
.enemy-head {
  position: absolute;
  display: block;
  pointer-events: none;
}

.enemy-shadow {
  z-index: 0;
  bottom: 1%;
  left: 18%;
  width: 64%;
  height: 13%;
  border-radius: 50%;
  background: #160d12a8;
  filter: blur(1px);
}

.enemy-cape {
  z-index: 1;
  top: 27%;
  left: 10%;
  width: 80%;
  height: 68%;
  background: linear-gradient(90deg, #321b2b, #603044 48%, #291a2b);
  clip-path: polygon(14% 0, 86% 0, 100% 82%, 78% 71%, 64% 100%, 47% 77%, 27% 100%, 16% 72%, 0 86%);
  filter: drop-shadow(0 2px 0 #180e16);
}

.enemy-limb {
  z-index: 2;
  border: 1px solid #44231e;
  image-rendering: pixelated;
}

.enemy-leg {
  top: 70%;
  width: 24%;
  height: 26%;
  background: linear-gradient(90deg, #482622, #a74b2a 35% 72%, #572720);
  clip-path: polygon(10% 0, 90% 0, 78% 83%, 100% 100%, 0 100%, 21% 83%);
}

.enemy-leg-left { left: 25%; }
.enemy-leg-right { right: 25%; }

.enemy-arm {
  top: 43%;
  width: 23%;
  height: 37%;
  background: linear-gradient(90deg, #542722, #d97836 45%, #6b2b23);
}

.enemy-arm-left {
  left: 8%;
  transform: rotate(12deg);
  clip-path: polygon(28% 0, 100% 13%, 75% 72%, 100% 100%, 0 82%, 21% 48%);
}

.enemy-arm-right {
  right: 8%;
  transform: rotate(-12deg);
  clip-path: polygon(0 13%, 72% 0, 80% 48%, 100% 82%, 0 100%, 25% 72%);
}

.enemy-torso {
  z-index: 3;
  top: 37%;
  left: 22%;
  width: 56%;
  height: 45%;
  border: 2px solid #582b22;
  border-radius: 22% 22% 12% 12%;
  background:
    linear-gradient(90deg, transparent 42%, #f3ad4c44 48% 53%, transparent 60%),
    repeating-linear-gradient(0deg, #813924 0 15%, #bf5b2b 16% 31%, #6b3026 32% 38%);
  box-shadow: inset 0 -4px #42201d, 0 2px 0 #30191a;
  clip-path: polygon(19% 0, 81% 0, 100% 20%, 89% 100%, 11% 100%, 0 20%);
}

.enemy-head {
  z-index: 4;
  top: 5%;
  left: 18%;
  width: 64%;
  height: 47%;
  border: 2px solid #53291f;
  border-radius: 43% 43% 35% 35%;
  background:
    radial-gradient(ellipse at 32% 26%, #ffd879 0 8%, transparent 36%),
    repeating-linear-gradient(90deg, #a64124 0 15%, #f28a35 18% 33%, #c25227 37% 49%);
  box-shadow: inset 0 -5px #77301f, inset 3px 0 4px #ffd47a77, 0 2px 0 #30191a;
}

.enemy-eye {
  z-index: 5;
  top: 23%;
  left: 29%;
  width: 42%;
  height: 13%;
  background: #eaff76;
  filter: drop-shadow(0 0 4px #d4ff52) drop-shadow(0 0 8px #ff542e);
}

.enemy-mouth {
  z-index: 5;
  top: 37%;
  bottom: auto;
  left: 35%;
  width: 30%;
  height: 12%;
  border: 1px solid #401b19;
  background: repeating-linear-gradient(90deg, #251716 0 18%, #f6d8a1 20% 30%, #47211e 32% 50%);
}

.enemy-health { z-index: 11; top: -19px; }
.enemy-label { z-index: 11; }
.enemy-hat,
.enemy-weapon,
.enemy-armor,
.enemy-scar { z-index: 7; }

.enemy-grunt .enemy-head {
  background:
    radial-gradient(ellipse at 30% 24%, #ffdf83 0 7%, transparent 31%),
    repeating-linear-gradient(90deg, #a44125 0 13%, #f39a3d 16% 29%, #bb4a27 33% 40%, #e87a32 45% 53%);
}

.enemy-scout .enemy-head {
  top: 8%;
  height: 43%;
  border-color: #34493a;
  border-radius: 48% 48% 22% 22%;
  background: linear-gradient(90deg, #526650, #bdd184 42%, #607451 75%, #304538);
  clip-path: polygon(0 18%, 20% 0, 77% 7%, 100% 24%, 86% 82%, 65% 100%, 17% 90%);
}

.enemy-scout .enemy-torso,
.enemy-scout .enemy-arm,
.enemy-scout .enemy-leg {
  border-color: #34463a;
  background: linear-gradient(90deg, #30473c, #81936a 48%, #354838);
}

.enemy-scout .enemy-cape {
  background: linear-gradient(90deg, #263b35, #768269 50%, #26372f);
}

.enemy-brute .enemy-head {
  left: 11%;
  width: 78%;
  height: 52%;
  border-width: 3px;
  background:
    radial-gradient(ellipse at 32% 23%, #ffd171 0 9%, transparent 35%),
    repeating-linear-gradient(90deg, #762c24 0 13%, #df6d32 16% 30%, #963321 34% 43%, #bf4a27 47% 54%);
}

.enemy-brute .enemy-torso {
  left: 10%;
  width: 80%;
  height: 48%;
  background: repeating-linear-gradient(0deg, #592522 0 12%, #b54a29 13% 31%, #743023 32% 42%);
}

.enemy-brute .enemy-arm {
  top: 42%;
  width: 30%;
  height: 43%;
}

.enemy-boss .enemy-head {
  left: 11%;
  width: 78%;
  height: 51%;
  border-width: 3px;
  background:
    radial-gradient(ellipse at 30% 24%, #fff09a 0 8%, transparent 35%),
    repeating-linear-gradient(90deg, #8c3526 0 12%, #f49a3c 16% 30%, #a94426 34% 43%, #dc6c30 47% 54%);
  box-shadow: inset 0 -7px #63231f, inset 4px 0 5px #fff0a277, 0 3px 0 #281719, 0 0 10px #f05c6e99;
}

.enemy-boss .enemy-torso {
  left: 12%;
  width: 76%;
  height: 48%;
  border-color: #43231f;
}

.enemy-boss .enemy-arm {
  top: 42%;
  width: 29%;
  height: 45%;
  border-width: 2px;
}

.enemy-boss-gardien .enemy-head,
.enemy-boss-gardien .enemy-torso,
.enemy-boss-gardien .enemy-arm,
.enemy-boss-gardien .enemy-leg {
  border-color: #333c35;
  background: repeating-linear-gradient(90deg, #394b41 0 14%, #9a9c70 16% 28%, #515b46 31% 42%);
}

.enemy-boss-gardien .enemy-cape {
  background: linear-gradient(90deg, #29362e, #6c7053 50%, #313b32);
}

.enemy-boss-chasseur .enemy-head,
.enemy-boss-chasseur .enemy-torso,
.enemy-boss-chasseur .enemy-arm,
.enemy-boss-chasseur .enemy-leg {
  border-color: #294332;
  background: repeating-linear-gradient(90deg, #254735 0 14%, #91a85a 16% 27%, #3c6242 30% 42%);
}

.enemy-boss-chasseur .enemy-cape {
  background: linear-gradient(90deg, #1e3a30, #547747 50%, #203d31);
}

.enemy-boss-colosse .enemy-head,
.enemy-boss-colosse .enemy-torso,
.enemy-boss-colosse .enemy-arm,
.enemy-boss-colosse .enemy-leg {
  border-color: #50231f;
  background: repeating-linear-gradient(90deg, #772b22 0 13%, #df7935 16% 28%, #9f3b25 31% 43%);
}

.enemy-boss-colosse .enemy-head {
  left: 8%;
  width: 84%;
  height: 53%;
}

.enemy-boss-colosse .enemy-torso {
  left: 5%;
  width: 90%;
  height: 51%;
}

.enemy-boss-mega-cauchemar .enemy-head {
  top: 1%;
  left: 8%;
  width: 84%;
  height: 55%;
  border-color: #160d20;
  border-radius: 48% 48% 25% 25%;
  background:
    radial-gradient(ellipse at 30% 23%, #e9b6ff 0 7%, transparent 35%),
    repeating-linear-gradient(90deg, #160e21 0 13%, #70285f 16% 28%, #29162f 31% 43%, #a03672 47% 51%);
  box-shadow: inset 0 -8px #160d20, inset 4px 0 6px #ff92d366, 0 0 16px #c32c96;
}

.enemy-boss-mega-cauchemar .enemy-torso {
  top: 39%;
  left: 6%;
  width: 88%;
  height: 54%;
  border-color: #1b1024;
  background: repeating-linear-gradient(0deg, #160d20 0 12%, #492044 13% 26%, #211328 27% 41%);
  box-shadow: inset 0 -7px #0c0912, 0 0 17px #a52b9a99;
}

.enemy-boss-mega-cauchemar .enemy-arm {
  top: 42%;
  width: 32%;
  height: 49%;
  border-color: #170f22;
  background: linear-gradient(90deg, #180f22, #71305d 52%, #211328);
  filter: drop-shadow(0 0 5px #d13aab);
}

.enemy-boss-mega-cauchemar .enemy-leg {
  top: 75%;
  height: 22%;
  border-color: #17101e;
  background: linear-gradient(90deg, #150e1d, #58264f 50%, #1a1022);
}

.enemy-boss-mega-cauchemar .enemy-cape {
  top: 27%;
  left: -7%;
  width: 114%;
  height: 72%;
  background: linear-gradient(90deg, #100c19, #32162f 50%, #100c19);
  filter: drop-shadow(0 0 9px #882b85);
}

.enemy-boss-mega-cauchemar .enemy-eye {
  top: 23%;
  background: #ff3b72;
}

.enemy-boss-fossoyeur-maudit .enemy-cape {
  background: linear-gradient(90deg, #171c28, #403b39 48%, #1d202a);
  clip-path: polygon(14% 0, 86% 0, 100% 82%, 74% 73%, 61% 100%, 47% 78%, 29% 100%, 19% 72%, 0 86%);
}

.enemy-boss-fossoyeur-maudit .enemy-head {
  border-color: #253748;
  border-radius: 48% 48% 35% 35%;
  background:
    radial-gradient(ellipse at 34% 37%, #8cf6ff 0 5%, transparent 8%),
    radial-gradient(ellipse at 66% 37%, #8cf6ff 0 5%, transparent 8%),
    linear-gradient(90deg, #538a9b, #b8e0d1 45%, #54869a);
  box-shadow: inset 0 -6px #426474, 0 2px 0 #17212b, 0 0 12px #63deefaa;
}

.enemy-boss-fossoyeur-maudit .enemy-eye {
  top: 34%;
  background: #a6ffff;
  filter: drop-shadow(0 0 5px #45dfff);
}

.enemy-boss-fossoyeur-maudit .enemy-mouth {
  top: 53%;
  left: 32%;
  width: 36%;
  height: 15%;
  border-color: #24323d;
  background: repeating-linear-gradient(90deg, #15212b 0 15%, #d4edcf 17% 27%, #253542 30% 42%);
}

.enemy-boss-fossoyeur-maudit .enemy-torso,
.enemy-boss-fossoyeur-maudit .enemy-arm,
.enemy-boss-fossoyeur-maudit .enemy-leg {
  border-color: #594d43;
  background: repeating-linear-gradient(90deg, #302b2c 0 16%, #aa9a79 18% 24%, #4b443d 27% 41%);
}

.enemy-boss-fossoyeur-maudit .enemy-weapon {
  top: 37%;
  right: -32%;
  width: 70%;
  height: 14%;
  border: 3px solid #393a3a;
  background: linear-gradient(#755b43, #bd9a66 42%, #49392f 72%);
  transform: rotate(-24deg);
}

.enemy-boss-fossoyeur-maudit .enemy-weapon::before {
  position: absolute;
  top: -95%;
  left: -7%;
  width: 32%;
  height: 270%;
  border: 3px solid #53504b;
  background: linear-gradient(90deg, #52616a, #d1d4bd 45%, #606d72);
  clip-path: polygon(0 12%, 100% 0, 81% 100%, 56% 77%, 26% 100%);
  content: "";
}

.enemy-boss-epouvantail-automne .enemy-cape {
  top: 29%;
  left: -8%;
  width: 116%;
  height: 68%;
  background:
    linear-gradient(70deg, transparent 42%, #704522 43% 47%, transparent 48%),
    linear-gradient(110deg, transparent 52%, #704522 53% 57%, transparent 58%),
    linear-gradient(90deg, #493821, #a27c37 50%, #4c3821);
  clip-path: polygon(0 24%, 31% 0, 68% 0, 100% 24%, 83% 100%, 51% 74%, 20% 100%);
}

.enemy-boss-epouvantail-automne .enemy-head {
  top: 0;
  left: 13%;
  width: 74%;
  height: 46%;
  border-color: #603513;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(ellipse at 33% 51%, #302117 0 8%, transparent 9%),
    radial-gradient(ellipse at 67% 51%, #302117 0 8%, transparent 9%),
    linear-gradient(90deg, #d96b19, #ffb535 48%, #c95717);
  box-shadow: inset 0 -6px #8c391b, inset 3px 0 4px #ffe37799, 0 2px #49271d;
}

.enemy-boss-epouvantail-automne .enemy-eye {
  top: 34%;
  background: #261b14;
  filter: none;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

.enemy-boss-epouvantail-automne .enemy-mouth {
  top: 54%;
  left: 37%;
  width: 26%;
  height: 8%;
  border: 0;
  background: #301d13;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}

.enemy-boss-pumpkin-torso {
  z-index: 5;
  top: 42%;
  left: 27%;
  width: 46%;
  height: 35%;
  border: 2px solid #683517;
  border-radius: 44% 44% 38% 38%;
  background:
    radial-gradient(ellipse at 34% 43%, #382215 0 7%, transparent 8%),
    radial-gradient(ellipse at 66% 43%, #382215 0 7%, transparent 8%),
    linear-gradient(90deg, #c75614, #ff9d27 48%, #b84912);
  box-shadow: inset 0 -5px #793419, 0 2px #392419;
}

.enemy-boss-pumpkin-torso::before {
  position: absolute;
  top: -16%;
  left: 43%;
  width: 18%;
  height: 22%;
  background: #496126;
  content: "";
  transform: rotate(-16deg);
}

.enemy-boss-epouvantail-automne .enemy-arm,
.enemy-boss-epouvantail-automne .enemy-leg {
  border-color: #42371f;
  background: repeating-linear-gradient(90deg, #63431e 0 20%, #a47a36 23% 32%, #59401f 36% 50%);
}

.enemy-boss-epouvantail-automne .enemy-weapon {
  top: 56%;
  right: -28%;
  width: 45%;
  height: 9%;
  border: 2px solid #493426;
  background: linear-gradient(#6b4829, #bb8a43, #543820);
  transform: rotate(-15deg);
}

.enemy-boss-epouvantail-automne .enemy-weapon::before {
  position: absolute;
  top: -65%;
  right: -20%;
  width: 50%;
  height: 220%;
  border: 2px solid #494a4a;
  background: linear-gradient(90deg, #727c78, #d6d7c5, #7a8580);
  clip-path: polygon(0 0, 100% 22%, 70% 100%, 47% 66%, 20% 100%);
  content: "";
}

.enemy-boss-maitre-des-cauchemars {
  filter: drop-shadow(0 0 9px #8427bd);
}

.enemy-boss-maitre-des-cauchemars .enemy-cape {
  top: 22%;
  left: -15%;
  width: 130%;
  height: 78%;
  background: linear-gradient(90deg, #100d1b, #382043 48%, #100d1b);
  clip-path: polygon(20% 0, 80% 0, 100% 30%, 85% 44%, 100% 59%, 77% 67%, 67% 100%, 49% 77%, 32% 100%, 22% 68%, 0 57%, 15% 42%, 0 28%);
}

.enemy-boss-maitre-des-cauchemars .enemy-head {
  top: 1%;
  left: 18%;
  width: 64%;
  height: 43%;
  border-color: #21152c;
  border-radius: 50% 50% 35% 35%;
  background:
    radial-gradient(ellipse at 35% 51%, #f6d4ff 0 5%, transparent 8%),
    radial-gradient(ellipse at 65% 51%, #f6d4ff 0 5%, transparent 8%),
    linear-gradient(90deg, #171221, #493050 48%, #171221);
  box-shadow: 0 0 15px #c04dff;
}

.enemy-boss-maitre-des-cauchemars .enemy-eye {
  top: 39%;
  background: #fff1ff;
  filter: drop-shadow(0 0 5px #d444ff);
}

.enemy-boss-maitre-des-cauchemars .enemy-mouth {
  display: none;
}

.enemy-boss-maitre-des-cauchemars .enemy-torso,
.enemy-boss-maitre-des-cauchemars .enemy-arm,
.enemy-boss-maitre-des-cauchemars .enemy-leg {
  border-color: #21152c;
  background: repeating-linear-gradient(90deg, #171221 0 15%, #502752 18% 30%, #20152a 33% 47%);
  filter: drop-shadow(0 0 4px #992bd6);
}

.enemy-boss-extra-arm {
  z-index: 5;
  width: 31%;
  height: 27%;
  border: 2px solid #21152c;
  background: linear-gradient(90deg, #171221, #743b78 52%, #21152c);
  clip-path: polygon(0 0, 100% 18%, 73% 47%, 100% 100%, 36% 73%, 14% 40%);
  filter: drop-shadow(0 0 5px #c04dff);
}

.enemy-boss-extra-arm::after {
  position: absolute;
  right: -9%;
  bottom: -8%;
  width: 30%;
  height: 34%;
  border-radius: 50%;
  background: #a15aa9;
  box-shadow: 3px 1px 0 #dd91ed;
  content: "";
}

.enemy-boss-extra-arm-left-top { top: 29%; left: -13%; transform: rotate(-22deg); }
.enemy-boss-extra-arm-right-top { top: 29%; right: -13%; transform: scaleX(-1) rotate(-22deg); }
.enemy-boss-extra-arm-left-bottom { top: 46%; left: -10%; transform: rotate(15deg); }
.enemy-boss-extra-arm-right-bottom { top: 46%; right: -10%; transform: scaleX(-1) rotate(15deg); }

.enemy-boss-bouffon-frondeur .enemy-head {
  top: 3%;
  left: 14%;
  width: 72%;
  height: 50%;
  border-color: #4c2836;
  border-radius: 44% 44% 38% 38%;
  background:
    radial-gradient(ellipse at 35% 44%, #33202c 0 7%, transparent 8%),
    radial-gradient(ellipse at 65% 44%, #33202c 0 7%, transparent 8%),
    linear-gradient(90deg, #f1d4a6, #fff0ce 48%, #d9b890);
  box-shadow: inset 0 -6px #9d5360, 0 2px #34202b;
}

.enemy-boss-bouffon-frondeur .enemy-eye {
  top: 34%;
  background: #42233a;
  filter: drop-shadow(0 0 4px #ff4c85);
  clip-path: polygon(0 30%, 100% 0, 82% 100%, 18% 75%);
}

.enemy-boss-bouffon-frondeur .enemy-mouth {
  top: 52%;
  left: 34%;
  width: 32%;
  height: 15%;
  border-color: #3c1d30;
  background: repeating-linear-gradient(90deg, #391e2b 0 18%, #fff0ce 20% 30%, #391e2b 32% 48%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.enemy-boss-bouffon-frondeur .enemy-cape {
  top: 14%;
  left: 4%;
  width: 92%;
  height: 39%;
  background: linear-gradient(90deg, #5f286d, #d04772 48%, #3758a0);
  clip-path: polygon(0 0, 100% 0, 77% 52%, 50% 100%, 23% 52%);
}

.enemy-boss-bouffon-frondeur .enemy-torso,
.enemy-boss-bouffon-frondeur .enemy-arm,
.enemy-boss-bouffon-frondeur .enemy-leg {
  border-color: #48263f;
  background: repeating-linear-gradient(90deg, #572660 0 18%, #e04772 21% 34%, #35508e 37% 50%);
}

.enemy-boss-bouffon-frondeur .enemy-hat {
  top: -27%;
  left: 4%;
  width: 92%;
  height: 39%;
  background: linear-gradient(90deg, #7540a0 0 30%, #dc4778 32% 60%, #e6b83d 62% 75%, #3866a0 77%);
  clip-path: polygon(0 74%, 13% 40%, 20% 0, 43% 42%, 55% 1%, 68% 41%, 100% 10%, 83% 100%, 50% 74%, 17% 100%);
  filter: drop-shadow(0 2px #39213d);
}

.enemy-boss-bouffon-frondeur .enemy-weapon {
  top: 45%;
  right: -25%;
  width: 35%;
  height: 10%;
  border: 2px solid #53381f;
  background: linear-gradient(#835529, #d29a43, #66401f);
  transform: rotate(-20deg);
}

.enemy-boss-bouffon-frondeur .enemy-weapon::before {
  position: absolute;
  top: -135%;
  left: 22%;
  width: 58%;
  height: 270%;
  border: 3px solid #76502d;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: transparent;
  content: "";
}

.enemy-boss-fossoyeur-maudit > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art),
.enemy-boss-epouvantail-automne > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art),
.enemy-boss-maitre-des-cauchemars > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art),
.enemy-boss-bouffon-frondeur > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art) {
  display: none;
}

.enemy-boss-art {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: block;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.enemy-boss-fossoyeur-maudit .enemy-boss-art {
  filter: drop-shadow(0 3px 0 #14151a) drop-shadow(0 0 5px #77d7eb99);
}

.enemy-boss-epouvantail-automne .enemy-boss-art {
  filter: drop-shadow(0 3px 0 #21130b) drop-shadow(0 0 6px #ff9b2c99);
}

.boss-emerging .enemy-boss-art {
  animation: boss-emerge 1.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes boss-emerge {
  0% { opacity: 0; transform: translate(-50%, -15%) scale(0.15) rotate(-25deg); filter: brightness(3) drop-shadow(0 0 30px #c25bff); }
  55% { opacity: 1; transform: translate(-50%, -58%) scale(1.12) rotate(6deg); filter: brightness(1.6) drop-shadow(0 0 22px #c25bff); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}

.enemy-boss-maitre-des-cauchemars .enemy-boss-art {
  filter: drop-shadow(0 3px 0 #100817) drop-shadow(0 0 8px #bc54e8bb);
}

.enemy-boss-bouffon-frondeur .enemy-boss-art {
  filter: drop-shadow(0 3px 0 #1c101c) drop-shadow(0 0 6px #e04a8b99);
}

.enemy-boss-mega-cauchemar > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art) {
  display: none;
}

.enemy-boss-mega-cauchemar .enemy-boss-art {
  z-index: 8;
  width: 150%;
  height: 150%;
  filter: drop-shadow(0 4px 0 #110c19) drop-shadow(0 0 12px #ad56d8cc);
}

.enemy-minion > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-minion-art) {
  display: none;
}

.enemy-minion-art {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: block;
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.enemy-minion-art-serviteur-squelette {
  filter: drop-shadow(0 2px 0 #171317) drop-shadow(0 0 3px #87deed66);
}

.enemy-minion-art-gargouille-epineuse {
  filter: drop-shadow(0 2px 0 #161815) drop-shadow(0 0 3px #a8bd8266);
}

.enemy-minion-art-ombre-rampante {
  filter: drop-shadow(0 2px 0 #110817) drop-shadow(0 0 5px #b851f0aa);
}

.enemy-minion-art-petit-bouffon-frondeur {
  filter: drop-shadow(0 2px 0 #1a1018) drop-shadow(0 0 3px #ef5c9b77);
}

.enemy-minion-art-archer-de-lombre {
  filter: drop-shadow(0 2px 0 #110d17) drop-shadow(0 0 4px #a64ec977);
}

.enemy-minion-art-soldat-de-lombre {
  filter: drop-shadow(0 2px 0 #111018) drop-shadow(0 0 4px #a8a3b777);
}

.enemy-minion-art-goule-de-lombre {
  filter: drop-shadow(0 2px 0 #100b17) drop-shadow(0 0 4px #88549588);
}

.power-effect {
  position: absolute;
  z-index: 6;
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 2px solid #c6edff;
  border-radius: 50%;
  background: radial-gradient(circle, #d9faff55 0 25%, #75cfff33 62%, transparent 70%);
  color: #eaffff;
  font-size: 34px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px #7ce9ff, 0 0 16px #4ab9ff;
  transform: translate(-50%, -50%);
  animation: power-ice-burst 0.85s ease-out forwards;
}

.power-effect-ice {
  border-width: 4px;
  box-shadow: inset 0 0 15px #a9edff99, 0 0 14px #71d8ff;
}

.power-effect-essaim-spectral {
  border-color: #d8a7ff;
  background: radial-gradient(circle, #b96cff66, #612b8755 58%, transparent 72%);
  filter: drop-shadow(0 0 11px #a44cff);
  animation-name: power-bats-swarm;
}

.power-effect-citrouille-infernale {
  border-color: #ffbb58;
  background: radial-gradient(circle, #fff3a766, #ff702c77 43%, #b4201877 68%, transparent 73%);
  filter: drop-shadow(0 0 13px #ff5a24);
  animation-name: power-pumpkin-blast;
}

.power-effect-voile-fantome {
  border-color: #a8fff0;
  background: radial-gradient(circle, #eaffff66, #51d8d277 47%, #8458bc55 68%, transparent 76%);
  filter: drop-shadow(0 0 13px #80ffe9);
  animation-name: power-ghost-veil;
}

.player.power-veil-active {
  filter: drop-shadow(0 0 8px #d9ffff) drop-shadow(0 0 20px #64eddf);
  opacity: 0.76;
}

@keyframes power-ice-burst {
  0% { opacity: 0; scale: 0.25; rotate: -35deg; }
  28% { opacity: 1; }
  100% { opacity: 0; scale: 2.7; rotate: 45deg; }
}

@keyframes power-bats-swarm {
  0% { opacity: 0; scale: 0.2; rotate: -20deg; }
  25% { opacity: 1; }
  100% { opacity: 0; scale: 3.1; rotate: 130deg; }
}

@keyframes power-pumpkin-blast {
  0% { opacity: 0; scale: 0.15; }
  32% { opacity: 1; scale: 1.1; }
  100% { opacity: 0; scale: 3.2; rotate: 38deg; }
}

@keyframes power-ghost-veil {
  0% { opacity: 0; scale: 0.2; }
  25% { opacity: 0.9; }
  100% { opacity: 0; scale: 2.6; rotate: -50deg; }
}

.power-effect-flamme-infernale {
  border-color: #ffd079;
  background: radial-gradient(circle, #fff8bd 0 10%, #ffb132 22% 43%, #ed3b18 57% 72%, transparent 75%);
  filter: drop-shadow(0 0 15px #ff5a16);
  animation-name: power-fire-burst;
}

@keyframes power-fire-burst {
  0% { opacity: 0; scale: 0.2; rotate: -25deg; }
  24% { opacity: 1; scale: 0.95; }
  60% { opacity: 0.95; scale: 1.45; rotate: 18deg; }
  100% { opacity: 0; scale: 3.4; rotate: 55deg; }
}

@keyframes player-fire-cast {
  0%, 100% { filter: none; }
  22%, 64% { filter: drop-shadow(0 0 9px #ffd24f) drop-shadow(0 0 20px #f3471d); }
}

@keyframes player-ice-cast {
  0%, 100% { filter: none; }
  24%, 70% { filter: drop-shadow(0 0 9px #c8f8ff) drop-shadow(0 0 22px #4ebfff); }
}

@keyframes burn-flame-dance {
  from { translate: 0 2px; scale: 0.82; }
  to { translate: 0 -4px; scale: 1.15; }
}

@keyframes projectile-seed {
  from { filter: drop-shadow(0 0 2px #fff2c8); }
  to { filter: brightness(1.35) drop-shadow(0 0 7px #ffc44d); }
}

@keyframes projectile-arrow {
  from { filter: drop-shadow(1px 0 #5e4128) drop-shadow(0 0 2px #fff); }
  to { filter: brightness(1.4) drop-shadow(0 0 8px #fff3ba); }
}

@keyframes projectile-flame {
  from { filter: brightness(1.05) drop-shadow(0 0 3px #ff4b20); }
  to { filter: brightness(1.55) drop-shadow(0 0 11px #ffae3d); }
}

@keyframes projectile-metal {
  from { filter: drop-shadow(0 0 2px #8ce2ef); }
  to { filter: brightness(1.5) drop-shadow(0 0 8px #d7fbff); }
}

@keyframes projectile-candy {
  from { rotate: -16deg; filter: drop-shadow(0 0 3px #ff76b1); }
  to { rotate: 16deg; filter: brightness(1.4) drop-shadow(0 0 9px #ffb5da); }
}

@keyframes projectile-bat {
  from { scale: 0.88 0.78; filter: drop-shadow(0 0 4px #9860d8); }
  to { scale: 1.12 1.18; filter: brightness(1.35) drop-shadow(0 0 10px #d7a0ff); }
}

@keyframes projectile-soulfire {
  from { filter: brightness(1.05) drop-shadow(0 0 3px #75ffd5) drop-shadow(0 0 7px #29b9ad); }
  to { filter: brightness(1.5) drop-shadow(0 0 8px #afffe9) drop-shadow(0 0 14px #29b9ad); }
}

@keyframes projectile-rune {
  to { rotate: 360deg; filter: brightness(1.45) drop-shadow(0 0 10px #ee79ff); }
}

@keyframes projectile-thorn {
  from { rotate: -10deg; filter: drop-shadow(0 0 3px #5ca543) drop-shadow(0 0 6px #c72f40); }
  to { rotate: 10deg; filter: brightness(1.4) drop-shadow(0 0 8px #c5ff83); }
}

@media (prefers-reduced-motion: reduce) {
  .player.is-shooting .pixel-weapon {
    animation-duration: 0.01ms !important;
  }

  .power-effect {
    animation-duration: 0.01ms !important;
  }
}

/* HUD en verre sombre, accordé aux décors réalistes. */
.game-hud,
.combat-slot,
.controls-hint,
.round-message,
.wave-countdown {
  border: 1px solid rgb(232 190 120 / 0.28);
  background: linear-gradient(180deg, rgb(28 22 30 / 0.72), rgb(12 10 16 / 0.82));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 230 180 / 0.12);
  color: #f1e3c8;
  backdrop-filter: blur(6px) saturate(1.2);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
}

.timer {
  color: #ffe2a8;
}

.round-message {
  letter-spacing: 0.04em;
}

.wave-countdown-number {
  color: #ffd98f;
  text-shadow: 0 0 18px rgb(255 160 60 / 0.55), 0 3px 8px #000c;
}

.game-over {
  background: radial-gradient(ellipse at 50% 45%, rgb(40 12 18 / 0.7), rgb(6 4 8 / 0.9));
  backdrop-filter: blur(3px) grayscale(0.4);
}

.timer-label,
.wave-display,
.combat-slot-kicker,
.combat-slot-detail {
  color: #bfae90;
}

.timer-urgent {
  color: #ff5a4a;
}

.player-health {
  border: 1px solid rgb(0 0 0 / 0.7);
  background: rgb(40 10 14 / 0.85);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.7);
}

.player-health-fill {
  background: linear-gradient(180deg, #8ee08a, #3f9c4a);
}

.player-health-fill.health-critical {
  background: linear-gradient(180deg, #ff7b6b, #b3241c);
}

.sound-toggle {
  border: 1px solid rgb(232 190 120 / 0.3);
  background: rgb(255 240 210 / 0.08);
  color: #eedcb8;
}

.sound-toggle:hover {
  background: rgb(255 240 210 / 0.18);
}

.player-name-display {
  border: 1px solid rgb(160 200 150 / 0.35);
  background: rgb(60 90 60 / 0.35);
  color: #d8ecd0;
}

.hud-coins {
  border: 1px solid rgb(255 200 90 / 0.55);
  background: linear-gradient(180deg, rgb(255 205 100 / 0.32), rgb(170 110 30 / 0.4));
  box-shadow: 0 0 10px rgb(255 180 60 / 0.25);
  color: #ffe6a6;
}

.combat-boost-slot.is-recharging {
  background: linear-gradient(180deg, rgb(40 36 40 / 0.72), rgb(20 18 22 / 0.85));
}

.combat-power-slot {
  background: linear-gradient(180deg, rgb(24 40 56 / 0.74), rgb(10 16 26 / 0.85));
  border-color: rgb(140 210 255 / 0.3);
}

/* Atmosphère réaliste : éclairage, brume, particules, vignettage et grain. */
.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.atmosphere > * {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.atmosphere-light {
  background:
    radial-gradient(
      circle at var(--fog-x) var(--fog-y),
      var(--lantern) 0,
      rgb(255 150 80 / 0.22) calc(var(--fog-radius) * 0.75),
      transparent calc(var(--fog-radius) * 1.4)
    ),
    linear-gradient(180deg, var(--ambient-top), var(--ambient-bottom));
  mix-blend-mode: soft-light;
  animation: lantern-flicker 4.2s ease-in-out infinite;
}

.atmosphere-mist {
  inset: -25%;
  background:
    radial-gradient(ellipse 22% 12% at 18% 30%, var(--mist), transparent 70%),
    radial-gradient(ellipse 28% 14% at 62% 22%, var(--mist), transparent 70%),
    radial-gradient(ellipse 26% 13% at 80% 62%, var(--mist), transparent 70%),
    radial-gradient(ellipse 30% 15% at 35% 78%, var(--mist), transparent 70%);
  mix-blend-mode: screen;
  animation: mist-drift 46s ease-in-out infinite alternate;
}

.atmosphere-mist-front {
  opacity: 0.75;
  transform: scale(1.3) rotate(180deg);
  animation-duration: 31s;
  animation-direction: alternate-reverse;
}

.atmosphere-particle {
  position: absolute;
  top: -6%;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 0.62);
  border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, #e48a33, #8c3d16);
  box-shadow: inset -1px -1px 0 rgb(0 0 0 / 0.3);
  opacity: 0.85;
  animation: leaf-fall var(--duration) linear var(--delay) infinite;
}

.atmosphere-particle:nth-child(3n) {
  background: linear-gradient(135deg, #c9a03c, #6f4415);
}

.atmosphere-particle:nth-child(4n) {
  background: linear-gradient(135deg, #b34d2a, #5a2010);
}

.arena[data-wave="3"] .atmosphere-particle,
.arena[data-wave="5"] .atmosphere-particle,
.arena-throne-room .atmosphere-particle {
  top: auto;
  bottom: -4%;
  width: calc(var(--size) * 0.35);
  height: calc(var(--size) * 0.35);
  border-radius: 50%;
  background: #e8a6ff;
  box-shadow: 0 0 6px #c25bff, 0 0 14px #8b2fd6;
  animation-name: ember-rise;
}

.arena-throne-room .atmosphere-particle {
  background: #ffcf7a;
  box-shadow: 0 0 6px #ff8a2b, 0 0 14px #e0401d;
}

.atmosphere-vignette {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgb(4 3 10 / 0.42) 82%, rgb(2 2 6 / 0.78) 100%);
}

.atmosphere-grain {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
  animation: film-grain 0.6s steps(3) infinite;
}

.damage-vignette {
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgb(170 10 20 / 0.55) 85%, rgb(110 0 10 / 0.85) 100%);
  opacity: 0;
}

.damage-vignette.is-active {
  animation: damage-pulse 0.55s ease-out;
}

.arena.is-shaking {
  animation: camera-shake 0.3s linear;
}

.player::before {
  position: absolute;
  z-index: -1;
  bottom: 4px;
  left: 50%;
  width: 52px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.25) 55%, transparent 72%);
  content: "";
  transform: translateX(-50%);
}

.enemy-shadow {
  background: radial-gradient(ellipse, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.25) 55%, transparent 72%);
  filter: none;
}

.enemy-boss .enemy-shadow {
  bottom: -14%;
  left: 4%;
  width: 92%;
  height: 20%;
}

.enemy-minion .enemy-shadow {
  bottom: -18%;
  left: 6%;
  width: 88%;
  height: 22%;
}

@keyframes lantern-flicker {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.93; }
  38% { opacity: 1; }
  61% { opacity: 0.9; }
  64% { opacity: 0.98; }
}

@keyframes mist-drift {
  from { translate: -6% -2%; }
  to { translate: 6% 3%; }
}

@keyframes leaf-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--drift), 28cqw) rotate(140deg); }
  50% { transform: translate(0, 56cqw) rotate(260deg); }
  75% { transform: translate(calc(var(--drift) * -1), 84cqw) rotate(400deg); }
  100% { transform: translate(0, 112cqw) rotate(540deg); }
}

@keyframes ember-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.95; }
  50% { transform: translate(var(--drift), -30cqw); }
  85% { opacity: 0.6; }
  100% { transform: translate(calc(var(--drift) * -0.5), -60cqw); opacity: 0; }
}

@keyframes film-grain {
  0% { translate: 0 0; }
  33% { translate: -7% 4%; }
  66% { translate: 5% -6%; }
  100% { translate: -3% 7%; }
}

@keyframes damage-pulse {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes camera-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -2px 1px; }
  40% { translate: 2px -1px; }
  60% { translate: -1px -1px; }
  80% { translate: 1px 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-light,
  .atmosphere-mist,
  .atmosphere-grain,
  .atmosphere-particle,
  .arena.is-shaking {
    animation: none;
  }

  .atmosphere-particle {
    display: none;
  }
}

/* Boutique : vitrine de promos, rayons à onglets et cartes d'articles. */
.menu-panel:has(#shop-screen:not([hidden])) {
  width: min(1120px, 100%);
}

.store-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 6px 0 14px;
}

.store-countdown {
  color: #ffad4f;
  font-size: 0.78rem;
  font-weight: 900;
}

.store-featured {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgb(255 150 60 / 0.45);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 10% 0%, rgb(255 120 40 / 0.22), transparent 55%),
    linear-gradient(160deg, rgb(70 30 40 / 0.65), rgb(30 18 34 / 0.75));
  box-shadow: inset 0 0 30px rgb(0 0 0 / 0.35);
}

.store-title {
  margin: 0 0 4px;
  color: #fff1d4;
  font-size: 1.1rem;
}

.store-tabs {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgb(18 12 22 / 0.92);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.35);
}

.store-tab {
  padding: 8px 14px;
  border: 1px solid rgb(232 190 120 / 0.25);
  border-radius: 999px;
  background: rgb(255 240 210 / 0.06);
  color: #e9d8c0;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  transition: background 0.15s ease, transform 0.15s ease;
}

.store-tab:hover {
  background: rgb(255 240 210 / 0.16);
  transform: translateY(-1px);
}

.store-tab[aria-selected="true"] {
  border-color: #ffad4f;
  background: linear-gradient(180deg, #ffad4f, #e65f27);
  color: #29171a;
}

.store-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.store-toolbar .shop-category-note {
  flex: 1 1 260px;
  margin: 0;
}

.store-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e9d8c0;
  font-size: 0.78rem;
  font-weight: 800;
}

.store-filter select {
  padding: 4px 8px;
  border: 1px solid #a65535;
  border-radius: 8px;
  background: #211923;
  color: #fff1dc;
  font: inherit;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.store-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100%;
  padding: 12px;
  border: 1px solid rgb(232 160 90 / 0.45);
  border-radius: 14px;
  background: linear-gradient(160deg, #3d2738, #241a2b);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.45), 0 0 18px rgb(255 150 60 / 0.18);
}

.store-card-featured {
  border-color: #ff9a3c;
  background: linear-gradient(160deg, #57303a, #2e1c2c);
}

.store-card-owned {
  opacity: 0.88;
}

.store-card-equipped {
  border-color: #7fe08a;
  box-shadow: 0 0 0 2px rgb(127 224 138 / 0.35), 0 6px 16px rgb(0 0 0 / 0.35);
}

.store-card-locked {
  filter: grayscale(0.6);
  opacity: 0.7;
}

.store-card.rarity-violette { border-color: #b67be0; }
.store-card.rarity-orange { border-color: #ef9a5b; }
.store-card.rarity-doree {
  border-color: #f2c94c;
  background: linear-gradient(160deg, #4d3a22, #2a1d1a);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.25), 0 6px 16px rgb(0 0 0 / 0.35);
}

.store-badges {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.store-badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.store-badge-promo { background: #e2382f; color: #fff; }
.store-badge-free { background: #3fbf5f; color: #08200f; }
.store-badge-halloween { background: #ff8a1e; color: #2a1206; }
.store-badge-equipped { background: #7fe08a; color: #0d2a12; }
.store-badge-owned { background: rgb(255 255 255 / 0.18); color: #f1e3c8; }

.store-preview {
  display: grid;
  height: 96px;
  place-items: center;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 85%, rgb(238 129 38 / 0.3) 0 40%, transparent 45%),
    linear-gradient(145deg, #1d1524, #34243a);
}

.store-preview .shop-item-icon {
  font-size: 2.6rem;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.6));
}

.store-card h3 {
  margin: 0;
  color: #ffcb91;
  font-size: 0.95rem;
}

.store-card p {
  flex: 1;
  margin: 0;
  color: #eadce5;
  font-size: 0.74rem;
}

.store-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.25);
  font-size: 0.7rem;
}

.store-stats dt {
  color: #bfae90;
  font-weight: 800;
}

.store-stats dd {
  margin: 0;
  color: #fff1dc;
  font-weight: 900;
  text-align: right;
}

.store-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}

.store-price {
  color: #ffd98f;
  font-size: 0.95rem;
}

.store-price s {
  color: #9d8a7a;
  font-size: 0.75rem;
}

.store-equip-button {
  background: linear-gradient(180deg, #8fd88f, #3f9c4a);
  color: #0d2a12;
}

.store-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed rgb(232 190 120 / 0.4);
  border-radius: 12px;
  color: #dfd0dd;
  text-align: center;
}

/* Personnages réalistes : héros, armes, boss et sbires détourés. */
.player .player-art > .hero-pixel-art {
  display: none;
}

.player .player-art > .hero-real,
.hero-real {
  position: absolute;
  top: -10%;
  left: -6%;
  display: block;
  width: 112%;
  height: 114%;
  pointer-events: none;
  transform-origin: 50% 90%;
  transition: scale 0.16s ease;
}

.hero-real-body,
.hero-real-weapon {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hero-real-body {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: 50% 100%;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.6)) saturate(0.95);
}

.hero-real-weapon {
  z-index: 1;
  right: -10%;
  bottom: 26%;
  width: 48%;
  height: 48%;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.65));
  transform: rotate(-18deg);
  transform-origin: 30% 80%;
}

.hero-real-weapon[hidden] {
  display: none;
}

.player.is-facing-left .hero-real {
  scale: -1 1;
}

.player.is-dodging .hero-real {
  animation: hero-real-dodge 0.24s ease-out;
  filter: drop-shadow(0 0 5px #a8e5dc) drop-shadow(0 0 9px #fff7ce);
}

.player.boost-vitesse .hero-real {
  filter: drop-shadow(0 0 5px #7be8c5) drop-shadow(0 0 9px #fff7ce);
}

.player.boost-bouclier .hero-real {
  filter: drop-shadow(0 0 6px #78bfff) drop-shadow(0 0 11px #fff7ce);
}

.player.boost-puissance .hero-real {
  filter: drop-shadow(0 0 6px #ff914a) drop-shadow(0 0 11px #ffd36b);
}

.skin-fantome .hero-real-body {
  filter: drop-shadow(0 0 6px #9fdcff99) drop-shadow(0 2px 2px rgb(0 0 0 / 0.5));
}

.skin-demon .hero-real-body {
  filter: drop-shadow(0 0 5px #ff5a2a88) drop-shadow(0 2px 2px rgb(0 0 0 / 0.6));
}

@keyframes hero-real-walk {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-3px) rotate(2deg); }
}

@keyframes hero-real-shot {
  0% { transform: rotate(-18deg) translateX(0); }
  35% { transform: rotate(-30deg) translateX(-4px) scale(0.94); filter: brightness(1.5) drop-shadow(0 0 6px #ffd27a); }
  100% { transform: rotate(-18deg) translateX(0); }
}

@keyframes hero-real-dodge {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-6px) scale(0.92) rotate(-8deg); }
  100% { transform: translateY(0) scale(1); }
}

.character-preview .hero-real {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.character-preview .hero-real-weapon {
  display: none;
}

.loadout-preview #loadout-preview-content .character-preview .hero-real {
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
}

.loadout-preview #loadout-preview-content .character-preview .hero-real-weapon:not([hidden]) {
  display: block;
}

.store-preview .character-preview {
  width: 70px;
  height: 88px;
}

.shop-item-art {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.6));
  transform: rotate(-8deg);
}

.enemy-realistic > :not(.enemy-health):not(.enemy-label):not(.enemy-shadow):not(.enemy-boss-art):not(.enemy-minion-art) {
  display: none;
}

.enemy-realistic::before,
.enemy-realistic::after {
  display: none;
}

.enemy-realistic.enemy-minion {
  filter: none;
}

.enemy-boss-art,
.enemy-minion-art {
  image-rendering: auto;
  transition: scale 0.18s ease;
}

.enemy-facing-left .enemy-boss-art,
.enemy-facing-left .enemy-minion-art {
  scale: -1 1;
}

.enemy-realistic:not(.enemy-boss):not(.enemy-hit):not(.enemy-attacking) {
  animation: none;
}

.enemy-minion-art-grunt,
.enemy-minion-art-scout {
  width: 168%;
  height: 168%;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.7)) drop-shadow(0 0 5px #ff8a2a77);
}

.enemy-minion-art-brute {
  width: 160%;
  height: 160%;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.75)) drop-shadow(0 0 6px #ff7a2a77);
}

.enemy-realistic.enemy-winding-up .enemy-minion-art,
.enemy-realistic.enemy-winding-up .enemy-boss-art {
  filter: brightness(1.35) drop-shadow(0 0 7px #ff5a3c);
}


/* Mouvements du héros : respiration, marche, course, esquive. */
.player .hero-real-body {
  transform-origin: 50% 100%;
  animation: hero-breathe 2.6s ease-in-out infinite;
}

.player.is-walking .hero-real {
  animation: hero-walk 0.42s linear infinite;
}

.player.is-walking .hero-real-body {
  animation: hero-step 0.42s ease-in-out infinite;
}

.player.is-running .hero-real {
  animation: hero-run 0.28s linear infinite;
}

.player.is-running .hero-real-body {
  animation: hero-stride 0.28s ease-in-out infinite;
}

.player.is-dodging .hero-real {
  animation: hero-real-dodge 0.24s ease-out;
}

@keyframes hero-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 1.028); }
}

@keyframes hero-walk {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25%, 75% { transform: translateY(-2.5px) rotate(0deg); }
  50% { transform: translateY(0) rotate(2deg); }
}

@keyframes hero-step {
  0%, 50%, 100% { transform: scale(1.025, 0.975); }
  25%, 75% { transform: scale(0.99, 1.02); }
}

@keyframes hero-run {
  0%, 100% { transform: translateY(0) rotate(6deg) skewX(-3deg); }
  25%, 75% { transform: translateY(-5px) rotate(8deg) skewX(0deg); }
  50% { transform: translateY(0) rotate(6deg) skewX(3deg); }
}

@keyframes hero-stride {
  0%, 50%, 100% { transform: scale(1.05, 0.94); }
  25%, 75% { transform: scale(0.97, 1.05); }
}

.run-dust {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(196 176 146 / 0.6), rgb(150 130 110 / 0.25) 55%, transparent 72%);
  pointer-events: none;
  translate: -50% -50%;
  animation: run-dust 0.6s ease-out forwards;
}

@keyframes run-dust {
  0% { opacity: 0.9; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--drift-x, 0), -9px) scale(2.3); }
}

/* Allures des boss et sbires (marche, dandinement, course, pas lourds, lévitation, bonds). */
.enemy-realistic :is(.enemy-boss-art, .enemy-minion-art) {
  transform-origin: 50% 85%;
  animation-delay: var(--gait-delay, 0s);
}

.enemy-realistic {
  --gait-scale: 1;
}

.enemy-realistic.enemy-boss {
  --gait-scale: 1.45;
}

.enemy-realistic:not(.enemy-boss)[data-ai="patrol"] {
  --gait-scale: 1.65;
}

.enemy-realistic:not(.enemy-boss)[data-ai="chase"] {
  --gait-scale: 0.72;
}

.enemy-realistic[data-gait="walk"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-walk calc(0.52s * var(--gait-scale)) linear infinite;
}

.enemy-realistic[data-gait="waddle"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-waddle calc(0.46s * var(--gait-scale)) ease-in-out infinite;
}

.enemy-realistic[data-gait="skitter"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-skitter calc(0.26s * var(--gait-scale)) linear infinite;
}

.enemy-realistic[data-gait="stomp"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-stomp calc(0.78s * var(--gait-scale)) ease-in-out infinite;
}

.enemy-realistic[data-gait="float"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-float calc(2.2s * var(--gait-scale)) ease-in-out infinite;
}

.enemy-realistic[data-gait="hop"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-hop calc(0.5s * var(--gait-scale)) ease-in-out infinite;
}

.enemy-realistic[data-gait="hop"] .enemy-shadow {
  animation: shadow-hop calc(0.5s * var(--gait-scale)) ease-in-out infinite;
  animation-delay: var(--gait-delay, 0s);
}

.enemy-realistic[data-gait="float"] .enemy-shadow {
  animation: shadow-float calc(2.2s * var(--gait-scale)) ease-in-out infinite;
  animation-delay: var(--gait-delay, 0s);
}

.enemy-realistic.enemy-winding-up :is(.enemy-boss-art, .enemy-minion-art) {
  animation: gait-windup 0.12s ease-in-out infinite alternate;
}

@keyframes gait-walk {
  0%, 100% { rotate: -3deg; translate: 0 0; }
  25%, 75% { rotate: 0deg; translate: 0 -3px; }
  50% { rotate: 3deg; translate: 0 0; }
}

@keyframes gait-waddle {
  0%, 100% { rotate: -7deg; translate: -1px 0; }
  50% { rotate: 7deg; translate: 1px 0; }
  25%, 75% { translate: 0 -3px; }
}

@keyframes gait-skitter {
  0%, 100% { rotate: -2deg; translate: 0 0; }
  25% { rotate: 1deg; translate: 1px -2px; }
  50% { rotate: 2deg; translate: 0 0; }
  75% { rotate: -1deg; translate: -1px -2px; }
}

@keyframes gait-stomp {
  0%, 100% { rotate: -2.5deg; translate: 0 0; }
  20% { rotate: 0deg; translate: 0 -6px; }
  40% { rotate: 2.5deg; translate: 0 1px; }
  50% { rotate: 2.5deg; translate: 0 0; }
  70% { rotate: 0deg; translate: 0 -6px; }
  90% { rotate: -2.5deg; translate: 0 1px; }
}

@keyframes gait-float {
  0%, 100% { rotate: -2deg; translate: 0 2px; }
  50% { rotate: 2deg; translate: 0 -8px; }
}

@keyframes gait-hop {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  40% { rotate: -5deg; translate: 0 -11px; }
  60% { rotate: 5deg; translate: 0 -11px; }
}

@keyframes shadow-hop {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 0.7; opacity: 0.6; }
}

@keyframes shadow-float {
  0%, 100% { scale: 1; opacity: 0.9; }
  50% { scale: 0.78; opacity: 0.55; }
}

@keyframes gait-windup {
  from { rotate: -4deg; translate: -2px -1px; }
  to { rotate: 4deg; translate: 2px -3px; }
}

/* Mort des ennemis et dissipation des sbires quand leur boss tombe. */
.enemy.enemy-dying {
  z-index: 2;
  pointer-events: none;
  animation: enemy-die 0.65s ease-in forwards;
}

.enemy-realistic.enemy-dying :is(.enemy-boss-art, .enemy-minion-art) {
  animation: enemy-die-art 0.65s ease-in forwards;
}

.enemy-realistic.enemy-dying[data-gait="float"] :is(.enemy-boss-art, .enemy-minion-art) {
  animation: enemy-die-float 0.65s ease-in forwards;
}

.enemy.enemy-banished {
  pointer-events: none;
  animation: enemy-banish 0.85s var(--banish-delay, 0s) ease-in forwards;
}

.enemy-realistic.enemy-banished :is(.enemy-boss-art, .enemy-minion-art) {
  animation: enemy-banish-art 0.85s var(--banish-delay, 0s) ease-in forwards;
}

.enemy-banished .enemy-health,
.enemy-banished .enemy-label {
  display: none;
}

@keyframes enemy-die {
  0% { opacity: 1; filter: brightness(2.4); }
  25% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0; filter: grayscale(1) brightness(0.4); }
}

@keyframes enemy-die-art {
  0% { rotate: 0deg; translate: 0 0; }
  100% { rotate: 82deg; translate: 0 16%; }
}

@keyframes enemy-die-float {
  0% { translate: 0 0; }
  100% { translate: 0 -30%; }
}

@keyframes enemy-banish {
  0% { opacity: 1; filter: none; }
  40% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 10px #c88bff); }
  100% { opacity: 0; filter: brightness(2.6) blur(3px) drop-shadow(0 0 18px #c88bff); }
}

@keyframes enemy-banish-art {
  0% { transform: translate(-50%, -50%) scale(1); rotate: 0deg; }
  100% { transform: translate(-50%, -80%) scale(0.35); rotate: 30deg; }
}

/* Apparition des boss : tombe, épouvantail, vortex, scène du clown, trône. */
.boss-spawning .enemy-health,
.boss-spawning .enemy-label {
  opacity: 0;
}

.enemy-realistic.boss-spawning.boss-spawn-grave .enemy-boss-art {
  animation: boss-spawn-grave 1.6s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

.enemy-realistic.boss-spawning.boss-spawn-scarecrow .enemy-boss-art {
  animation: boss-spawn-scarecrow 1.6s cubic-bezier(0.25, 0.9, 0.3, 1.1) both;
}

.enemy-realistic.boss-spawning.boss-spawn-vortex .enemy-boss-art {
  animation: boss-emerge 1.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.enemy-realistic.boss-spawning.boss-spawn-stage .enemy-boss-art {
  animation: boss-spawn-stage 1.6s cubic-bezier(0.35, 0.1, 0.4, 1) both;
}

.enemy-realistic.boss-spawning.boss-spawn-throne .enemy-boss-art {
  animation: boss-spawn-throne 1.6s ease-out both;
}

@keyframes boss-spawn-grave {
  0% { opacity: 0.3; transform: translate(-50%, 40%); clip-path: inset(0 0 90% 0); filter: brightness(0.3) drop-shadow(0 0 14px #77d7eb); }
  20% { opacity: 1; transform: translate(-50%, 30%); clip-path: inset(0 0 80% 0); }
  65% { transform: translate(-50%, -54%); clip-path: inset(0 0 0 0); filter: brightness(1.4) drop-shadow(0 0 16px #77d7eb); }
  80% { transform: translate(-50%, -47%); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translate(-50%, -50%); clip-path: inset(0 0 0 0); }
}

@keyframes boss-spawn-scarecrow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3, 0.05) rotate(-80deg); filter: brightness(2) drop-shadow(0 0 18px #ff9b2c); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.08, 1.18) rotate(12deg); }
  65% { transform: translate(-50%, -50%) scale(0.95, 0.98) rotate(-6deg); }
  82% { transform: translate(-50%, -50%) scale(1.02) rotate(3deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes boss-spawn-stage {
  0% { opacity: 0; transform: translate(-50%, -260%) scale(0.65) rotate(0deg); filter: brightness(1.8) drop-shadow(0 0 16px #ffe27a); }
  12% { opacity: 1; transform: translate(-50%, -280%) scale(0.7) rotate(-40deg); }
  62% { transform: translate(-50%, -70%) scale(1) rotate(-330deg); }
  74% { transform: translate(-50%, -44%) scale(1.12, 0.86) rotate(-360deg); }
  86% { transform: translate(-50%, -56%) scale(0.96, 1.06) rotate(-360deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-360deg); }
}

@keyframes boss-spawn-throne {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: brightness(3) blur(10px) drop-shadow(0 0 30px #ff5ad8); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(0.94); filter: brightness(1.6) blur(1px) drop-shadow(0 0 18px #ff5ad8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.boss-spawn-fx {
  --fx-color: #c25bff;
  --fx-glow: rgb(194 91 255 / 0.5);
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}

.boss-spawn-fx-grave { --fx-color: #a9875c; --fx-glow: rgb(119 215 235 / 0.5); }
.boss-spawn-fx-scarecrow { --fx-color: #ff9b2c; --fx-glow: rgb(255 140 40 / 0.5); }
.boss-spawn-fx-stage { --fx-color: #ff4f9a; --fx-glow: rgb(255 236 150 / 0.5); }
.boss-spawn-fx-throne { --fx-color: #ff5ad8; --fx-glow: rgb(255 90 216 / 0.45); }

.boss-spawn-ring,
.boss-spawn-glow {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  translate: -50% -50%;
}

.boss-spawn-ring {
  width: 230px;
  height: 115px;
  border: 3px solid var(--fx-color);
  box-shadow: 0 0 18px var(--fx-color), inset 0 0 18px var(--fx-color);
  animation: spawn-ring 1.6s ease-out forwards;
}

.boss-spawn-glow {
  width: 180px;
  height: 90px;
  background: radial-gradient(ellipse, var(--fx-glow) 0, transparent 70%);
  animation: spawn-glow 2.1s ease-out forwards;
}

.boss-spawn-fx-grave .boss-spawn-glow {
  background:
    radial-gradient(ellipse, rgb(30 20 12 / 0.85) 0 26%, transparent 44%),
    radial-gradient(ellipse, var(--fx-glow) 0, transparent 70%);
}

.boss-spawn-fx-stage .boss-spawn-glow,
.boss-spawn-fx-throne .boss-spawn-glow {
  width: 170px;
  height: 320px;
  border-radius: 0;
  translate: -50% -88%;
  background: linear-gradient(180deg, transparent, var(--fx-glow) 70%, rgb(255 255 255 / 0.4));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.boss-spawn-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--fx-color);
  box-shadow: 0 0 8px var(--fx-color);
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  animation: spawn-particle 1.3s var(--delay, 0s) ease-out forwards;
}

.boss-spawn-particle:not(:empty) {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
}

.boss-spawn-fx-stage .boss-spawn-particle:empty {
  width: 8px;
  height: 5px;
  border-radius: 1px;
  background: hsl(var(--hue) 90% 62%);
  box-shadow: none;
}

.boss-spawn-fx-stage .boss-spawn-particle:not(:empty) {
  color: #ffe27a;
  text-shadow: 0 0 8px #ffd34a;
}

.boss-spawn-fx-grave .boss-spawn-particle {
  border-radius: 30% 60% 40% 50%;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.6);
}

@keyframes spawn-ring {
  0% { opacity: 0; scale: 0.1; }
  20% { opacity: 1; }
  100% { opacity: 0; scale: 1.45; }
}

@keyframes spawn-glow {
  0% { opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes spawn-particle {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scale(1); }
}

.arena.arena-quake {
  animation: arena-quake 0.26s ease-out;
}

@keyframes arena-quake {
  0%, 100% { translate: 0 0; }
  20% { translate: -2px 1px; }
  40% { translate: 1.5px -1px; }
  60% { translate: -1px 1px; }
  80% { translate: 1px 0; }
}

/* HUD : équipement en colonne en haut à gauche, cœurs en bas à gauche, temps en haut à droite, sons en bas à droite. */
.hud-timer,
.hud-hearts,
.hud-sound {
  position: absolute;
  z-index: 10;
  border: 1px solid rgb(232 190 120 / 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(28 22 30 / 0.72), rgb(12 10 16 / 0.82));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 230 180 / 0.12);
  color: #f1e3c8;
  backdrop-filter: blur(6px) saturate(1.2);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
}

.hud-timer {
  top: 14px;
  right: 14px;
  display: grid;
  min-width: 112px;
  justify-items: end;
  gap: 2px;
  padding: 8px 14px;
  pointer-events: none;
}

.hud-timer .timer {
  min-width: 0;
  font-size: 1.75rem;
  line-height: 1;
  text-align: right;
}

.run-time {
  color: #bfae90;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hud-hearts {
  bottom: 14px;
  left: 14px;
  display: grid;
  gap: 4px;
  padding: 8px 11px 7px;
  pointer-events: none;
}

.hud-hearts-row {
  display: flex;
  gap: 5px;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 2px 3px rgb(0 0 0 / 0.7));
}

.hud-heart {
  position: relative;
  width: 30px;
  height: 28px;
  overflow: hidden;
  background: rgb(58 22 28 / 0.95);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 20 18.5'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 20 18.5'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / 100% 100% no-repeat;
}

.hud-heart-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--fill, 1) * 100%);
  background: linear-gradient(180deg, #ff8a80, #e0222e 55%, #8e0f18);
  transition: width 0.25s ease-out;
}

.hud-heart::after {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 26%;
  height: 22%;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.42);
  content: "";
}

.hud-heart.is-hit {
  animation: heart-hit 0.45s ease-out;
}

.hud-hearts.is-critical .hud-heart:not(.is-empty) {
  animation: heart-beat 0.8s ease-in-out infinite;
}

.hud-hearts-value {
  color: #f1d9b5;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@keyframes heart-hit {
  0% { scale: 1; filter: brightness(1); }
  30% { scale: 1.3; filter: brightness(2); }
  100% { scale: 1; filter: brightness(1); }
}

@keyframes heart-beat {
  0%, 100% { scale: 1; }
  15% { scale: 1.18; }
  30% { scale: 1; }
  45% { scale: 1.12; }
}

.hud-sound {
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 5px;
  padding: 7px;
  pointer-events: auto;
}

.hud-sound .sound-toggle {
  padding: 5px 10px;
  font-size: 0.7rem;
  text-align: left;
}

.hud-sound .sound-toggle[aria-pressed="false"] {
  color: #b39f86;
  opacity: 0.72;
}

.hud-sound.is-muted #sound-toggle,
.hud-sound.is-muted #music-toggle {
  opacity: 0.4;
}

.arena .controls-hint {
  right: auto;
  bottom: 14px;
  left: 50%;
  width: max-content;
  max-width: min(560px, calc(100% - 520px));
  padding: 6px 12px;
  font-size: 0.7rem;
  transform: translateX(-50%);
}

.arena .combat-loadout {
  top: 14px;
  bottom: auto;
  left: 14px;
  display: flex;
  width: auto;
  flex-direction: column;
  gap: 9px;
}

.arena .combat-slot {
  display: grid;
  width: 60px;
  height: 60px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  place-items: center;
  border-radius: 12px;
}

.arena .combat-slot-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.7));
}

.combat-weapon-slot .combat-slot-icon {
  display: none;
}

.combat-slot-art {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.75));
  pointer-events: none;
  rotate: -12deg;
}

.combat-slot-key,
.combat-slot-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

.combat-slot-key {
  top: -6px;
  right: -6px;
  width: 19px;
  height: 19px;
  border: 1px solid #5a3a14;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe39a, #e7a73c);
  color: #3a240c;
  font-size: 0.62rem;
  text-shadow: none;
}

.combat-slot-badge {
  right: -7px;
  bottom: -6px;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid rgb(232 190 120 / 0.45);
  border-radius: 8px;
  background: #1b141d;
  color: #ffe2a8;
  font-size: 0.58rem;
}

.combat-slot-badge:empty {
  display: none;
}

.combat-slot-timer {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 1000;
  text-shadow: 0 0 4px #000, 0 2px 3px #000;
  pointer-events: none;
}

.combat-slot-timer:empty {
  display: none;
}

.arena .combat-boost-slot.is-recharging::after,
.arena .combat-power-slot.is-recharging::after {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background: conic-gradient(transparent 0 calc(var(--boost-cooldown-progress, 1) * 360deg), rgb(0 0 0 / 0.62) 0);
  transform: none;
}

.combat-slot.is-empty {
  opacity: 0.55;
}

.combat-boost-slot.is-active {
  border-color: #7be8c5;
  animation: slot-active 0.9s ease-in-out infinite alternate;
}

@keyframes slot-active {
  from { box-shadow: 0 0 6px #7be8c588, 0 8px 24px rgb(0 0 0 / 0.45); }
  to { box-shadow: 0 0 16px #7be8c5, 0 8px 24px rgb(0 0 0 / 0.45); }
}

.combat-slot-tip {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: calc(100% + 10px);
  display: grid;
  width: max-content;
  max-width: 220px;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid rgb(232 190 120 / 0.28);
  border-radius: 9px;
  background: rgb(14 11 18 / 0.92);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.combat-slot:hover .combat-slot-tip,
.combat-slot:focus-visible .combat-slot-tip {
  opacity: 1;
  transform: translate(0, -50%);
}

.arena .combat-slot-name {
  color: #f6e6c6;
  font-size: 0.74rem;
}

@media (max-width: 760px) {
  .arena .controls-hint {
    display: none;
  }

  .hud-timer {
    min-width: 0;
    padding: 6px 10px;
  }

  .hud-timer .timer {
    font-size: 1.3rem;
  }

  .hud-heart {
    width: 24px;
    height: 22px;
  }

  .arena .combat-slot {
    width: 50px;
    height: 50px;
  }

  .combat-slot-art {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player .hero-real,
  .player .hero-real-body,
  .player .hero-real-weapon,
  .enemy-realistic :is(.enemy-boss-art, .enemy-minion-art),
  .enemy-realistic .enemy-shadow,
  .arena.arena-quake,
  .hud-heart,
  .rig-part {
    animation: none !important;
  }
}

/* Squelette 2D : chaque sprite est découpé en tronc, bras et jambes qui bougent séparément. */
.hero-real-body,
.enemy-boss-art,
.enemy-minion-art {
  container-type: size;
}

.rig {
  --rig-ratio: 0.55;
  --rig-dur: 0.6s;
  position: absolute;
  left: 50%;
  display: block;
  width: min(100cqw, calc(100cqh * var(--rig-ratio)));
  aspect-ratio: var(--rig-ratio);
  translate: -50% 0;
  pointer-events: none;
}

.hero-real-body > .rig {
  bottom: 0;
}

:is(.enemy-boss-art, .enemy-minion-art) > .rig {
  top: 50%;
  translate: -50% -50%;
}

.rig-part {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.rig-limbs .rig-torso {
  z-index: 2;
  clip-path: polygon(
    0 0, 100% 0, 100% var(--rig-shoulder), calc(var(--rig-arm-r) + var(--rig-overlap-r, 5%)) var(--rig-shoulder),
    calc(var(--rig-arm-r) + var(--rig-overlap-r, 5%)) var(--rig-hip), var(--rig-arm-r) calc(var(--rig-hip) + 4%),
    var(--rig-arm-l) calc(var(--rig-hip) + 4%), calc(var(--rig-arm-l) - var(--rig-overlap-l, 5%)) var(--rig-hip),
    calc(var(--rig-arm-l) - var(--rig-overlap-l, 5%)) var(--rig-shoulder), 0 var(--rig-shoulder)
  );
  transform-origin: 50% var(--rig-hip);
}

.rig-limbs .rig-leg-l {
  --side: 1;
  z-index: 1;
  clip-path: polygon(
    var(--rig-arm-l) var(--rig-hip), calc(var(--rig-split) + 1%) var(--rig-hip),
    calc(var(--rig-split) + 1%) 100%, 0 100%, 0 var(--rig-hand-l), var(--rig-arm-l) var(--rig-hand-l)
  );
  transform-origin: calc((var(--rig-arm-l) + var(--rig-split)) / 2) var(--rig-hip);
}

.rig-limbs .rig-leg-r {
  --side: -1;
  z-index: 1;
  clip-path: polygon(
    calc(var(--rig-split) - 1%) var(--rig-hip), var(--rig-arm-r) var(--rig-hip),
    var(--rig-arm-r) var(--rig-hand-r), 100% var(--rig-hand-r), 100% 100%, calc(var(--rig-split) - 1%) 100%
  );
  transform-origin: calc((var(--rig-split) + var(--rig-arm-r)) / 2) var(--rig-hip);
}

.rig-limbs .rig-arm-l {
  --side: 1;
  z-index: 3;
  clip-path: polygon(
    0 var(--rig-shoulder), calc(var(--rig-arm-l) + 1%) var(--rig-shoulder),
    calc(var(--rig-arm-l) + 1%) var(--rig-hand-l), 0 var(--rig-hand-l)
  );
  transform-origin: var(--rig-arm-l) var(--rig-pivot);
}

.rig-limbs .rig-arm-r {
  --side: -1;
  z-index: 3;
  clip-path: polygon(
    calc(var(--rig-arm-r) - 1%) var(--rig-shoulder), 100% var(--rig-shoulder),
    100% var(--rig-hand-r), calc(var(--rig-arm-r) - 1%) var(--rig-hand-r)
  );
  transform-origin: var(--rig-arm-r) var(--rig-pivot);
}

/* Héros : respiration au repos, marche et course avec bras opposés aux jambes, bras armé levé en visée. */
.player.is-walking:not(.is-shooting):not(.is-dodging) :is(.hero-real, .hero-real-body) {
  animation-duration: 0.6s;
}

.player.is-running:not(.is-shooting):not(.is-dodging) :is(.hero-real, .hero-real-body) {
  animation-duration: 0.4s;
}

.player.is-running .rig {
  --rig-dur: 0.4s;
}

.hero-real .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-idle 2.6s ease-in-out infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs .rig-leg-l {
  animation: rig-leg-walk var(--rig-dur) linear infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs .rig-leg-r {
  animation: rig-leg-walk var(--rig-dur) linear calc(var(--rig-dur) / -2) infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs .rig-arm-l {
  animation: rig-arm-walk var(--rig-dur) ease-in-out infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs .rig-arm-r {
  animation: rig-arm-walk var(--rig-dur) ease-in-out calc(var(--rig-dur) / -2) infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs .rig-torso {
  animation: rig-torso-walk var(--rig-dur) ease-in-out infinite;
}

.player.is-running .rig-limbs .rig-leg-l {
  animation-name: rig-leg-run;
}

.player.is-running .rig-limbs .rig-leg-r {
  animation-name: rig-leg-run;
}

.player.is-running .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation-name: rig-arm-run;
}

.player.is-dodging .rig-limbs .rig-part:is(.rig-leg-l, .rig-leg-r) {
  animation: rig-leg-tuck 0.24s ease-out;
}

/* Boss et sbires : le cycle des membres suit leur allure. */
.enemy-realistic .rig {
  --rig-dur: calc(0.52s * var(--gait-scale));
}

.enemy-realistic[data-gait="stomp"] .rig {
  --rig-dur: calc(0.78s * var(--gait-scale));
}

.enemy-realistic[data-gait="hop"] .rig {
  --rig-dur: calc(0.5s * var(--gait-scale));
}

.enemy-realistic[data-gait="float"] .rig {
  --rig-dur: calc(2.2s * var(--gait-scale));
}

.enemy-realistic .rig-limbs .rig-leg-l {
  animation: rig-leg-walk var(--rig-dur) linear var(--gait-delay, 0s) infinite;
}

.enemy-realistic .rig-limbs .rig-leg-r {
  animation: rig-leg-walk var(--rig-dur) linear calc(var(--gait-delay, 0s) - var(--rig-dur) / 2) infinite;
}

.enemy-realistic .rig-limbs .rig-arm-l {
  animation: rig-arm-walk var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic .rig-limbs .rig-arm-r {
  animation: rig-arm-walk var(--rig-dur) ease-in-out calc(var(--gait-delay, 0s) - var(--rig-dur) / 2) infinite;
}

.enemy-realistic .rig-limbs .rig-torso {
  animation: rig-torso-walk var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="skitter"] .rig-limbs :is(.rig-leg-l, .rig-leg-r) {
  animation-name: rig-leg-run;
}

.enemy-realistic[data-gait="skitter"] .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation-name: rig-arm-run;
}

.enemy-realistic[data-gait="stomp"] .rig-limbs :is(.rig-leg-l, .rig-leg-r) {
  animation-name: rig-leg-stomp;
}

.enemy-realistic[data-gait="stomp"] .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation-name: rig-arm-stomp;
}

.enemy-realistic[data-gait="hop"] .rig-limbs :is(.rig-leg-l, .rig-leg-r) {
  animation: rig-leg-hop var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="hop"] .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-hop var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="float"] .rig-limbs :is(.rig-leg-l, .rig-leg-r) {
  animation: rig-leg-float var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="float"] .rig-limbs :is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-float var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="float"] .rig-limbs .rig-torso {
  animation: none;
}

.enemy-realistic .rig-limbs.rig-wings :is(.rig-arm-l, .rig-arm-r) {
  animation: rig-wing-flap 0.42s ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic.enemy-winding-up .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-windup 0.12s ease-in-out infinite alternate;
}

.enemy-realistic.enemy-dying .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-death 0.5s ease-out forwards;
}

.enemy-realistic.enemy-dying .rig-limbs .rig-part:is(.rig-leg-l, .rig-leg-r) {
  animation: rig-leg-death 0.5s ease-in forwards;
}

.enemy-realistic.boss-spawning .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-rise 1.6s ease-out both;
}

.enemy-realistic.boss-spawning .rig-limbs .rig-part:is(.rig-leg-l, .rig-leg-r, .rig-torso) {
  animation: none;
}

@keyframes rig-arm-idle {
  0%, 100% { rotate: calc(var(--side) * 1deg); }
  50% { rotate: calc(var(--side) * 3.5deg); }
}

@keyframes rig-leg-walk {
  0%, 100% { rotate: -9deg; scale: 1 1; }
  55% { rotate: 8deg; scale: 1 1; }
  78% { rotate: -1deg; scale: 1 0.84; }
}

@keyframes rig-leg-run {
  0%, 100% { rotate: -20deg; scale: 1 0.95; }
  45% { rotate: 16deg; scale: 1 1; }
  68% { rotate: 6deg; scale: 1 0.7; }
  86% { rotate: -14deg; scale: 1 0.8; }
}

@keyframes rig-leg-stomp {
  0%, 100% { rotate: -8deg; scale: 1 1; }
  50% { rotate: 7deg; scale: 1 1; }
  74% { rotate: 0deg; scale: 1 0.76; }
}

@keyframes rig-leg-hop {
  0%, 100% { rotate: calc(var(--side) * 2deg); scale: 1 0.9; }
  18% { rotate: 0deg; scale: 1 1.04; }
  40%, 60% { rotate: calc(var(--side) * 12deg); scale: 1 0.8; }
  85% { rotate: 0deg; scale: 1 1.02; }
}

@keyframes rig-leg-float {
  0%, 100% { rotate: calc(var(--side) * 3deg); scale: 1 1; }
  50% { rotate: calc(var(--side) * -3deg); scale: 1 0.94; }
}

@keyframes rig-leg-tuck {
  50% { scale: 1 0.78; rotate: calc(var(--side) * 10deg); }
}

@keyframes rig-leg-death {
  to { rotate: calc(var(--side) * -10deg); scale: 1 0.78; }
}

@keyframes rig-arm-walk {
  0%, 100% { rotate: 7deg; scale: 1 1; }
  50% { rotate: -7deg; scale: 1 0.97; }
}

@keyframes rig-arm-run {
  0%, 100% { rotate: 18deg; scale: 1 0.9; }
  50% { rotate: -16deg; scale: 1 0.88; }
}

@keyframes rig-arm-stomp {
  0%, 100% { rotate: 7deg; }
  50% { rotate: -7deg; }
}

@keyframes rig-arm-hop {
  0%, 100% { rotate: calc(var(--side) * 4deg); }
  40%, 60% { rotate: calc(var(--side) * 38deg); }
}

@keyframes rig-arm-float {
  0%, 100% { rotate: calc(var(--side) * 4deg); }
  50% { rotate: calc(var(--side) * 16deg); }
}

@keyframes rig-wing-flap {
  0%, 100% { rotate: calc(var(--side) * -8deg); scale: 1 1; }
  50% { rotate: calc(var(--side) * 18deg); scale: 1 0.9; }
}

@keyframes rig-arm-windup {
  from { rotate: calc(var(--side) * 30deg); }
  to { rotate: calc(var(--side) * 46deg); }
}

@keyframes rig-arm-death {
  to { rotate: calc(var(--side) * 55deg); }
}

@keyframes rig-arm-rise {
  0% { rotate: calc(var(--side) * -4deg); }
  55% { rotate: calc(var(--side) * 50deg); }
  80% { rotate: calc(var(--side) * 42deg); }
  100% { rotate: 0deg; }
}

@keyframes rig-torso-walk {
  0%, 100% { rotate: 1.2deg; translate: 0 0; }
  25%, 75% { translate: 0 -1%; }
  50% { rotate: -1.2deg; translate: 0 0; }
}

/* Casier façon Fortnite : emplacements, sélection d'objets par rareté et personnage sur son socle. */
.menu-panel:has(#locker-screen:not([hidden])) {
  width: min(1180px, 100%);
  background:
    radial-gradient(ellipse at 78% 30%, #4a6bd655 0, transparent 55%),
    linear-gradient(160deg, #1b2a6b, #161a48 45%, #120f2e);
  box-shadow: 0 8px 0 #0b0a1f, 0 14px 34px #05040dcc, inset 0 0 0 2px #7d8cff44;
}

.locker-screen {
  --locker-yellow: #ffe95c;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  font-style: normal;
}

.locker-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 26px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgb(255 255 255 / 0.14);
}

.locker-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #0d0b26;
}

.locker-tabs {
  display: flex;
  gap: 4px;
}

.locker-tab {
  margin-bottom: -2px;
  padding: 8px 14px 9px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: rgb(255 255 255 / 0.62);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.locker-tab:hover {
  color: #fff;
}

.locker-tab.is-active {
  border-bottom-color: var(--locker-yellow);
  color: #fff;
}

.locker-tab:focus-visible,
.locker-tile:focus-visible {
  outline: 3px solid var(--locker-yellow);
  outline-offset: 2px;
}

.locker-loadout {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(220px, 290px);
  gap: 18px;
  align-items: start;
}

.locker-loadout[hidden],
.locker-upgrades[hidden],
.locker-workshop[hidden] {
  display: none;
}

.locker-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.locker-slots .locker-tile:first-child {
  grid-column: span 2;
  aspect-ratio: 2 / 1.25;
}

.locker-tile {
  --rarity-light: #9aa6b4;
  --rarity-dark: #3d4652;
  --rarity-edge: #b9c4d0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background:
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.07) 0 7px, transparent 7px 20px),
    radial-gradient(circle at 50% 36%, var(--rarity-light), var(--rarity-dark) 78%);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.14),
    inset 0 -5px 0 var(--rarity-edge),
    0 5px 12px rgb(0 0 0 / 0.45);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.locker-tile:hover {
  filter: brightness(1.12);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.4),
    inset 0 -5px 0 var(--rarity-edge),
    0 0 0 2px #fff,
    0 8px 18px rgb(0 0 0 / 0.5);
}

.locker-tile.is-selected,
.locker-tile.is-equipped {
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.4),
    inset 0 -5px 0 var(--rarity-edge),
    0 0 0 3px var(--locker-yellow),
    0 0 18px rgb(255 233 92 / 0.45);
}

.rarity-commun { --rarity-light: #9aa6b4; --rarity-dark: #3d4652; --rarity-edge: #b9c4d0; }
.rarity-rare { --rarity-light: #5fc4ff; --rarity-dark: #154a96; --rarity-edge: #7fd4ff; }
.rarity-epique { --rarity-light: #d27cff; --rarity-dark: #561c96; --rarity-edge: #e3a6ff; }
.rarity-legendaire { --rarity-light: #ffb54a; --rarity-dark: #a5410c; --rarity-edge: #ffd08a; }
.rarity-mythique { --rarity-light: #ffe877; --rarity-dark: #a87c08; --rarity-edge: #fff2b0; }

.locker-tile-art {
  position: absolute;
  inset: 5% 5% 20%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.locker-tile-art .character-preview {
  width: 100%;
  height: 100%;
}

.locker-tile-art .shop-item-art {
  width: 88%;
  height: 88%;
  transform: rotate(-14deg);
}

.locker-tile-icon {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.55));
}

.locker-tile-name {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 10px 6px 7px;
  background: linear-gradient(transparent, rgb(6 6 22 / 0.88) 42%);
  font-size: 0.66rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.locker-tile-slot {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 7px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px #000;
  text-transform: uppercase;
}

.locker-tile-check {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--locker-yellow);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
  color: #1b1640;
  font-size: 0.7rem;
  font-weight: 900;
}

.locker-tile-count {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  text-shadow: 0 1px 3px #000;
}

.locker-slots .locker-tile-count {
  top: auto;
  right: 6px;
  bottom: 26px;
  left: auto;
}

.locker-picker {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: rgb(6 8 34 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.locker-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.locker-picker-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.locker-picker-head span {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.74rem;
  font-weight: 800;
}

.locker-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding: 4px;
}

.locker-picker-hint {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.76rem;
}

.locker-details {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--locker-yellow);
  background: linear-gradient(90deg, rgb(255 255 255 / 0.08), transparent);
}

.locker-details strong {
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.locker-details p {
  margin: 0;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.8rem;
}

.locker-details-rarity {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rarity-dark), var(--rarity-light));
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.locker-stage {
  position: relative;
  display: grid;
  min-height: 430px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 100%, #3d57c488 0, transparent 60%),
    linear-gradient(180deg, #0c0f33, #1c2a74);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  grid-template-rows: 1fr auto;
}

.locker-stage-light {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 90%;
  height: 92%;
  background: linear-gradient(180deg, rgb(255 248 214 / 0.32), rgb(255 248 214 / 0.04) 80%, transparent);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  pointer-events: none;
  transform: translateX(-50%);
  animation: locker-light 4s ease-in-out infinite;
}

.locker-stage-pedestal {
  position: absolute;
  top: 284px;
  left: 50%;
  width: 72%;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, #a7c0ff 0, #4a64d4 38%, #1d2770 70%, transparent 72%);
  box-shadow: 0 0 34px #6d8cff88;
  pointer-events: none;
  transform: translateX(-50%);
}

.locker-stage-hero {
  position: relative;
  z-index: 1;
  display: grid;
  height: 300px;
  place-items: end center;
  padding-top: 14px;
}

.locker-stage-hero .character-preview {
  width: 72%;
  height: 100%;
  animation: locker-hero-float 3.4s ease-in-out infinite;
}

.locker-stage-hero .hero-real-weapon:not([hidden]) {
  display: block;
}

.locker-stage-hero .hero-real-body {
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.55));
}

.locker-stage-info {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(transparent, rgb(4 5 22 / 0.85) 30%);
  list-style: none;
}

.locker-stage-info li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
}

.locker-stage-info span {
  color: rgb(255 255 255 / 0.55);
  font-weight: 800;
  text-transform: uppercase;
}

.locker-stage-info strong {
  overflow: hidden;
  font-style: italic;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locker-workshop .shop-category-title,
.locker-workshop .shop-category-note {
  color: #fff;
}

.locker-screen #back-from-locker-button {
  margin-top: 16px;
}

@keyframes locker-light {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes locker-hero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 900px) {
  .locker-loadout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .locker-stage {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 360px;
  }
}

@media (max-width: 560px) {
  .locker-loadout {
    grid-template-columns: minmax(0, 1fr);
  }

  .locker-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .locker-slots .locker-tile:first-child {
    grid-column: span 1;
    aspect-ratio: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .locker-stage-light,
  .locker-stage-hero .character-preview {
    animation: none;
  }
}

/* Tirs réalistes : projectiles orientés dans le sens du vol, traînée, flash de bouche et impacts. */
.fx-layer {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fx-layer > span,
.shot > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

.stone.shot {
  z-index: 3;
  display: block;
  width: 0;
  height: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
  font-size: 0;
  animation: none;
}

.shot-core {
  translate: -50% -50%;
}

.shot .shot-trail {
  right: 0;
  left: auto;
  width: var(--trail, 28px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--trail-color, rgb(255 240 200 / 0.6)));
  transform-origin: 100% 50%;
  translate: 0 -50%;
  animation: shot-trail-grow 0.09s ease-out both;
}

.shot-seed {
  --trail: 20px;
  --trail-color: rgb(240 225 180 / 0.5);
}

.shot-seed .shot-core {
  width: 9px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #fffbe8, #e6d39f 45%, #a88a52);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  animation: shot-spin 0.25s linear infinite;
}

.shot-arrow,
.shot-bolt {
  --trail: 46px;
  --trail-color: rgb(255 255 255 / 0.35);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.6));
}

.shot-arrow .shot-core,
.shot-bolt .shot-core {
  width: 30px;
  height: 2px;
  background: linear-gradient(180deg, #a77a4c, #5d3c1f);
  translate: -88% -50%;
}

.shot-bolt .shot-core {
  width: 22px;
  height: 3px;
  background: linear-gradient(180deg, #6d5a48, #2f251c);
}

.shot-arrow .shot-core::before,
.shot-bolt .shot-core::before {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 9px;
  height: 7px;
  background: linear-gradient(180deg, #f4f8ff, #7d8896);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
  content: "";
  translate: 0 -50%;
}

.shot-arrow .shot-core::after,
.shot-bolt .shot-core::after {
  position: absolute;
  top: 50%;
  left: -1px;
  width: 11px;
  height: 8px;
  background: linear-gradient(180deg, #ff5b5b, #8e1f1f);
  clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%, 30% 50%);
  content: "";
  translate: 0 -50%;
}

.shot-bolt .shot-core::after {
  width: 8px;
  background: linear-gradient(180deg, #3a3a3a, #111);
}

.shot-pellet {
  --trail: 56px;
  --trail-color: rgb(255 170 60 / 0.85);
}

.shot-pellet .shot-trail {
  box-shadow: 0 0 6px #ff7a1f;
}

.shot-pellet .shot-core {
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ffe08a 50%, #ff8a2a 80%);
  box-shadow: 0 0 8px 2px #ff9a3c, 0 0 16px #ff4b1f;
}

.shot-nail {
  --trail: 30px;
  --trail-color: rgb(170 235 255 / 0.55);
  filter: drop-shadow(0 0 3px #8ce2ef);
}

.shot-nail .shot-core {
  width: 16px;
  height: 3px;
  border-radius: 1px 50% 50% 1px;
  background: linear-gradient(180deg, #f2f6fa, #8b98a5 60%, #59636e);
  translate: -75% -50%;
}

.shot-nail .shot-core::before {
  position: absolute;
  top: 50%;
  left: -1px;
  width: 3px;
  height: 7px;
  border-radius: 1px;
  background: #b5c0ca;
  content: "";
  translate: 0 -50%;
}

.shot-candy {
  --trail: 18px;
  --trail-color: rgb(255 140 200 / 0.55);
  filter: drop-shadow(0 0 5px #ff76b1);
}

.shot-candy .shot-core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(#fff 0 45deg, #ff4f9a 45deg 90deg, #fff 90deg 135deg, #ff4f9a 135deg 180deg, #fff 180deg 225deg, #ff4f9a 225deg 270deg, #fff 270deg 315deg, #ff4f9a 315deg);
  box-shadow: inset -2px -2px 3px rgb(0 0 0 / 0.25);
  animation: shot-spin 0.3s linear infinite;
}

.shot-candy .shot-core::before,
.shot-candy .shot-core::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 10px;
  background: linear-gradient(#ffd1e6, #ff7ab6);
  content: "";
  translate: 0 -50%;
}

.shot-candy .shot-core::before {
  left: -6px;
  clip-path: polygon(100% 30%, 0 0, 0 100%, 100% 70%);
}

.shot-candy .shot-core::after {
  right: -6px;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}

.shot-bat {
  --trail: 34px;
  --trail-color: rgb(170 110 255 / 0.5);
  filter: drop-shadow(0 0 5px #c497ff);
}

.shot-bat .shot-trail {
  height: 8px;
  filter: blur(2px);
}

.shot-bat .shot-core,
.pfx-bat::before {
  background: linear-gradient(180deg, #4a2a6e, #140a22);
  clip-path: polygon(50% 22%, 56% 0, 60% 26%, 76% 8%, 100% 14%, 92% 46%, 85% 78%, 70% 60%, 60% 92%, 50% 76%, 40% 92%, 30% 60%, 15% 78%, 8% 46%, 0 14%, 24% 8%, 40% 26%, 44% 0);
}

.shot-bat .shot-core {
  width: 26px;
  height: 14px;
  rotate: 90deg;
  animation: shot-flap 0.14s ease-in-out infinite alternate;
}

.shot-soul {
  --trail: 44px;
  --trail-color: rgb(120 255 220 / 0.8);
  filter: drop-shadow(0 0 6px #46ffe0);
}

.shot-soul .shot-trail {
  height: 10px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  animation: shot-trail-grow 0.09s ease-out both, shot-flicker 0.12s steps(2) infinite;
}

.shot-soul .shot-core {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff 0 25%, #b9fff0 45%, #2fd6b8 80%, transparent 82%);
}

.shot-rune {
  --trail: 30px;
  --trail-color: rgb(220 120 255 / 0.6);
  filter: drop-shadow(0 0 6px #c252ff);
}

.shot-rune .shot-core {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #f0c4ff;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 230 255 / 0.9), rgb(180 70 255 / 0.5) 60%, transparent 72%);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  animation: shot-spin 0.5s linear infinite;
}

.shot-thorn {
  --trail: 26px;
  --trail-color: rgb(140 220 90 / 0.55);
  filter: drop-shadow(0 0 3px #5ca543);
}

.shot-thorn .shot-core {
  width: 20px;
  height: 5px;
  border-radius: 2px 50% 50% 2px;
  background: linear-gradient(90deg, #2f5a1e, #6fb43c 70%, #c72f40);
  translate: -70% -50%;
}

.shot-thorn .shot-core::before {
  position: absolute;
  inset: -3px 5px -3px 2px;
  background: repeating-linear-gradient(60deg, transparent 0 3px, #4f8f2c 3px 4px);
  content: "";
}

@keyframes shot-trail-grow {
  from { opacity: 0; scale: 0 1; }
}

@keyframes shot-spin {
  to { rotate: 360deg; }
}

@keyframes shot-flap {
  to { scale: 0.5 1.1; }
}

@keyframes shot-flicker {
  50% { opacity: 0.7; scale: 1 0.8; }
}

.muzzle-fx {
  z-index: 3;
  rotate: var(--dir);
}

.muzzle-flash {
  width: 26px;
  height: 16px;
  background: radial-gradient(ellipse at 10% 50%, #fff 0 15%, #ffe28a 30%, rgb(255 140 40 / 0.7) 55%, transparent 72%);
  clip-path: polygon(0 35%, 100% 0, 70% 50%, 100% 100%, 0 65%);
  translate: 0 -50%;
  animation: muzzle-flash 0.09s ease-out forwards;
}

.muzzle-smoke {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(200 195 185 / 0.45), transparent 70%);
  translate: -50% -50%;
  animation: muzzle-smoke 0.28s ease-out forwards;
}

.muzzle-pellet .muzzle-flash {
  width: 38px;
  height: 24px;
}

.muzzle-pellet .muzzle-smoke {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, rgb(120 112 105 / 0.55), transparent 70%);
}

.muzzle-nail .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #fff 0 15%, #c8f6ff 35%, rgb(90 200 240 / 0.6) 55%, transparent 72%);
}

:is(.muzzle-seed, .muzzle-candy, .muzzle-arrow, .muzzle-bolt) .muzzle-flash {
  display: none;
}

:is(.muzzle-arrow, .muzzle-bolt) .muzzle-smoke {
  border: 1px solid rgb(255 255 255 / 0.5);
  background: none;
}

:is(.muzzle-bat, .muzzle-soul, .muzzle-rune, .muzzle-thorn) .muzzle-flash {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  clip-path: none;
  translate: -30% -50%;
}

.muzzle-bat .muzzle-flash { background: radial-gradient(circle, #f2deff, rgb(164 99 255 / 0.7) 45%, transparent 70%); }
.muzzle-soul .muzzle-flash { background: radial-gradient(circle, #f4fff9, rgb(70 255 220 / 0.7) 45%, transparent 70%); }
.muzzle-rune .muzzle-flash { background: radial-gradient(circle, #fff, rgb(210 100 255 / 0.7) 45%, transparent 70%); }
.muzzle-thorn .muzzle-flash { background: radial-gradient(circle, #f6ffd8, rgb(150 230 80 / 0.7) 45%, transparent 70%); }

@keyframes muzzle-flash {
  0% { opacity: 1; scale: 0.6 0.8; }
  100% { opacity: 0; scale: 1.3 1.1; }
}

@keyframes muzzle-smoke {
  0% { opacity: 0.8; scale: 0.4; }
  100% { opacity: 0; scale: 1.9; translate: -20% -90%; }
}

.hit-fx {
  --hit-core: #fff6d0;
  --hit-glow: rgb(255 170 60 / 0.75);
  --hit-spark: #ffcf6b;
  --hit-smoke: rgb(170 160 150 / 0.45);
  z-index: 3;
}

.hit-seed { --hit-core: #fff8dc; --hit-glow: rgb(230 200 140 / 0.7); --hit-spark: #f3dca0; --hit-smoke: rgb(180 160 120 / 0.5); }
.hit-arrow, .hit-bolt { --hit-core: #fff; --hit-glow: rgb(255 255 255 / 0.5); --hit-spark: #e8d2a8; --hit-smoke: rgb(170 150 120 / 0.45); }
.hit-pellet { --hit-core: #fff6c0; --hit-glow: rgb(255 130 40 / 0.85); --hit-spark: #ffb347; --hit-smoke: rgb(90 80 75 / 0.55); }
.hit-nail { --hit-core: #fff; --hit-glow: rgb(150 230 255 / 0.75); --hit-spark: #dff8ff; --hit-smoke: rgb(160 170 180 / 0.4); }
.hit-candy { --hit-core: #fff; --hit-glow: rgb(255 110 180 / 0.8); --hit-spark: #ff9fd0; --hit-smoke: rgb(255 190 220 / 0.4); }
.hit-bat { --hit-core: #f2deff; --hit-glow: rgb(160 90 255 / 0.8); --hit-spark: #c99bff; --hit-smoke: rgb(90 50 140 / 0.5); }
.hit-soul { --hit-core: #f4fff9; --hit-glow: rgb(70 255 220 / 0.8); --hit-spark: #9dffe9; --hit-smoke: rgb(60 180 160 / 0.45); }
.hit-rune { --hit-core: #fff; --hit-glow: rgb(210 100 255 / 0.85); --hit-spark: #f0b8ff; --hit-smoke: rgb(140 60 200 / 0.45); }
.hit-thorn { --hit-core: #f6ffd8; --hit-glow: rgb(150 230 80 / 0.75); --hit-spark: #c4f27a; --hit-smoke: rgb(90 140 60 / 0.45); }

.hit-flash {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hit-core) 0 18%, var(--hit-glow) 45%, transparent 70%);
  translate: -50% -50%;
  animation: hit-flash 0.16s ease-out forwards;
}

.hit-target .hit-flash {
  width: 36px;
  height: 36px;
}

.hit-ring {
  width: 30px;
  height: 30px;
  border: 2px solid var(--hit-glow);
  border-radius: 50%;
  translate: -50% -50%;
  animation: hit-ring 0.3s ease-out forwards;
}

.hit-spark {
  width: calc(10px * var(--s));
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--hit-spark));
  box-shadow: 0 0 4px var(--hit-spark);
  rotate: var(--a);
  transform-origin: 0 50%;
  translate: 0 -50%;
  animation: hit-spark 0.32s var(--t) ease-out both;
}

.hit-smoke {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hit-smoke), transparent 70%);
  filter: blur(1px);
  translate: calc(-50% + var(--dx)) -50%;
  animation: hit-smoke 0.7s ease-out forwards;
}

@keyframes hit-flash {
  0% { opacity: 1; scale: 0.4; }
  100% { opacity: 0; scale: 1.5; }
}

@keyframes hit-ring {
  0% { opacity: 0.9; scale: 0.2; }
  100% { opacity: 0; scale: 1.4; }
}

@keyframes hit-spark {
  0% { opacity: 1; transform: translateX(2px) scaleX(1.6); }
  100% { opacity: 0; transform: translateX(var(--d)) scaleX(0.3); }
}

@keyframes hit-smoke {
  0% { opacity: 0.9; scale: 0.3; }
  100% { opacity: 0; scale: calc(2 * var(--s)); transform: translateY(-14px); }
}

/* Pouvoirs réalistes : givre, essaim, explosion de citrouille, voile spectral et anneau de feu. */
.fx-layer.pfx {
  --r: 150px;
  --pfx-glow: rgb(255 255 255 / 0.8);
  z-index: 5;
}

.pfx-flash {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.95), var(--pfx-glow) 35%, transparent 70%);
  translate: -50% -50%;
  animation: pfx-flash 0.3s ease-out forwards;
}

.pfx-ring {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 4px solid var(--pfx-glow);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--pfx-glow), inset 0 0 18px var(--pfx-glow);
  translate: -50% -50%;
  animation: pfx-ring 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.pfx-mist {
  width: calc(var(--r) * 2.2);
  height: calc(var(--r) * 2.2);
  border-radius: 50%;
  filter: blur(6px);
  translate: -50% -50%;
  animation: pfx-mist 1.4s ease-out forwards;
}

.pfx-ice {
  --pfx-glow: rgb(140 225 255 / 0.85);
}

.pfx-ice .pfx-mist {
  background: radial-gradient(circle, rgb(200 240 255 / 0.45), transparent 65%);
}

.pfx-frost {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, rgb(255 255 255 / 0.2) 0 3deg, transparent 3deg 17deg),
    radial-gradient(circle, rgb(220 248 255 / 0.55), rgb(150 220 255 / 0.3) 55%, transparent 70%);
  mask: radial-gradient(circle, #000 50%, transparent 71%);
  translate: -50% -50%;
  animation: pfx-frost 1.6s ease-out forwards;
}

.pfx-shard {
  width: calc(9px * var(--s));
  height: calc(30px * var(--s));
  background: linear-gradient(180deg, #fff, #bdf0ff 40%, #5cc8f0);
  clip-path: polygon(50% 0, 100% 35%, 60% 100%, 40% 100%, 0 35%);
  rotate: var(--a);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  animation: pfx-burst-out 0.9s var(--t) cubic-bezier(0.15, 0.8, 0.3, 1) both;
}

.pfx-snow {
  width: calc(5px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #bff3ff;
  rotate: var(--a);
  animation: pfx-drift-out 1.3s var(--t) ease-out both;
}

.pfx-bats {
  --pfx-glow: rgb(170 100 255 / 0.75);
  filter: drop-shadow(0 0 1px #d7b4ff) drop-shadow(0 0 5px rgb(150 80 255 / 0.7));
}

.pfx-bats .pfx-mist {
  width: calc(var(--r) * 1.6);
  height: calc(var(--r) * 1.6);
  background: radial-gradient(circle, rgb(60 20 90 / 0.55), transparent 65%);
  animation-duration: 1.2s;
}

.pfx-bat {
  width: 0;
  height: 0;
  rotate: var(--a);
  animation: pfx-bat-fly 1.1s var(--t) cubic-bezier(0.3, 0.6, 0.4, 1) both;
}

.pfx-bat::before {
  position: absolute;
  top: calc(-10px * var(--s));
  left: calc(-19px * var(--s));
  width: calc(38px * var(--s));
  height: calc(20px * var(--s));
  content: "";
  animation: pfx-bat-flap 0.12s ease-in-out infinite alternate;
}

.pfx-thrown-pumpkin {
  z-index: 5;
  width: 22px;
  height: 20px;
  margin: -10px 0 0 -11px;
  border-radius: 45% 45% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #ffc36b, #ff7a1a 50%, #a83d08);
  box-shadow: inset -3px -3px 5px rgb(0 0 0 / 0.35), 0 0 10px #ff8a2a;
}

.pfx-thrown-pumpkin::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 4px;
  height: 6px;
  border-radius: 2px;
  background: #4f6b1f;
  content: "";
  translate: -50% 0;
}

.pfx-pumpkin {
  --pfx-glow: rgb(255 150 50 / 0.85);
}

.pfx-scorch {
  width: calc(var(--r) * 1.6);
  height: calc(var(--r) * 1.1);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(20 12 8 / 0.65), rgb(40 20 10 / 0.35) 50%, transparent 70%);
  translate: -50% -50%;
  animation: pfx-scorch 1.9s ease-out forwards;
}

.pfx-fireball {
  width: calc(var(--r) * 1.5);
  height: calc(var(--r) * 1.5);
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 12%, #ffd36b 25%, #ff8a1f 45%, #d4380d 62%, rgb(80 20 10 / 0.6) 72%, transparent 76%);
  filter: blur(2px);
  translate: -50% -50%;
  animation: pfx-fireball 0.7s ease-out forwards;
}

.pfx-smoke {
  width: calc(var(--r) * 0.7 * var(--s));
  height: calc(var(--r) * 0.7 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgb(70 60 58 / 0.75), rgb(40 35 35 / 0.4) 55%, transparent 70%);
  filter: blur(3px);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-smoke 1.6s calc(0.15s + var(--t)) ease-out both;
}

.pfx-debris {
  width: calc(9px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 30% 60% 40% 50%;
  background: linear-gradient(135deg, #ffb04a, #d65a0e 60%, #6b2a06);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-debris 0.8s cubic-bezier(0.2, 0.7, 0.4, 1) both;
}

.pfx-ember {
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 6px 2px #ff7a1f;
  rotate: var(--a);
  animation: pfx-drift-out 1.3s var(--t) ease-out both;
}

.pfx-fire {
  --pfx-glow: rgb(255 120 30 / 0.85);
}

.pfx-fire .pfx-ring {
  border: 10px solid rgb(255 160 40 / 0.8);
  box-shadow: 0 0 30px rgb(255 90 20 / 0.9), inset 0 0 30px rgb(255 90 20 / 0.9);
  filter: blur(3px);
  animation-duration: 0.7s;
}

.pfx-heat {
  width: calc(var(--r) * 2.1);
  height: calc(var(--r) * 2.1);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 140 40 / 0.35), rgb(255 60 20 / 0.2) 50%, transparent 70%);
  filter: blur(8px);
  translate: -50% -50%;
  animation: pfx-mist 1.5s ease-out forwards;
}

.pfx-flame {
  width: calc(18px * var(--s));
  height: calc(34px * var(--s));
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 80%, #fff6c0 0 15%, #ffc23a 35%, #ff6a1a 60%, rgb(200 30 10 / 0) 75%);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  animation: pfx-flame 1.1s var(--t) ease-out both;
}

.pfx-veil {
  --pfx-glow: rgb(160 255 240 / 0.8);
}

.pfx-ghost {
  width: calc(16px * var(--s));
  height: calc(22px * var(--s));
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 35%, rgb(240 255 255 / 0.9), rgb(140 240 230 / 0.55) 55%, transparent 75%);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-drift-out 0.9s var(--t) ease-out both;
}

.pfx-veil-bubble {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.35), transparent 30%),
    radial-gradient(circle, transparent 55%, rgb(150 255 240 / 0.25) 66%, rgb(190 255 250 / 0.65) 71%, transparent 73%);
  box-shadow: 0 0 18px rgb(120 255 230 / 0.5), inset 0 0 22px rgb(120 255 230 / 0.4);
  pointer-events: none;
  translate: -50% -50%;
  animation: pfx-veil-wobble 1.2s ease-in-out infinite, pfx-veil-fade var(--veil-duration, 1.6s) linear forwards;
}

.pfx-wisp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #f0fffd, rgb(120 255 230 / 0.6) 60%, transparent 70%);
  animation: pfx-wisp-orbit 1.4s var(--t) linear infinite;
}

.enemy-burn-flames {
  z-index: 9;
  top: -24%;
  right: auto;
  left: 50%;
  width: 62%;
  height: 92%;
  font-size: 0;
  filter: drop-shadow(0 0 6px #ff5a16);
  mix-blend-mode: screen;
  translate: -50% 0;
  animation: none;
}

.enemy-burn-flames i {
  position: absolute;
  bottom: 0;
  width: 46%;
  height: 100%;
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 85%, #fff4b8 0 12%, #ffc23a 32%, #ff5a16 58%, transparent 74%);
  transform-origin: 50% 100%;
  animation: burn-tongue 0.38s ease-in-out infinite alternate;
}

.enemy-burn-flames i:nth-child(1) { left: 0; height: 74%; animation-delay: -0.1s; }
.enemy-burn-flames i:nth-child(2) { left: 27%; animation-delay: -0.25s; }
.enemy-burn-flames i:nth-child(3) { right: 0; height: 64%; animation-delay: -0.05s; }

.arena.arena-quake-light {
  animation: arena-quake-light 0.2s ease-out;
}

@keyframes pfx-flash {
  0% { opacity: 1; scale: 0.3; }
  100% { opacity: 0; scale: 1.6; }
}

@keyframes pfx-ring {
  0% { opacity: 1; scale: 0.05; }
  70% { opacity: 0.8; }
  100% { opacity: 0; scale: 1; }
}

@keyframes pfx-mist {
  0% { opacity: 0; scale: 0.3; }
  25% { opacity: 1; }
  100% { opacity: 0; scale: 1.15; }
}

@keyframes pfx-frost {
  0% { opacity: 0; scale: 0.2; }
  15% { opacity: 1; scale: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; scale: 1.02; }
}

@keyframes pfx-burst-out {
  0% { opacity: 0; transform: translateY(0) scale(0.2); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateY(calc(var(--d) * -1)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1.05)) scale(0.9); }
}

@keyframes pfx-drift-out {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1)) translateX(8px); }
}

@keyframes pfx-bat-fly {
  0% { opacity: 0; transform: rotate(0deg) translateY(0) scale(0.3); }
  15% { opacity: 1; }
  50% { transform: rotate(calc(var(--spin) * 0.4)) translateY(calc(var(--d) * -0.6)) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--spin)) translateY(calc(var(--d) * -1)) scale(1); }
}

@keyframes pfx-bat-flap {
  to { scale: 0.45 1.1; }
}

@keyframes pfx-scorch {
  0% { opacity: 0; scale: 0.3; }
  15% { opacity: 1; scale: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes pfx-fireball {
  0% { opacity: 1; scale: 0.1; }
  25% { opacity: 1; scale: 0.9; }
  100% { opacity: 0; scale: 1.25; filter: blur(6px) brightness(0.6); }
}

@keyframes pfx-smoke {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1)) scale(1.4); }
}

@keyframes pfx-debris {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1)) rotate(var(--spin)); }
}

@keyframes pfx-flame {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(0.3, 0.2); }
  25% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--d) * -0.75)) rotate(calc(var(--a) * -1)) scale(1, 1); }
  60% { opacity: 0.9; transform: rotate(var(--a)) translateY(calc(var(--d) * -0.95)) rotate(calc(var(--a) * -1)) scale(0.9, 1.25); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(calc(var(--a) * -1)) scale(0.5, 1.5); }
}

@keyframes pfx-veil-wobble {
  0%, 100% { scale: 1 1; }
  50% { scale: 1.05 0.96; }
}

@keyframes pfx-veil-fade {
  0% { opacity: 0; }
  8%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pfx-wisp-orbit {
  from { transform: rotate(var(--a)) translateX(40px); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(40px); }
}

@keyframes burn-tongue {
  from { opacity: 0.85; rotate: -4deg; scale: 0.85 0.8; }
  to { opacity: 1; rotate: 5deg; scale: 1.1 1.15; }
}

@keyframes arena-quake-light {
  0%, 100% { translate: 0 0; }
  30% { translate: -1px 0; }
  60% { translate: 1px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-layer > span:not(.pfx-flash):not(.hit-flash):not(.pfx-ring) {
    display: none;
  }

  .arena.arena-quake-light {
    animation: none;
  }
}

/* Casier · établi d'amélioration des armes et pouvoirs. */
.locker-upgrades {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.upgrade-list {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: rgb(6 8 34 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.upgrade-list-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.upgrade-list-title:not(:first-child) {
  margin-top: 14px;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  padding: 4px;
}

.locker-tile-level {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgb(6 6 22 / 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.locker-tile.is-maxed .locker-tile-level {
  background: var(--locker-yellow);
  color: #1b1640;
}

.upgrade-bench {
  --rarity-light: #9aa6b4;
  --rarity-dark: #3d4652;
  --rarity-edge: #b9c4d0;
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rarity-light) 45%, transparent), transparent 62%),
    linear-gradient(180deg, #0c0f33, #1a2468);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 -4px 0 var(--rarity-edge);
}

.upgrade-bench-art {
  display: grid;
  height: 150px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background:
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.06) 0 7px, transparent 7px 20px),
    radial-gradient(circle at 50% 45%, var(--rarity-light), var(--rarity-dark) 75%);
}

.upgrade-bench-art .shop-item-art {
  width: 100%;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 8px 6px rgb(0 0 0 / 0.55));
  transform: rotate(-14deg);
}

.upgrade-bench-art .locker-tile-icon {
  font-size: 4.2rem;
}

.upgrade-bench .locker-details-rarity {
  justify-self: start;
}

.upgrade-bench-title {
  margin: 0;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.upgrade-pips {
  display: flex;
  gap: 5px;
}

.upgrade-pips span {
  flex: 1;
  height: 9px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.14);
  transform: skewX(-18deg);
}

.upgrade-pips span.is-filled {
  background: linear-gradient(90deg, var(--locker-yellow), #ffb02e);
  box-shadow: 0 0 8px rgb(255 233 92 / 0.55);
}

.upgrade-level-label {
  color: var(--locker-yellow);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.upgrade-stats {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upgrade-stats li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.06);
  font-size: 0.8rem;
}

.upgrade-stats span {
  color: rgb(255 255 255 / 0.65);
  font-weight: 800;
}

.upgrade-stats em {
  color: #7dff8a;
  font-style: normal;
  font-weight: 900;
}

.upgrade-bench-footer {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.upgrade-wallet {
  color: rgb(255 255 255 / 0.7);
  font-size: 0.76rem;
  font-weight: 800;
}

.upgrade-button {
  padding: 12px 14px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff27a, var(--locker-yellow) 45%, #f2b81f);
  box-shadow: inset 0 -4px 0 #b9850e, 0 4px 10px rgb(0 0 0 / 0.4);
  color: #1b1640;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.upgrade-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.upgrade-button:disabled {
  background: rgb(255 255 255 / 0.12);
  box-shadow: none;
  color: rgb(255 255 255 / 0.5);
  cursor: not-allowed;
}

.upgrade-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.upgrade-bench.just-upgraded .upgrade-bench-art {
  animation: upgrade-flash 0.7s ease-out;
}

.upgrade-bench.just-upgraded .upgrade-pips,
.upgrade-bench.just-upgraded .upgrade-level-label {
  animation: upgrade-pop 0.6s ease-out;
}

@keyframes upgrade-flash {
  0% { filter: brightness(2.4) saturate(1.4); transform: scale(1.04); }
  100% { filter: none; transform: none; }
}

@keyframes upgrade-pop {
  0% { scale: 1.35; }
  100% { scale: 1; }
}

@media (max-width: 760px) {
  .locker-upgrades {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-bench.just-upgraded * {
    animation: none;
  }
}

/* Animations façon Survivor.io : rebonds élastiques, flash blanc aux coups, chiffres de dégâts, morts en « pop » et butin aimanté. */
@keyframes hero-breathe {
  0%, 100% { transform: scale(1.03, 0.97); }
  50% { transform: scale(0.985, 1.035); }
}

@keyframes hero-walk {
  0%, 50%, 100% { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  25% { transform: translateY(-7px) rotate(-5deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  75% { transform: translateY(-7px) rotate(5deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
}

@keyframes hero-step {
  0%, 50%, 100% { transform: scale(1.13, 0.87); }
  9%, 59% { transform: scale(0.9, 1.12); }
  25%, 75% { transform: scale(0.98, 1.03); }
  42%, 92% { transform: scale(1.02, 0.98); }
}

@keyframes hero-run {
  0%, 50%, 100% { transform: translateY(0) rotate(7deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  25% { transform: translateY(-10px) rotate(3deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  75% { transform: translateY(-10px) rotate(11deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
}

@keyframes hero-stride {
  0%, 50%, 100% { transform: scale(1.16, 0.84); }
  10%, 60% { transform: scale(0.88, 1.14); }
  25%, 75% { transform: scale(0.97, 1.04); }
}

.player.is-walking::before {
  animation: sio-shadow 0.6s ease-in-out infinite;
}

.player.is-running::before {
  animation: sio-shadow 0.4s ease-in-out infinite;
}

@keyframes sio-shadow {
  0%, 50%, 100% { scale: 1.08 1; opacity: 1; }
  25%, 75% { scale: 0.72 0.8; opacity: 0.6; }
}

/* Sbires et boss : écrasement et étirement à chaque pas. */
.enemy-realistic .rig {
  transform-origin: 50% 100%;
  animation: sio-squash var(--rig-dur) ease-in-out var(--gait-delay, 0s) infinite;
}

.enemy-realistic[data-gait="float"] .rig {
  animation-name: sio-squash-soft;
}

@keyframes sio-squash {
  0%, 50%, 100% { scale: 1.08 0.92; }
  25%, 75% { scale: 0.95 1.06; }
}

@keyframes sio-squash-soft {
  0%, 100% { scale: 1.03 0.97; }
  50% { scale: 0.97 1.03; }
}

.enemy-realistic.enemy-hit .rig {
  animation: sio-hit 0.2s ease-out;
}

.enemy-realistic.enemy-boss.enemy-hit .rig {
  animation-name: sio-hit-boss;
}

@keyframes sio-hit {
  0% { filter: brightness(0) invert(1); scale: 1.2 0.82; }
  40% { filter: brightness(0) invert(1); scale: 0.9 1.1; }
  41% { filter: brightness(1.6); }
  100% { filter: none; scale: 1 1; }
}

@keyframes sio-hit-boss {
  0% { filter: brightness(2.4) saturate(0.4); scale: 1.06 0.95; }
  100% { filter: none; scale: 1 1; }
}

/* Apparition en « pop » des sbires. */
.enemy.enemy-realistic.enemy-spawn-pop:not(.enemy-boss) {
  animation: sio-spawn 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

@keyframes sio-spawn {
  0% { scale: 0.1 0.1; opacity: 0; filter: brightness(3); }
  60% { scale: 1.15 0.9; opacity: 1; filter: brightness(1.5); }
  100% { scale: 1 1; opacity: 1; filter: none; }
}

.spawn-fx {
  z-index: 1;
}

.spawn-ring {
  width: 34px;
  height: 14px;
  border: 2px solid rgb(220 200 255 / 0.7);
  border-radius: 50%;
  translate: -50% -50%;
  animation: spawn-ring 0.45s ease-out forwards;
}

.spawn-dust {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(190 170 150 / 0.8), transparent 70%);
  translate: -50% -50%;
  animation: spawn-dust 0.55s var(--t) ease-out both;
}

@keyframes spawn-ring {
  0% { opacity: 1; scale: 0.2; }
  100% { opacity: 0; scale: 1.8; }
}

@keyframes spawn-dust {
  0% { opacity: 0.9; transform: rotate(var(--a)) translateX(2px) scale(0.6); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(-6px) scale(calc(1.6 * var(--s))); }
}

/* Mort : flash blanc, écrasement puis disparition dans un nuage. */
.enemy.enemy-realistic.enemy-dying:not(.enemy-hit) {
  animation: sio-die 0.36s cubic-bezier(0.4, 0, 0.7, 0.4) forwards;
}

.enemy-realistic.enemy-dying :is(.enemy-boss-art, .enemy-minion-art),
.enemy-realistic.enemy-dying[data-gait="float"] :is(.enemy-boss-art, .enemy-minion-art),
.enemy-realistic.enemy-dying .rig,
.enemy-realistic.enemy-dying .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r, .rig-leg-l, .rig-leg-r) {
  animation: none;
}

.enemy-realistic.enemy-dying .rig {
  filter: brightness(0) invert(1);
}

@keyframes sio-die {
  0% { scale: 1 1; opacity: 1; }
  35% { scale: 1.25 0.8; opacity: 1; }
  100% { scale: 0.1 1.4; opacity: 0; }
}

.death-fx {
  --size: 40px;
  z-index: 4;
}

.death-flash {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgb(255 240 200 / 0.6) 50%, transparent 70%);
  translate: -50% -50%;
  animation: death-flash 0.25s ease-out forwards;
}

.death-ring {
  width: var(--size);
  height: var(--size);
  border: 3px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  translate: -50% -50%;
  animation: death-ring 0.35s ease-out forwards;
}

.death-smoke {
  width: calc(var(--size) * 0.5);
  height: calc(var(--size) * 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2eef8, #b9b0c8 55%, transparent 72%);
  translate: -50% -50%;
  animation: death-smoke 0.6s var(--t) ease-out both;
}

.death-bit {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ffe7a8, #c9603a);
  box-shadow: 0 0 3px rgb(0 0 0 / 0.5);
  translate: -50% -50%;
  animation: death-bit 0.5s ease-out forwards;
}

.death-boss .death-bit {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #fff2a8, #b642ff);
}

@keyframes death-flash {
  0% { opacity: 1; scale: 0.3; }
  100% { opacity: 0; scale: 1.2; }
}

@keyframes death-ring {
  0% { opacity: 1; scale: 0.3; }
  100% { opacity: 0; scale: 1.7; border-width: 1px; }
}

@keyframes death-smoke {
  0% { opacity: 0.95; transform: rotate(var(--a)) translateX(0) scale(0.4); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(calc(1.5 * var(--s))); }
}

@keyframes death-bit {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(4px) rotate(0deg); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--spin)); }
}

/* Chiffres de dégâts qui jaillissent au-dessus des ennemis. */
.dmg-num {
  position: absolute;
  z-index: 8;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #1b0f18;
  text-shadow: 0 2px 0 #1b0f18;
  translate: -50% -100%;
  scale: var(--world-scale, 1);
  white-space: nowrap;
  animation: dmg-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.dmg-num.is-big {
  color: #ffd23f;
  font-size: 21px;
}

@keyframes dmg-pop {
  0% { opacity: 1; transform: translate(0, 4px) scale(0.4); }
  16% { opacity: 1; transform: translate(calc(var(--dx) * 0.3), -14px) scale(1.4); }
  32% { opacity: 1; transform: translate(calc(var(--dx) * 0.5), -20px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -34px) scale(0.8); }
}

/* Butin : les pièces sautent hors de l'ennemi puis filent vers le joueur. */
.loot-pickup {
  animation:
    loot-drop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    pickup-float 0.55s 0.45s ease-in-out infinite alternate;
}

.loot-pickup.is-magnet {
  animation: loot-magnet 0.18s ease-in-out infinite alternate;
  box-shadow: 0 0 12px #ffe680, 0 0 4px #fff;
}

@keyframes loot-drop {
  0% { translate: 0 0; scale: 0.3; }
  45% { translate: 0 -22px; scale: 1.15; }
  75% { translate: 0 0; scale: 0.9 1.1; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes loot-magnet {
  from { scale: 1.1 0.9; }
  to { scale: 0.9 1.1; }
}

.collect-fx {
  z-index: 6;
}

.collect-spark {
  width: 6px;
  height: 6px;
  background: #fff6b0;
  box-shadow: 0 0 6px #ffd23f;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  translate: -50% -50%;
  animation: collect-spark 0.4s var(--t) ease-out both;
}

@keyframes collect-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(2px) scale(0.6); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(calc(1.8 * var(--s))); }
}

/* Montée de niveau d'arme : colonne de lumière et étincelles. */
.levelup-fx {
  --lvl-color: #c98bff;
  z-index: 6;
}

.levelup-orange {
  --lvl-color: #ffb341;
}

.levelup-doree {
  --lvl-color: #ffe766;
}

.levelup-pillar {
  width: 70px;
  height: 190px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--lvl-color) 80%, transparent), rgb(255 255 255 / 0.5) 40%, transparent);
  border-radius: 40% 40% 0 0;
  filter: blur(2px);
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  transform-origin: 50% 100%;
  translate: -50% -88%;
  animation: levelup-pillar 1s ease-out forwards;
}

.levelup-ring {
  width: 80px;
  height: 30px;
  border: 3px solid var(--lvl-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--lvl-color);
  translate: -50% 40%;
  animation: levelup-ring 0.7s ease-out forwards;
}

.levelup-spark {
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 0 8px var(--lvl-color);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  translate: -50% -50%;
  animation: levelup-spark 0.9s var(--t) ease-out both;
}

@keyframes levelup-pillar {
  0% { opacity: 0; scale: 0.3 0.2; }
  20% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: 0.4 1.15; }
}

@keyframes levelup-ring {
  0% { opacity: 1; scale: 0.2; }
  100% { opacity: 0; scale: 2.2; }
}

@keyframes levelup-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(6px) translateY(0) scale(0.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(-40px) scale(var(--s)); }
}

@media (prefers-reduced-motion: reduce) {
  .enemy-realistic .rig,
  .loot-pickup,
  .player::before {
    animation: none;
  }

  .dmg-num {
    animation-duration: 0.01s;
    animation-delay: 0.5s;
  }
}

/* ============================================================
   Niveaux joueur : barre d'XP, gemmes, bannière de niveau
   ============================================================ */

.arena > .game-hud {
  top: 28px;
}

.arena > .hud-timer {
  top: 26px;
}

.hud-xp {
  position: absolute;
  z-index: 11;
  top: 6px;
  left: 50%;
  width: min(720px, calc(100% - 28px));
  height: 14px;
  overflow: hidden;
  border: 2px solid #0d1a33;
  border-radius: 999px;
  background: linear-gradient(#1b2340, #121731);
  box-shadow: 0 3px 0 #070b18, inset 0 2px 3px #0008;
  pointer-events: none;
  translate: -50% 0;
}

.hud-xp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(#ffffff55, transparent 55%),
    linear-gradient(90deg, #2f8cff, #4fd2ff 70%, #9af0ff);
  box-shadow: 0 0 10px #4fd2ffaa;
  transition: width 0.25s ease-out;
}

.hud-xp-level {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: -1px -1px 0 #0d1a33, 1px -1px 0 #0d1a33, -1px 1px 0 #0d1a33, 1px 1px 0 #0d1a33;
}

.boss-eta {
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #4a1020cc;
  color: #ffb3a1;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.boss-eta[hidden] {
  display: none;
}

.boss-eta.is-close {
  background: #b3162b;
  color: #fff;
  animation: boss-eta-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes boss-eta-pulse {
  to { scale: 1.08; box-shadow: 0 0 12px #ff3b4d; }
}

.arena.boss-incoming::after {
  position: absolute;
  z-index: 9;
  inset: 0;
  box-shadow: inset 0 0 90px 20px #d1102acc;
  content: "";
  pointer-events: none;
  animation: boss-incoming 0.6s ease-in-out 4 alternate;
}

@keyframes boss-incoming {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

.enemy.boss-enraged .rig,
.enemy.boss-enraged .hero-pixel-art {
  filter: drop-shadow(0 0 6px #ff2a2a) drop-shadow(0 0 14px #ff5a1f) saturate(1.4);
}

.loot-pickup.loot-xp {
  width: 16px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 5px #ff8a2a) drop-shadow(0 3px 0 #2a1008);
}

.loot-pickup.loot-xp.is-large {
  width: 22px;
  height: 30px;
}

.loot-pickup.loot-xp::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 72%, #fff6d0 0 16%, transparent 18%),
    radial-gradient(circle at 50% 78%, #ffe08a, #ff7a1a 42%, #9a2bff 78%, transparent 80%);
  clip-path: polygon(50% 0, 68% 22%, 84% 48%, 70% 46%, 78% 100%, 50% 74%, 22% 100%, 30% 46%, 16% 48%, 32% 22%);
  content: "";
}

.loot-pickup.loot-xp.is-magnet {
  box-shadow: none;
  filter: drop-shadow(0 0 8px #ffb15a) drop-shadow(0 0 3px #fff3c4);
}

.collect-xp .collect-spark {
  background: #ffe0a8;
  box-shadow: 0 0 6px #ff8a2a;
}

.xp-gain-text {
  position: absolute;
  z-index: 13;
  color: #ffd27a;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: calc(1.5rem * var(--world-scale, 1));
  pointer-events: none;
  text-shadow: -2px -2px 0 #2a1008, 2px -2px 0 #2a1008, -2px 2px 0 #2a1008, 2px 2px 0 #2a1008, 0 0 14px #ff8a2a;
  white-space: nowrap;
  translate: -50% -50%;
  animation: xp-gain-rise 1.4s ease-out both;
}

@keyframes xp-gain-rise {
  0% { opacity: 0; scale: 0.4; }
  15% { opacity: 1; scale: 1.25; }
  30% { scale: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px); }
}

.levelup-banner {
  position: absolute;
  z-index: 14;
  top: 2px;
  z-index: 20;
  left: 50%;
  display: grid;
  max-width: min(280px, calc(100% - 24px));
  justify-items: center;
  gap: 2px;
  padding: 6px 12px 7px;
  border: 2px solid #3a2414;
  border-radius: 8px;
  background:
    linear-gradient(#fff6d866, transparent 42%),
    linear-gradient(#4a2c18, #24140c);
  box-shadow: 0 3px 0 #120a06, 0 0 16px #ff8a2a55;
  color: #ffe7b0;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  pointer-events: none;
  text-align: center;
  translate: -50% 0;
  animation: levelup-banner 2.6s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.levelup-banner.is-milestone {
  background:
    radial-gradient(ellipse at 50% 0, #ffffff55, transparent 60%),
    linear-gradient(#ffcf3a, #f08a12);
  box-shadow: 0 5px 0 #8a4a07, 0 0 50px #ffcf3acc;
}

.levelup-banner strong {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: -2px -2px 0 #0d1a33, 2px -2px 0 #0d1a33, -2px 2px 0 #0d1a33, 2px 2px 0 #0d1a33, 0 4px 0 #0d1a33;
}

.levelup-banner span {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  text-shadow: 0 1px 2px #0009;
}

@keyframes levelup-banner {
  0% { opacity: 0; scale: 0.3; }
  12% { opacity: 1; scale: 1.12; }
  20% { scale: 1; }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-24px); }
}

.game-over-xp {
  margin: -6px 0 0;
  padding: 6px 16px;
  border: 2px solid #0d1a33;
  border-radius: 999px;
  background: linear-gradient(#2f8cff, #1a4fc2);
  box-shadow: 0 3px 0 #0b2a5a;
  color: #fff;
  font-weight: 900;
}

.game-over-xp:empty {
  display: none;
}

/* ============================================================
   Menu style Survivor.io
   ============================================================ */

.front-menu {
  container-type: size;
}

.front-menu[data-screen="home"],
.front-menu[data-screen="rewards"] {
  padding: clamp(8px, 1.5cqh, 24px) 12px;
}

.front-menu[data-screen="home"] .menu-panel,
.front-menu[data-screen="rewards"] .menu-panel {
  width: min(560px, 100%);
  padding: 14px 16px 0;
  border: 4px solid #0d1030;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 80% 0, #ff9a3c33 0, transparent 45%),
    radial-gradient(ellipse at 10% 30%, #7a4cff33 0, transparent 50%),
    linear-gradient(180deg, #2a2f7a 0, #1d1f57 45%, #140f35 100%);
  box-shadow: 0 8px 0 #07081c, 0 16px 40px #000c, inset 0 0 0 2px #6f7cff44;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Roboto, Arial, sans-serif;
}

.front-menu[data-screen="home"] .menu-panel::before,
.front-menu[data-screen="home"] .menu-panel::after,
.front-menu[data-screen="rewards"] .menu-panel::before,
.front-menu[data-screen="rewards"] .menu-panel::after,
.front-menu[data-screen="home"] .menu-decorations,
.front-menu[data-screen="rewards"] .menu-decorations {
  display: none;
}

.front-menu[data-screen="home"] .menu-heading {
  position: absolute;
  z-index: 3;
  top: -8px;
  left: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  translate: -50% 0;
}

.front-menu[data-screen="home"] .menu-heading > :not(.menu-music-toggle) {
  display: none;
}

.front-menu[data-screen="home"] .menu-music-toggle {
  padding: 3px 9px;
  font-size: 0.66rem;
}

.front-menu[data-screen="rewards"] .menu-heading {
  margin-bottom: 10px;
  border-bottom-color: #6f7cff66;
}

.front-menu[data-screen="rewards"] .menu-heading h1 {
  color: #fff;
  text-shadow: -2px -2px 0 #0d1030, 2px -2px 0 #0d1030, -2px 2px 0 #0d1030, 2px 2px 0 #0d1030, 0 4px 0 #0d1030;
}

.front-menu[data-screen="rewards"] .menu-kicker {
  color: #ffd84a;
}

.sio-home:not([hidden]) {
  display: grid;
  gap: clamp(6px, 1.4cqh, 12px);
}

.sio-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 3px solid #0d1030;
  border-radius: 18px;
  background: linear-gradient(#3a3f9a, #262a72);
  box-shadow: 0 4px 0 #0d1030, inset 0 2px 0 #ffffff26;
}

.sio-avatar {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid #0d1030;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, #ffb35c, #d8541f 70%);
  box-shadow: inset 0 -4px 0 #0004, 0 3px 0 #0d1030;
  font-size: 1.9rem;
  grid-row: 1;
  grid-column: 1;
}

.sio-level-badge {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: end;
  justify-self: start;
  margin: 0 0 -10px 34px;
  border: 3px solid #0d1030;
  border-radius: 50%;
  background: linear-gradient(#ffe25a, #f5a417);
  box-shadow: 0 2px 0 #0d1030;
  color: #3b1d00;
  grid-row: 1;
  grid-column: 1;
  line-height: 0.85;
}

.sio-level-badge span {
  font-size: 0.45rem;
}

.sio-level-badge strong {
  font-size: 0.82rem;
}

.sio-profile-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.sio-profile .player-name-field {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  font-size: 0;
}

.sio-profile .player-name-field input {
  min-height: 30px;
  padding: 3px 10px;
  border: 2px solid #0d1030;
  border-radius: 10px;
  background: #151845;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 0.9rem;
}

.sio-profile .player-name-field input[readonly] {
  background: #1d2050;
  color: #c9cdf5;
}

.sio-xp-bar {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 2px solid #0d1030;
  border-radius: 999px;
  background: #121540;
  box-shadow: inset 0 2px 3px #0008;
}

.sio-xp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(#ffffff55, transparent 55%),
    linear-gradient(90deg, #2f8cff, #4fd2ff 70%, #9af0ff);
  transition: width 0.4s ease-out;
}

.sio-xp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.62rem;
  line-height: 1;
  text-shadow: -1px -1px 0 #0d1030, 1px -1px 0 #0d1030, -1px 1px 0 #0d1030, 1px 1px 0 #0d1030;
}

.sio-currency {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 5px;
  border: 2px solid #0d1030;
  border-radius: 999px;
  background: #151845;
  color: #fff;
  font-size: 0.95rem;
}

.sio-coin-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #6b3d00;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3a0, #ffc21f 55%, #d48a00);
  color: #7a4300;
  font-size: 0.72rem;
}

.sio-home .player-name-feedback {
  margin: -6px 4px 0;
  color: #ffd84a;
}

.sio-chapter {
  position: relative;
  display: grid;
  min-height: clamp(140px, 27cqh, 300px);
  overflow: hidden;
  align-content: space-between;
  padding: 14px;
  border: 4px solid #0d1030;
  border-radius: 22px;
  background: #0d1030;
  box-shadow: 0 5px 0 #0d1030, 0 10px 24px #0008;
}

.sio-chapter-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.sio-chapter-kicker {
  padding: 3px 12px;
  border: 2px solid #0d1030;
  border-radius: 999px;
  background: linear-gradient(#ff9a3c, #e0561c);
  box-shadow: 0 2px 0 #0d1030;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.sio-chapter-title {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1;
  text-shadow: -3px -3px 0 #0d1030, 3px -3px 0 #0d1030, -3px 3px 0 #0d1030, 3px 3px 0 #0d1030, 0 5px 0 #0d1030;
}

.sio-chapter-sub {
  margin: 4px 0 0;
  color: #ffe7b8;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  text-shadow: 0 2px 2px #000;
}

.loadout-preview.sio-hero {
  position: relative;
  display: grid;
  width: auto;
  min-height: 0;
  justify-items: center;
  justify-self: center;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: #fff;
  text-align: center;
}

.loadout-preview.sio-hero:hover {
  background: none;
}

.loadout-preview.sio-hero:hover .character-preview {
  scale: 1.05;
}

.loadout-preview.sio-hero #loadout-preview-content {
  flex-direction: column;
  gap: 4px;
}

.loadout-preview.sio-hero #loadout-preview-content .character-preview {
  width: clamp(64px, 10.5cqh, 128px);
  height: clamp(74px, 12cqh, 148px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 88%, #000a 0 26%, transparent 28%);
  box-shadow: none;
  transition: scale 0.15s ease-out;
  animation: sio-hero-idle 1.6s ease-in-out infinite;
}

@keyframes sio-hero-idle {
  50% { translate: 0 -5px; }
}

.loadout-preview.sio-hero .loadout-preview-label {
  justify-items: center;
  gap: 0;
  text-shadow: -2px -2px 0 #0d1030, 2px -2px 0 #0d1030, -2px 2px 0 #0d1030, 2px 2px 0 #0d1030;
}

.loadout-preview.sio-hero .loadout-preview-label strong {
  color: #ffd84a;
  font-size: 1rem;
}

.loadout-preview.sio-hero .loadout-preview-label span {
  color: #fff;
  font-size: 0.72rem;
}

.loadout-preview.sio-hero .locker-hint {
  position: absolute;
  top: 6px;
  right: -46px;
  padding: 3px 8px;
  border: 2px solid #0d1030;
  border-radius: 8px;
  background: linear-gradient(#9b7bff, #6448d8);
  box-shadow: 0 2px 0 #0d1030;
  color: #fff;
  font-size: 0.6rem;
}

.sio-next-reward {
  width: 100%;
  padding: 8px 12px;
  overflow: hidden;
  border: 3px solid #0d1030;
  border-radius: 14px;
  background: linear-gradient(90deg, #3b2a8c, #5a2f8f);
  box-shadow: 0 3px 0 #0d1030;
  color: #fff;
  cursor: pointer;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sio-next-reward:hover {
  background: linear-gradient(90deg, #4a37a6, #6c3aa8);
}

.menu-primary.sio-play {
  position: relative;
  width: 100%;
  min-height: clamp(50px, 9cqh, 70px);
  margin: 0;
  overflow: hidden;
  border: 4px solid #0d1030;
  border-radius: 20px;
  background:
    linear-gradient(#ffffff59, transparent 50%),
    linear-gradient(#ffe25a, #ffb01f 60%, #f08a12);
  box-shadow: 0 7px 0 #8a4a07, 0 10px 18px #0009;
  color: #fff;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-shadow: -3px -3px 0 #0d1030, 3px -3px 0 #0d1030, -3px 3px 0 #0d1030, 3px 3px 0 #0d1030, 0 5px 0 #0d1030;
  transition: translate 0.08s, box-shadow 0.08s;
  animation: sio-play-pulse 1.4s ease-in-out infinite;
}

.menu-primary.sio-play::after {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, #ffffff88, transparent);
  content: "";
  animation: sio-play-shine 2.6s ease-in-out infinite;
}

.menu-primary.sio-play:hover {
  filter: brightness(1.06);
}

.menu-primary.sio-play:active {
  box-shadow: 0 2px 0 #8a4a07;
  translate: 0 5px;
}

@keyframes sio-play-pulse {
  50% { scale: 1.025; }
}

@keyframes sio-play-shine {
  0%, 55% { left: -40%; }
  100% { left: 120%; }
}

.menu-nav {
  position: sticky;
  z-index: 4;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  margin: 14px -16px 0;
  padding: 8px 8px 10px;
  border-top: 3px solid #0d1030;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(#1a1d4f, #0f1136);
  box-shadow: 0 -4px 12px #0007;
}

.menu-panel:has(#shop-screen:not([hidden])) .menu-nav,
.menu-panel:has(#locker-screen:not([hidden])) .menu-nav,
.menu-panel:has(#rewards-screen:not([hidden])) .menu-nav {
  margin-inline: clamp(-34px, -4vw, -18px);
  margin-bottom: clamp(-34px, -4vw, -18px);
}

.menu-nav-button {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 2px;
  padding: 6px 2px 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: none;
  color: #b9bff0;
  cursor: pointer;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  transition: translate 0.12s, background 0.12s;
}

.menu-nav-icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 0 #0d1030);
}

.menu-nav-button:hover {
  background: #ffffff14;
  color: #fff;
}

.menu-nav-button:active:not(.is-active) {
  translate: 0 2px;
  transition: translate var(--press-ms) ease;
}

.menu-nav-button.is-active {
  border-color: #0d1030;
  background: linear-gradient(#ffe25a, #f5a417);
  box-shadow: 0 3px 0 #8a4a07;
  color: #3b1d00;
  translate: 0 -8px;
}

.menu-nav-button.is-active .menu-nav-icon {
  font-size: 1.6rem;
}

.menu-nav-button:focus-visible,
.sio-next-reward:focus-visible,
.menu-primary.sio-play:focus-visible {
  outline: 3px solid #4fd2ff;
  outline-offset: 2px;
}

.front-menu[data-screen="home"] .progression-feedback,
.front-menu[data-screen="rewards"] .progression-feedback {
  margin: 8px 0 0;
  color: #c9cdf5;
}

.rewards-summary {
  margin: 0 0 10px;
  color: #dfe2ff;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
}

.rewards-track {
  position: relative;
  display: grid;
  max-height: min(46cqh, 460px);
  gap: 8px;
  margin: 0 0 12px;
  padding: 4px 6px 4px 4px;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: #6f7cff #151845;
}

.reward-node {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border: 3px solid #0d1030;
  border-radius: 14px;
  background: linear-gradient(#2c3078, #22256a);
  box-shadow: 0 3px 0 #0d1030;
  opacity: 0.78;
}

.reward-node.is-claimed {
  background: linear-gradient(#1f5a4a, #17463a);
  opacity: 1;
}

.reward-node.is-next {
  border-color: #ffd84a;
  background: linear-gradient(#3b46b8, #2b3192);
  box-shadow: 0 3px 0 #0d1030, 0 0 16px #ffd84a88;
  opacity: 1;
}

.reward-node.is-milestone {
  background: linear-gradient(#7a3fb0, #55278a);
}

.reward-node.is-milestone.is-claimed {
  background: linear-gradient(#2f7a57, #1f5a40);
}

.reward-node.is-major {
  background: linear-gradient(#c7761a, #8f4a0b);
}

.reward-level {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid #0d1030;
  border-radius: 50%;
  background: linear-gradient(#5a63d8, #3a40a8);
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 0 2px 0 #0d1030;
}

.is-milestone .reward-level {
  border-radius: 12px;
  background: linear-gradient(#ffe25a, #f5a417);
  color: #3b1d00;
  text-shadow: none;
}

.reward-content {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.reward-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: #0d103066;
  color: #fff;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.reward-state {
  color: #c9cdf5;
  font-size: 0.68rem;
  white-space: nowrap;
}

.is-claimed .reward-state {
  color: #8dffc4;
}

.is-next .reward-state {
  color: #ffd84a;
}

.rewards-screen .menu-secondary {
  width: 100%;
}

@media (max-width: 520px) {
  .sio-chapter {
    min-height: 250px;
  }

  .menu-primary.sio-play {
    min-height: 60px;
    font-size: 1.6rem;
  }

  .menu-nav-button {
    font-size: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-primary.sio-play,
  .menu-primary.sio-play::after,
  .loadout-preview.sio-hero #loadout-preview-content .character-preview,
  .levelup-banner,
  .xp-gain-text,
  .arena.boss-incoming::after,
  .boss-eta.is-close {
    animation: none;
  }
}

/* ============================================================
   Thème Halloween du menu Survivor.io
   ============================================================ */

.front-menu[data-screen="home"],
.front-menu[data-screen="rewards"] {
  background:
    radial-gradient(ellipse at 50% 110%, #ff6a0040 0, transparent 55%),
    radial-gradient(ellipse at 50% 40%, #3a0f4ad9 0, #1a0822ee 60%, #0a030df7 100%);
}

.front-menu[data-screen="home"] .menu-panel,
.front-menu[data-screen="rewards"] .menu-panel {
  border-color: #12060f;
  background:
    radial-gradient(ellipse at 50% 0, #ff7a1a2e 0, transparent 40%),
    radial-gradient(ellipse at 0 100%, #8cff3a14 0, transparent 40%),
    linear-gradient(180deg, #2e1040 0, #1d0a29 50%, #10050f 100%);
  box-shadow: 0 8px 0 #07020a, 0 16px 40px #000c, inset 0 0 0 2px #ff7a1a55, inset 0 0 30px #ff6a0022;
}

.front-menu[data-screen="home"] .menu-panel::before,
.front-menu[data-screen="rewards"] .menu-panel::before {
  top: -6px;
  left: -8px;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  content: "🕸️";
  font-size: 2.6rem;
  opacity: 0.75;
  pointer-events: none;
  transform: rotate(-90deg);
}

.sio-spider {
  position: absolute;
  top: 0;
  left: 22%;
  display: grid;
  justify-items: center;
  font-size: 1.1rem;
  animation: sio-spider-drop 3.4s ease-in-out infinite;
}

.sio-spider::before {
  width: 1px;
  height: 40px;
  background: linear-gradient(#ffffff22, #ffffffaa);
  content: "";
}

@keyframes sio-spider-drop {
  0%, 100% { translate: 0 -14px; }
  50% { translate: 0 6px; }
}

.sio-profile {
  border-color: #12060f;
  background: linear-gradient(#4a1a5c, #2b0d38);
  box-shadow: 0 4px 0 #12060f, inset 0 2px 0 #ff9a4a33;
}

.sio-level-badge {
  border-color: #12060f;
  background: linear-gradient(#ffb347, #ff7a1a);
  box-shadow: 0 2px 0 #12060f, 0 0 10px #ff7a1a88;
  color: #2a0d00;
}

.sio-profile .player-name-field input,
.sio-currency {
  border-color: #12060f;
  background: #1c0826;
}

.sio-xp-bar {
  border-color: #12060f;
  background: #170620;
}

.sio-chapter {
  border-color: #12060f;
  background: #12060f;
  box-shadow: 0 5px 0 #12060f, 0 10px 26px #000a, 0 0 24px #ff6a0033;
}

.sio-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #ffe 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 46%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #0f0520 0, #2a0c44 42%, #5c1d4f 70%, #c24a17 100%);
}

.sio-moon {
  position: absolute;
  top: 9%;
  right: 9%;
  width: clamp(54px, 11cqh, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, #e6c46a 0 9%, transparent 10%),
    radial-gradient(circle at 62% 62%, #e6c46a 0 12%, transparent 13%),
    radial-gradient(circle at 68% 28%, #e6c46a 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fffbe3, #ffe58f 60%, #f0b443);
  box-shadow: 0 0 30px #ffe08acc, 0 0 80px #ffb34766;
  animation: sio-moon-glow 4s ease-in-out infinite alternate;
}

@keyframes sio-moon-glow {
  to { box-shadow: 0 0 40px #ffe08aee, 0 0 110px #ffb34788; }
}

.sio-bat {
  position: absolute;
  left: -10%;
  font-size: 1.15rem;
  filter: brightness(0) drop-shadow(0 0 2px #ff7a1a88);
  animation:
    sio-bat-cross var(--bat-time, 9s) linear var(--bat-delay, 0s) infinite,
    sio-bat-bob 0.5s ease-in-out infinite alternate;
}

.sio-bat-1 { top: 16%; --bat-time: 9s; }
.sio-bat-2 { top: 28%; --bat-time: 12s; --bat-delay: -5s; font-size: 0.9rem; }
.sio-bat-3 { top: 10%; --bat-time: 15s; --bat-delay: -9s; font-size: 0.75rem; }

@keyframes sio-bat-cross {
  from { left: -10%; }
  to { left: 110%; }
}

@keyframes sio-bat-bob {
  from { translate: 0 -4px; scale: 1 0.8; }
  to { translate: 0 4px; scale: 1 1.1; }
}

.sio-hill {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sio-hill-back {
  left: -15%;
  width: 130%;
  height: 34%;
  background: linear-gradient(#2a0f33, #1a0820);
}

.sio-hill-front {
  right: -20%;
  width: 85%;
  height: 22%;
  background: #0f0412;
}

.sio-tree {
  position: absolute;
  bottom: 22%;
  left: 3%;
  width: clamp(70px, 14cqh, 110px);
  aspect-ratio: 0.8;
  background: #0b030d;
  clip-path: polygon(
    44% 100%, 47% 62%, 22% 40%, 8% 38%, 6% 34%, 20% 35%, 10% 22%, 14% 21%, 26% 34%, 46% 52%,
    44% 30%, 34% 14%, 38% 12%, 48% 26%, 52% 6%, 56% 7%, 54% 30%, 58% 46%, 76% 28%, 88% 24%,
    90% 28%, 78% 32%, 60% 56%, 56% 100%
  );
}

.sio-grave {
  position: absolute;
  bottom: 14%;
  width: 18px;
  height: 24px;
  border: 2px solid #12060f;
  border-radius: 9px 9px 2px 2px;
  background: linear-gradient(#5d5068, #3a3044);
  box-shadow: inset -3px 0 0 #0004;
}

.sio-grave-1 { left: 24%; }
.sio-grave-2 { left: 33%; bottom: 12%; height: 18px; rotate: -8deg; }

.sio-grave-3 {
  right: 22%;
  bottom: 10%;
  width: 16px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: #3a3044;
  clip-path: polygon(38% 0, 62% 0, 62% 28%, 100% 28%, 100% 46%, 62% 46%, 62% 100%, 38% 100%, 38% 46%, 0 46%, 0 28%, 38% 28%);
}

.sio-pumpkin {
  position: absolute;
  bottom: 4%;
  font-size: 1.7rem;
  filter: drop-shadow(0 0 8px #ff7a1a) drop-shadow(0 0 18px #ff4a0088);
  animation: sio-pumpkin-flicker 1.8s ease-in-out infinite;
}

.sio-pumpkin-left { left: 12%; }
.sio-pumpkin-right { right: 8%; font-size: 1.35rem; animation-delay: -0.7s; }

@keyframes sio-pumpkin-flicker {
  0%, 100% { filter: drop-shadow(0 0 8px #ff7a1a) drop-shadow(0 0 18px #ff4a0088); }
  40% { filter: drop-shadow(0 0 4px #ff7a1a) drop-shadow(0 0 10px #ff4a0066); }
  60% { filter: drop-shadow(0 0 11px #ffb347) drop-shadow(0 0 24px #ff4a00aa); }
}

.sio-fog {
  position: absolute;
  bottom: -6%;
  left: -20%;
  width: 140%;
  height: 32%;
  background:
    radial-gradient(ellipse at 20% 60%, #d9c8f033 0, transparent 50%),
    radial-gradient(ellipse at 60% 50%, #d9c8f02b 0, transparent 45%),
    radial-gradient(ellipse at 90% 70%, #d9c8f033 0, transparent 50%);
  filter: blur(4px);
  animation: sio-fog-drift 10s ease-in-out infinite alternate;
}

@keyframes sio-fog-drift {
  to { translate: 12% 0; }
}

.sio-web {
  position: absolute;
  top: -8px;
  font-size: 2.4rem;
  opacity: 0.55;
}

.sio-web-left { left: -8px; rotate: -90deg; }
.sio-web-right { right: -8px; }

.sio-chapter-kicker {
  border-color: #12060f;
  background: linear-gradient(#8cff3a, #3f9e12);
  box-shadow: 0 2px 0 #12060f, 0 0 10px #8cff3a66;
  color: #0e2a02;
}

.sio-chapter-title {
  color: #ffb347;
  text-shadow: -3px -3px 0 #12060f, 3px -3px 0 #12060f, -3px 3px 0 #12060f, 3px 3px 0 #12060f, 0 5px 0 #12060f, 0 0 22px #ff6a00cc;
}

.loadout-preview.sio-hero #loadout-preview-content .character-preview {
  background: radial-gradient(ellipse at 50% 88%, #000c 0 26%, transparent 28%);
  filter: brightness(1.25) drop-shadow(0 0 2px #ffd9a0) drop-shadow(0 0 10px #ff7a1a88);
}

.loadout-preview.sio-hero .loadout-preview-label strong {
  color: #ffb347;
}

.loadout-preview.sio-hero .locker-hint {
  border-color: #12060f;
  background: linear-gradient(#a45cff, #6b2fa3);
}

.sio-next-reward {
  border-color: #12060f;
  background: linear-gradient(90deg, #4a1a5c, #7a2a6a);
  box-shadow: 0 3px 0 #12060f;
}

.sio-next-reward:hover {
  background: linear-gradient(90deg, #5c2272, #8f327c);
}

.menu-primary.sio-play {
  border-color: #12060f;
  background:
    radial-gradient(ellipse at 50% -20%, #ffffff66, transparent 60%),
    repeating-linear-gradient(90deg, #0000 0 22%, #b8430a33 22% 24%),
    linear-gradient(#ffb347, #ff7a1a 55%, #d2520c);
  box-shadow: 0 7px 0 #6e2604, 0 10px 18px #0009, 0 0 26px #ff6a0066;
  text-shadow: -3px -3px 0 #12060f, 3px -3px 0 #12060f, -3px 3px 0 #12060f, 3px 3px 0 #12060f, 0 5px 0 #12060f;
}

.menu-primary.sio-play span::before,
.menu-primary.sio-play span::after {
  content: "🎃";
  font-size: 0.75em;
  text-shadow: none;
  vertical-align: 0.1em;
}

.menu-primary.sio-play span::before {
  margin-right: 0.35em;
}

.menu-primary.sio-play span::after {
  margin-left: 0.35em;
}

.menu-primary.sio-play:active {
  box-shadow: 0 2px 0 #6e2604;
}

.menu-nav {
  border-top-color: #12060f;
  background: linear-gradient(#2a0d36, #12050f);
  box-shadow: 0 -4px 12px #0007, inset 0 2px 0 #ff7a1a33;
}

.menu-nav-button {
  color: #d3b7d9;
}

.menu-nav-button.is-active {
  border-color: #12060f;
  background: linear-gradient(#ffb347, #ff7a1a);
  box-shadow: 0 3px 0 #6e2604, 0 0 14px #ff7a1a88;
  color: #2a0d00;
}

.menu-nav-button:focus-visible,
.sio-next-reward:focus-visible,
.menu-primary.sio-play:focus-visible {
  outline-color: #8cff3a;
}

.reward-node {
  border-color: #12060f;
  background: linear-gradient(#3e1650, #2a0d38);
  box-shadow: 0 3px 0 #12060f;
}

.reward-node.is-claimed,
.reward-node.is-milestone.is-claimed {
  background: linear-gradient(#24521a, #173a10);
}

.reward-node.is-next {
  border-color: #ff9a3c;
  background: linear-gradient(#5a1f70, #3e1650);
  box-shadow: 0 3px 0 #12060f, 0 0 16px #ff7a1a88;
}

.reward-node.is-milestone {
  background: linear-gradient(#6b2fa3, #4a1a75);
}

.reward-node.is-major {
  background: linear-gradient(#d2520c, #8a2f05);
}

.reward-level {
  border-color: #12060f;
  background: linear-gradient(#7a3fa8, #4a1a75);
}

.is-milestone .reward-level {
  background: linear-gradient(#ffb347, #ff7a1a);
  color: #2a0d00;
}

.is-claimed .reward-state {
  color: #a8ff7a;
}

.is-next .reward-state {
  color: #ffb347;
}

.rewards-track {
  scrollbar-color: #ff7a1a #1c0826;
}

@media (prefers-reduced-motion: reduce) {
  .sio-moon,
  .sio-bat,
  .sio-pumpkin,
  .sio-fog,
  .sio-spider {
    animation: none;
  }
}

/* ============================================================
   Tirs ennemis réalistes : visée, recul, projectiles, impacts
   ============================================================ */

.enemy-aim-arrow, .enemy-charge-arrow, .enemy-muzzle-arrow, .enemy-impact-arrow {
  --shot-color: #ffd2a0;
  --shot-glow: #ff6a3a;
}

.enemy-aim-stone, .enemy-charge-stone, .enemy-muzzle-stone, .enemy-impact-stone {
  --shot-color: #eadfca;
  --shot-glow: #9b8f78;
}

.enemy-aim-spirit, .enemy-charge-spirit, .enemy-muzzle-spirit, .enemy-impact-spirit {
  --shot-color: #b4ffd9;
  --shot-glow: #2fd68a;
}

.enemy-aim-nightmare, .enemy-charge-nightmare, .enemy-muzzle-nightmare, .enemy-impact-nightmare {
  --shot-color: #ebb8ff;
  --shot-glow: #a62cff;
}

.enemy-aim-hellfire, .enemy-charge-hellfire, .enemy-muzzle-hellfire, .enemy-impact-hellfire {
  --shot-color: #ffe066;
  --shot-glow: #ff4a00;
}

.enemy-aim-line {
  position: absolute;
  z-index: 4;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--shot-glow) 0 9px, transparent 9px 15px);
  filter: drop-shadow(0 0 3px var(--shot-glow));
  opacity: 0.85;
  pointer-events: none;
  transform: translateY(-50%) rotate(var(--angle));
  transform-origin: 0 50%;
  animation: enemy-aim-grow var(--windup) ease-out forwards;
}

.enemy-aim-hellfire,
.enemy-aim-nightmare {
  height: 3px;
}

.enemy-aim-stone {
  background: repeating-linear-gradient(90deg, var(--shot-color) 0 4px, transparent 4px 11px);
}

@keyframes enemy-aim-grow {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.25; }
  70% { clip-path: inset(0 0 0 0); opacity: 0.7; }
  85% { opacity: 1; filter: drop-shadow(0 0 6px var(--shot-glow)); }
  100% { clip-path: inset(0 0 0 0); opacity: 0.4; }
}

.fx-layer.enemy-charge-fx,
.fx-layer.enemy-muzzle-fx,
.fx-layer.enemy-shot-impact {
  z-index: 6;
}

.enemy-charge-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, var(--shot-color) 45%, transparent 72%);
  box-shadow: 0 0 10px var(--shot-glow);
  translate: -50% -50%;
  animation: enemy-charge-grow var(--windup) ease-in forwards;
}

.enemy-charge-arrow .enemy-charge-core,
.enemy-charge-stone .enemy-charge-core {
  width: 8px;
  height: 8px;
}

@keyframes enemy-charge-grow {
  0% { opacity: 0; scale: 0.2; }
  80% { opacity: 1; scale: 1.5; }
  100% { opacity: 1; scale: 1.8; }
}

.enemy-charge-mote {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--shot-color);
  box-shadow: 0 0 5px var(--shot-glow);
  translate: -50% -50%;
  animation: enemy-charge-mote var(--windup) ease-in var(--t) forwards;
}

.enemy-charge-arrow .enemy-charge-mote,
.enemy-charge-stone .enemy-charge-mote {
  display: none;
}

@keyframes enemy-charge-mote {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(0); }
}

.enemy-muzzle-flash {
  width: 30px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0 18%, var(--shot-color) 40%, var(--shot-glow) 60%, transparent 72%);
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: enemy-muzzle-pop 0.18s ease-out forwards;
}

.enemy-muzzle-arrow .enemy-muzzle-flash,
.enemy-muzzle-stone .enemy-muzzle-flash {
  width: 18px;
  height: 8px;
  background: radial-gradient(ellipse, #fff8 0 20%, var(--shot-color) 45%, transparent 72%);
}

.enemy-muzzle-hellfire .enemy-muzzle-flash {
  width: 46px;
  height: 26px;
}

@keyframes enemy-muzzle-pop {
  0% { opacity: 1; scale: 0.4; }
  40% { opacity: 1; scale: 1.3; }
  100% { opacity: 0; scale: 1.6; }
}

.enemy-muzzle-smoke {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--shot-color) 55%, #6d6470) 0, transparent 70%);
  translate: -50% -50%;
  animation: enemy-muzzle-smoke 0.4s ease-out var(--t) forwards;
}

@keyframes enemy-muzzle-smoke {
  0% { opacity: 0.8; transform: rotate(var(--a)) translateX(2px) scale(0.5); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(calc(2 * var(--s))); }
}

.boss-projectile.enemy-shot {
  z-index: 6;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(var(--angle)) scale(var(--world-scale, 1));
}

.boss-projectile.enemy-shot::before,
.boss-projectile.enemy-shot::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.boss-projectile.enemy-shot-arrow {
  width: 46px;
  height: 4px;
  background:
    linear-gradient(90deg, transparent, #e6dcff88) 0 50% / 30% 2px no-repeat,
    linear-gradient(#f0d29a, #a87a44) 30% 50% / 62% 3px no-repeat;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 4px #b07cffaa);
}

.enemy-shot-arrow::before {
  top: -4px;
  left: 28%;
  width: 9px;
  height: 11px;
  background: linear-gradient(90deg, #6b0f1a, #c4283a);
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%, 30% 50%);
}

.enemy-shot-arrow::after {
  top: -4px;
  right: -4px;
  width: 0;
  height: 0;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  border-left: 10px solid #d6dde3;
  filter: drop-shadow(0 0 2px #fff8);
}

.boss-projectile.enemy-shot-stone {
  width: 14px;
  height: 12px;
}

.enemy-shot-stone::before {
  top: 50%;
  right: 60%;
  width: 28px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #e8dcc699);
  filter: blur(1px);
  translate: 0 -50%;
}

.enemy-shot-stone::after {
  inset: 0;
  border-radius: 45% 55% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 35% 30%, #c9c1b3, #7a7165 55%, #3d362f);
  box-shadow: inset -2px -2px 0 #0006, 0 0 0 1px #2a2420;
  animation: enemy-stone-spin 0.32s linear infinite;
}

@keyframes enemy-stone-spin {
  to { rotate: 360deg; }
}

.boss-projectile.enemy-shot-spirit {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #f2fff8 0 18%, #7dffc0 42%, #1a9a60 66%, transparent 72%);
  box-shadow: 0 0 12px #4dffa6, 0 0 24px #1a9a6088;
  animation: enemy-orb-pulse 0.28s ease-in-out infinite alternate;
}

.enemy-shot-spirit::before {
  top: 50%;
  right: 45%;
  width: 38px;
  height: 12px;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(90deg, transparent, #4dffa655 50%, #b4ffd9aa);
  filter: blur(2px);
  translate: 0 -50%;
}

.boss-projectile.enemy-shot-nightmare {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, #fff 0 10%, #ebb8ff 24%, #a62cff 50%, #3d0a66 70%, transparent 74%);
  box-shadow: 0 0 14px #c25cff, 0 0 30px #6b1fb3aa;
  animation: enemy-orb-pulse 0.24s ease-in-out infinite alternate;
}

.enemy-shot-nightmare::before {
  top: 50%;
  right: 40%;
  width: 46px;
  height: 16px;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(90deg, transparent, #6b1fb366 45%, #d58bffbb);
  filter: blur(2px);
  translate: 0 -50%;
  animation: enemy-tail-flicker 0.12s ease-in-out infinite alternate;
}

.boss-projectile.enemy-shot-nightmare::after {
  inset: 0;
  display: grid;
  place-items: center;
  content: "💀";
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  rotate: calc(-1 * var(--angle));
  filter: drop-shadow(0 0 2px #fff);
}

.boss-projectile.enemy-shot-hellfire {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 50%, #fffbe0 0 14%, #ffd23f 30%, #ff6a00 54%, #a1140b 70%, transparent 74%);
  box-shadow: 0 0 18px #ff6a00, 0 0 40px #ff2a00aa;
  animation: enemy-orb-pulse 0.16s ease-in-out infinite alternate;
}

.enemy-shot-hellfire::before {
  top: 50%;
  right: 42%;
  width: 60px;
  height: 22px;
  border-radius: 50% 10% 10% 50%;
  background: linear-gradient(90deg, transparent, #7a0a0055 25%, #ff2a00aa 60%, #ffb347dd);
  filter: blur(2.5px);
  translate: 0 -50%;
  animation: enemy-tail-flicker 0.1s ease-in-out infinite alternate;
}

.enemy-shot-hellfire::after {
  top: 50%;
  right: 70%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: -14px -6px 0 -1px #ff9a3c, -24px 5px 0 -2px #ff6a00, -34px -3px 0 -2px #ff4a0088;
  translate: 0 -50%;
}

@keyframes enemy-orb-pulse {
  from { scale: 0.9; }
  to { scale: 1.1; }
}

@keyframes enemy-tail-flicker {
  from { scale: 0.85 0.8; opacity: 0.8; }
  to { scale: 1.1 1.1; opacity: 1; }
}

.enemy-impact-flash {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, var(--shot-color) 38%, var(--shot-glow) 58%, transparent 72%);
  translate: -50% -50%;
  animation: enemy-impact-flash 0.3s ease-out forwards;
}

.enemy-shot-impact.is-big .enemy-impact-flash {
  width: 46px;
  height: 46px;
}

@keyframes enemy-impact-flash {
  0% { opacity: 1; scale: 0.3; }
  100% { opacity: 0; scale: 1.5; }
}

.enemy-impact-spark {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--shot-color);
  box-shadow: 0 0 5px var(--shot-glow);
  translate: -50% -50%;
  animation: enemy-impact-spark 0.4s ease-out var(--t) forwards;
}

.enemy-impact-stone .enemy-impact-spark {
  border-radius: 40%;
  background: #8a8174;
  box-shadow: none;
}

.enemy-impact-arrow .enemy-impact-spark {
  width: 7px;
  height: 2px;
  background: #8a6136;
  box-shadow: none;
}

@keyframes enemy-impact-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(2px) rotate(0deg); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--spin)) scale(var(--s)); }
}

.enemy.enemy-firing :is(.enemy-boss-art, .enemy-minion-art, .hero-pixel-art) {
  animation: enemy-recoil 0.24s ease-out;
}

@keyframes enemy-recoil {
  0% { translate: 0 0; }
  25% { translate: var(--recoil-x, 0) var(--recoil-y, 0); }
  100% { translate: 0 0; }
}

.enemy-realistic.enemy-aiming .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-draw var(--aim-windup, 0.6s) ease-out forwards;
}

.enemy-realistic.enemy-firing .rig-limbs .rig-part:is(.rig-arm-l, .rig-arm-r) {
  animation: rig-arm-release 0.26s ease-out;
}

@keyframes rig-arm-draw {
  0% { rotate: calc(var(--side) * 2deg); }
  80% { rotate: calc(var(--side) * -34deg); }
  90% { rotate: calc(var(--side) * -36deg); }
  100% { rotate: calc(var(--side) * -35deg); }
}

@keyframes rig-arm-release {
  0% { rotate: calc(var(--side) * -35deg); }
  30% { rotate: calc(var(--side) * 28deg); }
  100% { rotate: calc(var(--side) * 2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .enemy-aim-line,
  .enemy-shot-stone::after,
  .boss-projectile.enemy-shot,
  .boss-projectile.enemy-shot::before,
  .enemy.enemy-firing :is(.enemy-boss-art, .enemy-minion-art, .hero-pixel-art) {
    animation: none;
  }
}

/* ============================================================
   Arme tenue en main : l'arme suit le bras, poses à deux mains
   et cycles de tir par type d'arme.
   ============================================================ */

.player {
  --arm-aim: -90deg;
}

.rig-weapon-mount {
  --side: -1;
  --hold-angle: 0deg;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
  transform-origin: var(--rig-arm-r, 80%) var(--rig-pivot, 22%);
}

.rig-weapon-mount > .hero-real-weapon {
  rotate: calc(var(--wrist) + var(--wrist-kick, 0deg));
  translate: 0 calc(-1 * var(--weapon-recoil, 0px));
  top: var(--rig-hand-r, 60%);
  right: auto;
  bottom: auto;
  left: calc((var(--rig-arm-r, 80%) + 100%) / 2);
  width: auto;
  height: calc(var(--hold-size, 0.3) * 100%);
  aspect-ratio: var(--hold-ratio, 1);
  transform:
    rotate(calc(var(--hold-rotate, 0deg) + var(--hold-comp, 0deg)))
    translate(calc(-1 * var(--grip-x, 50%)), calc(-1 * var(--grip-y, 80%)));
  transform-origin: 0 0;
  transition: filter 0.15s ease, transform 0.14s ease-out, --wrist 0.18s ease-out;
}

.rig-weapon-mount > .hero-weapon-flash {
  position: absolute;
  top: calc(var(--rig-hand-r, 60%) + var(--hold-size, 0.3) * var(--muzzle, 0.6) * 100%);
  left: calc((var(--rig-arm-r, 80%) + 100%) / 2);
  display: block;
  width: calc(var(--hold-size, 0.3) * 75%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe27a 28%, #ff8a1a 50%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
}

.player.is-aiming .rig,
:is(.player, .hero-real)[data-weapon-hands="two"] .rig {
  --rig-overlap-r: 0%;
}

:is(.player, .hero-real)[data-weapon-hands="two"] .rig {
  --rig-overlap-l: 0%;
}

/* Repos et marche : l'arme suit le bras droit. */
.hero-real .rig-limbs > .rig-weapon-mount {
  animation: rig-arm-idle 2.6s ease-in-out infinite;
}

.player:is(.is-walking, .is-running) .rig-limbs > .rig-weapon-mount {
  animation: rig-arm-walk var(--rig-dur) ease-in-out calc(var(--rig-dur) / -2) infinite;
}

.player.is-running .rig-limbs > .rig-weapon-mount {
  animation-name: rig-arm-run;
}

/* Arme à deux mains : au repos elle est tenue basse vers l'avant, en marchant elle balance avec
   les pas, en courant elle est portée en travers, canon vers le haut. La main gauche ne la lâche pas. */
.rig {
  --ready-r: -28deg;
  --ready-l: -52deg;
  --ready-comp: -50deg;
  --ready-bob: 2.5deg;
  --ready-lag: -0.65s;
}

.player.is-walking .rig {
  --ready-dur: var(--rig-dur);
  --ready-bob: 7deg;
  --ready-lag: 0s;
}

.player.is-running .rig {
  --ready-r: 6deg;
  --ready-l: -66deg;
  --ready-comp: 145deg;
  --ready-dur: var(--rig-dur);
  --ready-bob: 9deg;
  --ready-lag: 0s;
}

:is(.player, .hero-real)[data-weapon-hands="two"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  --hold-angle: var(--ready-r);
  animation: hold-ready var(--ready-dur, 2.6s) ease-in-out infinite;
}

:is(.player, .hero-real)[data-weapon-hands="two"] .rig-limbs .rig-part.rig-arm-l {
  --hold-angle: var(--ready-l);
  z-index: 5;
  animation: hold-ready var(--ready-dur, 2.6s) ease-in-out var(--ready-lag) infinite;
}

[data-weapon-hands="two"] .rig-weapon-mount:not([data-hang]) {
  --hold-comp: var(--ready-comp);
}

[data-weapon-hands="two"] .rig-weapon-mount[data-hang] {
  --hold-comp: calc(-1 * var(--ready-r));
}

/* Dégainer (début de vague, nouvelle arme) : la main va chercher l'arme dans le dos, la ramène
   devant et la main gauche vient la saisir. */
.player.is-drawing .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-draw 0.7s cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-drawing[data-weapon-hands="two"] .rig-limbs .rig-part.rig-arm-l {
  animation: hold-draw-l 0.7s cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-drawing .rig-weapon-mount > .hero-real-weapon {
  animation: hold-draw-glint 0.7s ease-out;
}

/* Visée : le bras armé pointe vers la cible (coude légèrement plié), l'autre main vient tenir l'arme. */
.player.is-aiming .rig {
  --reach: 0.93;
}

.player.is-aiming[data-weapon-hands="two"]:is([data-weapon-motion="gun"], [data-weapon-motion="crossbow"], [data-weapon-motion="melee"]) .rig {
  --reach: 0.82;
}

.player.is-aiming .rig-limbs .rig-part.rig-arm-l {
  --support: clamp(-78deg, calc(var(--arm-aim) * 0.7), -35deg);
  --draw: 1;
}

.player.is-aiming:is([data-weapon-motion="bow"], [data-weapon-motion="sling"]) .rig-limbs .rig-part.rig-arm-l {
  --support: clamp(-95deg, calc(var(--arm-aim) * 0.92), -40deg);
  --draw: 0.6;
}

.player.is-aiming .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  rotate: var(--arm-aim);
  scale: 1 var(--reach);
  animation: none;
  transition: rotate 0.09s ease-out;
}

.player.is-aiming .rig-weapon-mount {
  --hold-comp: 0deg;
}

.player.is-aiming .rig-weapon-mount[data-hang] {
  --hold-comp: calc(-1 * var(--arm-aim));
}

.player.is-aiming[data-weapon-hands="two"] .rig-limbs .rig-part.rig-arm-l {
  rotate: var(--support);
  scale: 1 var(--draw);
  animation: none;
  transition: rotate 0.09s ease-out, scale 0.12s ease-out;
}

/* Tir : recul des deux bras pour les armes à feu, corde lâchée pour l'arc et la fronde,
   grand moulinet pour la mêlée, poussée magique pour les sorts. */
.player.is-shooting .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-kick 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.player.is-shooting[data-weapon-motion="crossbow"] .rig {
  --kick: -7deg;
}

.player.is-shooting[data-weapon-hands="two"] .rig-limbs .rig-part.rig-arm-l {
  animation: hold-kick-l 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.player.is-shooting:is([data-weapon-motion="bow"], [data-weapon-motion="sling"]) .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation-name: hold-bow-torque;
}

.player.is-shooting[data-weapon-hands="two"]:is([data-weapon-motion="bow"], [data-weapon-motion="sling"]) .rig-limbs .rig-part.rig-arm-l {
  animation: hold-bow-release 0.24s ease-out;
}

.player.is-shooting[data-weapon-motion="melee"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-swing var(--shot-time, 0.42s) cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-hands="two"][data-weapon-motion="melee"] .rig-limbs .rig-part.rig-arm-l {
  animation: hold-swing-l var(--shot-time, 0.42s) cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-motion="gun"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount),
.player.is-shooting[data-weapon-hands="two"][data-weapon-motion="gun"] .rig-limbs .rig-part.rig-arm-l {
  animation-duration: var(--shot-time, 0.14s);
}

.player.is-shooting[data-weapon-motion="magic"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-cast 0.24s ease-out;
}

.player.is-shooting[data-weapon-hands="two"][data-weapon-motion="magic"] .rig-limbs .rig-part.rig-arm-l {
  animation: hold-cast-l 0.24s ease-out;
}

.player.is-shooting[data-weapon-motion="magic"] .rig-weapon-mount > .hero-real-weapon {
  filter: brightness(1.6) drop-shadow(0 0 6px #b98cff) drop-shadow(0 0 12px #8cff3a88);
}

.player.is-shooting[data-weapon-motion="gun"] .rig-weapon-mount > .hero-weapon-flash {
  animation: hold-flash 0.16s ease-out;
}

.player.is-shooting[data-weapon-motion="magic"] .rig-weapon-mount > .hero-weapon-flash {
  background: radial-gradient(circle, #fff 0 10%, #d7b8ff 26%, #8b4dff 48%, #8cff3a33 62%, transparent 72%);
  animation: hold-flash 0.24s ease-out;
}

@keyframes hold-ready {
  0%, 100% { rotate: var(--hold-angle); }
  50% { rotate: calc(var(--hold-angle) + var(--ready-bob, 2.5deg)); }
}

@keyframes hold-kick {
  0% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
  22% { rotate: calc(var(--arm-aim) + var(--kick, -14deg)); scale: 1 calc(var(--reach, 1) - 0.1); }
  100% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
}

@keyframes hold-kick-l {
  0% { rotate: var(--support); scale: 1; }
  18% { rotate: calc(var(--support) + var(--kick, -14deg)); scale: 1 0.88; }
  45% { rotate: calc(var(--support) - 3deg); scale: 1 0.7; }
  72% { rotate: var(--support); scale: 1 1.06; }
  100% { rotate: var(--support); scale: 1; }
}

@keyframes hold-draw {
  0% { rotate: var(--hold-angle, 0deg); }
  30% { rotate: -165deg; }
  45% { rotate: -160deg; }
  80% { rotate: calc(var(--hold-angle, 0deg) - 12deg); }
  100% { rotate: var(--hold-angle, 0deg); }
}

@keyframes hold-draw-l {
  0%, 45% { rotate: 6deg; }
  78% { rotate: calc(var(--hold-angle) - 16deg); }
  100% { rotate: var(--hold-angle); }
}

@keyframes hold-draw-glint {
  0%, 70% { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.65)); }
  82% { filter: brightness(1.7) drop-shadow(0 0 5px #fff6c8); }
  100% { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.65)); }
}

@keyframes hold-bow-torque {
  0%, 100% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
  20% { rotate: calc(var(--arm-aim) + 5deg); scale: 1 calc(var(--reach, 1) - 0.04); }
}

@keyframes hold-bow-release {
  0% { rotate: var(--support); scale: 1 0.6; }
  16% { rotate: calc(var(--support) - 12deg); scale: 1 0.42; }
  55% { rotate: calc(var(--support) - 4deg); scale: 1 1; }
  100% { rotate: var(--support); scale: 1 0.6; }
}

@keyframes hold-swing {
  0% { rotate: calc(var(--arm-aim) - 75deg); scale: 1 var(--reach, 1); }
  45% { rotate: calc(var(--arm-aim) + 45deg); scale: 1 1; }
  100% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
}

@keyframes hold-swing-l {
  0% { rotate: calc(var(--support) - 60deg); }
  45% { rotate: calc(var(--support) + 35deg); }
  100% { rotate: var(--support); }
}

@keyframes hold-cast {
  0%, 100% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
  35% { rotate: calc(var(--arm-aim) - 8deg); scale: 1 1.1; }
}

@keyframes hold-cast-l {
  0%, 100% { rotate: var(--support); scale: 1; }
  35% { rotate: calc(var(--support) - 8deg); scale: 1 1.08; }
}

@keyframes hold-flash {
  0% { opacity: 1; scale: 0.6; }
  100% { opacity: 0; scale: 1.5; }
}

/* ============================================================
   Héros du menu intégré à la scène : debout sur la colline,
   éclairé par la lune et les citrouilles, pris dans la brume.
   ============================================================ */

.sio-chapter {
  isolation: isolate;
}

.sio-chapter::after {
  position: absolute;
  right: -12%;
  bottom: -5%;
  left: -12%;
  z-index: 2;
  height: 17%;
  background:
    radial-gradient(ellipse at 25% 60%, #e6d6ff2e 0, transparent 55%),
    radial-gradient(ellipse at 55% 70%, #e6d6ff38 0, transparent 50%),
    radial-gradient(ellipse at 85% 55%, #e6d6ff2a 0, transparent 55%);
  content: "";
  filter: blur(5px);
  pointer-events: none;
  animation: sio-fog-drift 13s ease-in-out infinite alternate-reverse;
}

.loadout-preview.sio-hero {
  align-self: end;
  margin-bottom: -14px;
  padding: 0 0 22px;
}

.loadout-preview.sio-hero #loadout-preview-content {
  gap: 0;
}

.loadout-preview.sio-hero #loadout-preview-content .character-preview {
  z-index: 1;
  width: clamp(80px, 14cqh, 170px);
  height: clamp(92px, 15.6cqh, 196px);
  border-radius: 0;
  background:
    radial-gradient(ellipse 40% 6% at 50% 93%, #000b 0, #0005 55%, transparent 100%),
    radial-gradient(ellipse 46% 12% at 50% 90%, #ff7a1a38 0, transparent 100%);
  filter: none;
  transform-origin: 50% 100%;
  animation: sio-hero-breathe 3.2s ease-in-out infinite;
}

.loadout-preview.sio-hero #loadout-preview-content .character-preview .hero-real {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(1.5px -1.5px 0 #ffe7a877)
    drop-shadow(-1px 0 0 #7a3fb066)
    drop-shadow(0 3px 5px #ff6a0055)
    brightness(1.06);
  transition: filter 0.15s ease-out;
}

.loadout-preview.sio-hero:hover .character-preview {
  scale: 1;
}

.loadout-preview.sio-hero:hover #loadout-preview-content .character-preview .hero-real {
  filter:
    drop-shadow(1.5px -1.5px 0 #ffe7a8cc)
    drop-shadow(0 0 6px #ffb347aa)
    brightness(1.18);
}

@keyframes sio-hero-breathe {
  0%, 100% { scale: 1 1; }
  50% { scale: 1.01 1.025; }
}

.loadout-preview.sio-hero .loadout-preview-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  z-index: 3;
  padding: 1px 10px 2px;
  border: 2px solid #12060f;
  border-radius: 999px;
  background: linear-gradient(#3a1248f0, #160719f0);
  box-shadow: 0 2px 0 #12060f, 0 0 0 1px #ff7a1a88 inset, 0 0 12px #ff6a0055;
  text-shadow: 0 1px 0 #12060f;
  white-space: nowrap;
  translate: -50% 0;
}

.loadout-preview.sio-hero .loadout-preview-label strong {
  font-size: 0.72rem;
}

.loadout-preview.sio-hero .loadout-preview-label span {
  display: none;
}

.loadout-preview.sio-hero .locker-hint {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .rig-weapon-mount,
  .rig-weapon-mount > .hero-weapon-flash,
  .sio-chapter::after {
    animation: none !important;
  }
}

/* Caméra façon Survivor.io : vue de dessus zoomée qui suit le joueur sans sortir de la carte. */
.arena {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgb(70 60 120 / 0.35), transparent 70%),
    linear-gradient(180deg, #070812 0%, #141126 38%, #0b0910 100%);
}

.world {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--map-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 0 0;
  /* Caméra 3D : le point suivi reste au centre de l'écran, le monde s'incline en perspective. */
  transform:
    translate(var(--cam-mid-x, 0px), var(--cam-mid-y, 0px))
    perspective(var(--cam-persp, 1400px))
    rotateX(var(--cam-tilt, 0deg))
    rotateZ(var(--cam-yaw, 0deg))
    translate(var(--cam-focus-x, 0px), var(--cam-focus-y, 0px))
    scale3d(var(--cam-zoom, 1), var(--cam-zoom, 1), var(--cam-zoom, 1));
  pointer-events: none;
}

.world > * {
  pointer-events: none;
}

.world > .boss-portal .portal-gate {
  pointer-events: auto;
  cursor: pointer;
}


/* Portail : arche de pierre runique debout, vortex d'énergie et cercle de runes au sol. */
.boss-portal {
  --pa: #f2fff8;
  --pb: #3fe6a6;
  --pc: #0f5149;
  position: absolute;
  z-index: 5;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pa);
  cursor: pointer;
}

.boss-portal-throne {
  --pa: #fff0ff;
  --pb: #c25bff;
  --pc: #3b0f63;
}

.portal-ground {
  position: absolute;
  top: -95px;
  left: -95px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--pb) 55%, transparent) 0, color-mix(in srgb, var(--pb) 22%, transparent) 38%, transparent 68%);
  transform: scale(var(--world-scale, 1));
  animation: portal-ground-open 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.portal-runes {
  position: absolute;
  inset: 22px;
  border: 2px solid color-mix(in srgb, var(--pa) 70%, transparent);
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--pa) 85%, transparent) 0 3deg, transparent 3deg 12deg, color-mix(in srgb, var(--pb) 70%, transparent) 12deg 14deg, transparent 14deg 22.5deg);
  box-shadow: 0 0 12px var(--pb), inset 0 0 12px var(--pb);
  mask: radial-gradient(circle, transparent 0 78%, #000 79% 100%);
  animation: portal-rune-spin 14s linear infinite;
}

.portal-runes-inner {
  inset: 50px;
  border-style: dashed;
  background: none;
  mask: none;
  opacity: 0.75;
  animation-duration: 9s;
  animation-direction: reverse;
}

.portal-gate {
  position: absolute;
  top: -140px;
  left: -52px;
  width: 104px;
  height: 140px;
  transform-origin: 50% 100%;
  transform: scale(var(--world-scale, 1));
  animation: portal-gate-rise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.portal-gate::before {
  position: absolute;
  inset: -26px -30px -10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--pb) 50%, transparent), transparent 66%);
  content: "";
  filter: blur(6px);
  animation: portal-glow-breathe 1.8s ease-in-out infinite alternate;
}

.portal-vortex {
  position: absolute;
  inset: 16px 15px 10px;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 32.6% 32.6% 0 0;
  background: radial-gradient(ellipse at 50% 56%, var(--pa) 0 5%, var(--pb) 20%, var(--pc) 52%, #05030a 82%);
  box-shadow: inset 0 0 18px var(--pb), inset 0 -10px 16px #0009;
  animation: portal-vortex-fade 1.1s 0.35s ease-out both;
}

.portal-depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 26% at 50% 57%, rgb(0 0 0 / 0.75), transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 57%, transparent 40%, rgb(0 0 0 / 0.45) 100%);
}

@property --portal-ring {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.portal-depth::after {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    ellipse 100% 86% at 50% 57%,
    transparent var(--portal-ring),
    color-mix(in srgb, var(--pa) 30%, transparent) calc(var(--portal-ring) + 3px),
    transparent calc(var(--portal-ring) + 7px),
    transparent calc(var(--portal-ring) + 14px)
  );
  content: "";
  mask: radial-gradient(ellipse 70% 62% at 50% 57%, transparent 0 8%, #000 30% 60%, transparent 92%);
  animation: portal-tunnel 0.85s linear infinite;
}

@keyframes portal-tunnel {
  from { --portal-ring: 14px; }
  to { --portal-ring: 0px; }
}

.portal-swirl {
  position: absolute;
  inset: -45%;
  background: repeating-conic-gradient(from 0deg at 50% 52%, transparent 0 16deg, color-mix(in srgb, var(--pa) 60%, transparent) 22deg, color-mix(in srgb, var(--pb) 40%, transparent) 27deg, transparent 38deg);
  mask: radial-gradient(circle at 50% 52%, transparent 0 7%, #000 18% 40%, transparent 58%);
  mix-blend-mode: screen;
  filter: blur(1.2px);
  animation: portal-swirl-spin 2.4s linear infinite;
}

.portal-swirl-reverse {
  inset: -30%;
  opacity: 0.6;
  background: repeating-conic-gradient(from 10deg at 50% 52%, transparent 0 28deg, color-mix(in srgb, var(--pb) 70%, transparent) 36deg, transparent 52deg);
  animation-duration: 4.2s;
  animation-direction: reverse;
}

.portal-core {
  position: absolute;
  top: 57%;
  left: 50%;
  width: 24px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0 22%, var(--pa) 40%, color-mix(in srgb, var(--pb) 60%, transparent) 62%, transparent 74%);
  filter: blur(1.5px);
  translate: -50% -50%;
  animation: portal-core-pulse 1.3s ease-in-out infinite alternate;
}

.portal-arch {
  position: absolute;
  inset: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 16px 15px 10px;
  border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px;
  background:
    radial-gradient(circle at 18% 72%, #4f6040b0 0 4px, transparent 5px),
    radial-gradient(circle at 84% 34%, #4f6040a0 0 3px, transparent 4px),
    radial-gradient(circle at 70% 86%, #2a2630 0 2px, transparent 3px),
    radial-gradient(ellipse 62% 56% at 50% 56%, color-mix(in srgb, var(--pb) 55%, transparent), transparent 74%),
    linear-gradient(90deg, rgb(0 0 0 / 0.5), transparent 28% 72%, rgb(0 0 0 / 0.55)),
    repeating-conic-gradient(from -90deg at 50% 100%, rgb(14 11 18 / 0.85) 0 1.4deg, transparent 1.4deg 15deg) top / 100% 38% no-repeat border-box,
    repeating-linear-gradient(180deg, transparent 0 16px, rgb(14 11 18 / 0.75) 16px 17.5px) bottom / 100% 62% no-repeat border-box,
    repeating-linear-gradient(118deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #97918a, #645f59 46%, #3b3834);
  background-origin: border-box;
  mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pb) 70%, transparent));
}

.portal-arch::after {
  position: absolute;
  top: -17px;
  left: 50%;
  display: grid;
  width: 20px;
  height: 22px;
  place-items: center;
  background: linear-gradient(180deg, #aba59d, #5d5953);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  color: var(--pa);
  content: "ᛟ";
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 0 4px var(--pb), 0 0 8px var(--pb);
  translate: -50% 0;
  animation: portal-glow-breathe 1.8s ease-in-out infinite alternate;
}

.portal-plinth {
  position: absolute;
  bottom: -5px;
  width: 28px;
  height: 14px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 30% 70%, rgb(0 0 0 / 0.4)),
    linear-gradient(180deg, #8e8881, #3a3733);
  box-shadow: 0 3px 5px #000a, 0 0 8px color-mix(in srgb, var(--pb) 40%, transparent);
}

.portal-plinth-left { left: -6px; }
.portal-plinth-right { right: -6px; }

.portal-sparks {
  position: absolute;
  inset: 0;
}

.portal-spark {
  position: absolute;
  bottom: 14px;
  left: var(--x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pa);
  box-shadow: 0 0 5px 2px var(--pb);
  opacity: 0;
  animation: portal-spark var(--life, 2s) linear var(--delay, 0s) infinite;
}

.portal-caption {
  position: absolute;
  top: -34px;
  left: 50%;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--pb) 70%, transparent);
  border-radius: 999px;
  background: rgb(8 6 14 / 0.8);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pb) 45%, transparent);
  color: var(--pa);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--pb);
  white-space: nowrap;
  translate: -50% 0;
}

.boss-portal-next-wave:not(.is-armed) {
  cursor: wait;
}

.boss-portal-next-wave:not(.is-armed) :is(.portal-vortex, .portal-runes) {
  filter: saturate(0.35) brightness(0.7);
}

.boss-portal-next-wave:not(.is-armed) .portal-swirl {
  animation-duration: 6s;
}

.boss-portal:focus-visible .portal-arch {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--pb));
}

@keyframes portal-ground-open {
  from { opacity: 0; scale: 0.1; }
  to { opacity: 1; scale: 1; }
}

@keyframes portal-gate-rise {
  0% { opacity: 0; scale: 0.6 0; }
  60% { opacity: 1; }
  100% { opacity: 1; scale: 1 1; }
}

@keyframes portal-vortex-fade {
  from { opacity: 0; scale: 0.2; }
  to { opacity: 1; scale: 1; }
}

@keyframes portal-rune-spin {
  to { rotate: 360deg; }
}

@keyframes portal-swirl-spin {
  to { rotate: 360deg; }
}

@keyframes portal-core-pulse {
  from { opacity: 0.75; scale: 0.85; }
  to { opacity: 1; scale: 1.15; }
}

@keyframes portal-glow-breathe {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

@keyframes portal-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -118px) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .boss-portal *,
  .boss-portal *::before,
  .boss-portal *::after {
    animation: none !important;
  }
}

/* ===== Caisses d'armes, revêtements, épées et pistolets ===== */

.tier-commun { --tier: #b9bec9; }
.tier-peu-commun { --tier: #5fd35f; }
.tier-rare { --tier: #4aa3ff; }
.tier-legendaire { --tier: #ff4d4d; }
.tier-divin { --tier: #ff5cf0; }

/* Revêtements appliqués sur l'image de l'arme */
@property --coat-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --coat-pulse {
  syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

:is(.hero-real-weapon, .shop-item-art, .weapon-pickup-art)[data-coating]:not([data-coating="aucun"]) {
  filter: var(--coat-filter, saturate(1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.65)) var(--coat-glow, saturate(1));
}

[data-coating="rouille"] { --coat-filter: sepia(0.85) saturate(1.7) hue-rotate(-14deg) brightness(0.82); }
[data-coating="encre"] { --coat-filter: grayscale(1) brightness(0.55) contrast(1.5); }
[data-coating="jade"] { --coat-filter: grayscale(0.5) sepia(1) saturate(3.2) hue-rotate(92deg) brightness(0.95); }
[data-coating="sang"] { --coat-filter: grayscale(0.4) sepia(1) saturate(5) hue-rotate(-48deg) brightness(0.72) contrast(1.15); }
[data-coating="givre"] {
  --coat-filter: grayscale(0.7) sepia(0.5) hue-rotate(165deg) saturate(2.6) brightness(1.3);
  --coat-glow: drop-shadow(0 0 5px #8fe9ff);
}
[data-coating="toxique"] {
  --coat-filter: grayscale(0.5) sepia(1) saturate(6) hue-rotate(48deg) brightness(1.1);
  --coat-glow: drop-shadow(0 0 6px #7dff3a);
}
[data-coating="or"] {
  --coat-filter: grayscale(0.6) sepia(1) saturate(3.4) hue-rotate(-6deg) brightness(1.3) contrast(1.15);
  --coat-glow: drop-shadow(0 0 5px #ffd34d);
}
[data-coating="lave"] {
  --coat-filter: grayscale(0.4) sepia(1) saturate(7) hue-rotate(-28deg) contrast(1.35);
  --coat-glow: drop-shadow(0 0 var(--coat-pulse) #ff5a1f);
  animation: coat-lava 1.1s ease-in-out infinite alternate;
}
[data-coating="spectre"] {
  --coat-filter: grayscale(1) brightness(1.5) sepia(1) hue-rotate(228deg) saturate(3.2) opacity(0.88);
  --coat-glow: drop-shadow(0 0 var(--coat-pulse) #c47bff);
  animation: coat-lava 1.6s ease-in-out infinite alternate;
}
[data-coating="chroma"] {
  --coat-filter: grayscale(0.4) sepia(1) saturate(5) hue-rotate(var(--coat-hue)) brightness(1.15);
  --coat-glow: drop-shadow(0 0 6px rgb(255 255 255 / 0.7));
  animation: coat-chroma 3s linear infinite;
}

@keyframes coat-lava {
  from { --coat-pulse: 3px; }
  to { --coat-pulse: 11px; }
}

@keyframes coat-chroma {
  to { --coat-hue: 360deg; }
}

.shop-item-art[data-shape="blade"] {
  transform: rotate(40deg);
}

/* Arme de boss au sol : se ramasse avec F */
.weapon-pickup,
.weapon-pickup-rarity-violette,
.weapon-pickup-rarity-orange {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  cursor: pointer;
}

.world > .weapon-pickup {
  pointer-events: auto;
}

.weapon-pickup-art {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.6));
  transform: rotate(-28deg);
  pointer-events: none;
}

.weapon-pickup-prompt {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 3px 9px;
  border: 1px solid #ffd27a;
  border-radius: 8px;
  background: rgb(20 12 24 / 0.9);
  color: #fff3d6;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity 0.15s ease, translate 0.15s ease;
  pointer-events: none;
}

.weapon-pickup.is-near .weapon-pickup-prompt {
  opacity: 0.75;
  translate: -50% 0;
}

.weapon-pickup.is-nearest .weapon-pickup-prompt {
  opacity: 1;
  box-shadow: 0 0 10px rgb(255 210 122 / 0.6);
}

/* Balles de pistolet */
.shot-bullet {
  --trail: 46px;
  --trail-color: rgb(255 228 150 / 0.75);
}

.shot-bullet .shot-core {
  width: 11px;
  height: 4px;
  border-radius: 2px 60% 60% 2px;
  background: linear-gradient(180deg, #fff6c8, #e0a83a 60%, #8a5a12);
  box-shadow: 0 0 6px 1px #ffd36b;
  translate: -70% -50%;
}

.muzzle-bullet .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #fff 0 15%, #ffe9a8 35%, rgb(255 170 60 / 0.7) 55%, transparent 72%);
}

.hit-bullet { --hit-core: #fff; --hit-glow: rgb(255 200 90 / 0.8); --hit-spark: #ffe08a; --hit-smoke: rgb(120 110 100 / 0.45); }
.hit-slash { --hit-core: #fff; --hit-glow: rgb(255 255 255 / 0.7); --hit-spark: #ffe6e6; --hit-smoke: rgb(140 130 140 / 0.35); }

/* Coup d'épée en arc */
.slash-fx {
  z-index: 4;
}

.fx-layer > :is(.slash-arc, .slash-edge) {
  top: calc(-1 * var(--reach));
  left: calc(-1 * var(--reach));
  width: calc(2 * var(--reach));
  height: calc(2 * var(--reach));
  border-radius: 50%;
  opacity: 0;
  animation: slash-sweep 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.fx-layer > .slash-arc {
  background: conic-gradient(
    from calc(90deg - var(--arc) / 2),
    transparent 0deg,
    color-mix(in srgb, var(--slash-color) 40%, transparent) calc(var(--arc) * 0.22),
    color-mix(in srgb, var(--slash-color) 85%, transparent) calc(var(--arc) * 0.46),
    #fff calc(var(--arc) * 0.58),
    color-mix(in srgb, var(--slash-color) 85%, transparent) calc(var(--arc) * 0.76),
    transparent var(--arc)
  );
  filter: drop-shadow(0 0 8px var(--slash-color));
  -webkit-mask: radial-gradient(circle closest-side, transparent 58%, #000 72%, #000 88%, transparent 98%);
  mask: radial-gradient(circle closest-side, transparent 58%, #000 72%, #000 88%, transparent 98%);
}

.fx-layer > .slash-edge {
  background: conic-gradient(
    from calc(90deg - var(--arc) / 2),
    transparent 0deg,
    transparent calc(var(--arc) * 0.15),
    rgb(255 255 255 / 0.95) calc(var(--arc) * 0.58),
    transparent calc(var(--arc) * 0.92)
  );
  -webkit-mask: radial-gradient(circle closest-side, transparent 84%, #000 88%, #000 93%, transparent 97%);
  mask: radial-gradient(circle closest-side, transparent 84%, #000 88%, #000 93%, transparent 97%);
}

@keyframes slash-sweep {
  0% { opacity: 0; transform: rotate(calc(var(--angle) - 32deg)) scale(0.88); }
  15% { opacity: 0.9; }
  60% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(calc(var(--angle) + 10deg)) scale(1.04); }
}

/* Cartes de caisses dans la boutique */
.store-filter[hidden] {
  display: none;
}

.store-badge-premium {
  background: linear-gradient(90deg, #ffd34d, #ff5cf0);
  color: #2a0f2a;
}

.crate-card {
  border-color: #c98a4a;
}

.crate-card.is-premium {
  border-color: #f2c94c;
  background: linear-gradient(160deg, #3c2350, #1d1328);
  box-shadow: 0 0 20px rgb(242 201 76 / 0.22), 0 6px 16px rgb(0 0 0 / 0.35);
}

.crate-preview {
  height: 118px;
  overflow: hidden;
}

.crate-box {
  position: relative;
  display: block;
  width: 92px;
  height: 78px;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.55));
  animation: crate-idle 2.6s ease-in-out infinite;
}

.crate-card:hover .crate-box {
  animation: crate-shake 0.45s ease-in-out infinite;
}

.crate-lid {
  position: absolute;
  z-index: 1;
  top: 0;
  right: -5px;
  left: -5px;
  height: 22px;
  border: 2px solid var(--crate-trim);
  border-radius: 5px;
  background: var(--crate-lid);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.3), inset 0 2px 0 rgb(255 255 255 / 0.2);
}

.crate-body {
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--crate-trim);
  border-radius: 0 0 6px 6px;
  background: var(--crate-body);
  box-shadow: inset 0 0 0 4px rgb(0 0 0 / 0.18);
}

.crate-emblem {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid var(--crate-trim);
  border-radius: 50%;
  background: var(--crate-badge);
  box-shadow: 0 0 12px var(--crate-glow);
  font-size: 18px;
}

.crate-style-bois {
  --crate-lid: repeating-linear-gradient(90deg, #a8692f 0 22px, #8d5524 22px 24px);
  --crate-body: repeating-linear-gradient(0deg, #9a5d29 0 13px, #7a461c 13px 15px);
  --crate-trim: #3d2410;
  --crate-badge: #5b3517;
  --crate-glow: rgb(255 180 90 / 0.45);
}

.crate-style-royale {
  --crate-lid: linear-gradient(180deg, #5a3184, #2b1442);
  --crate-body: linear-gradient(180deg, #3a1f57, #1c0d2c);
  --crate-trim: #f2c94c;
  --crate-badge: radial-gradient(circle, #6a2f9a, #2b1145);
  --crate-glow: rgb(242 201 76 / 0.7);
}

.crate-style-hantee {
  --crate-lid: linear-gradient(180deg, #ff9a3c, #c45a12);
  --crate-body: repeating-linear-gradient(0deg, #2d2433 0 13px, #1f1924 13px 15px);
  --crate-trim: #ff8a1e;
  --crate-badge: #3a1a08;
  --crate-glow: rgb(255 138 30 / 0.6);
}

.crate-style-peinture {
  --crate-lid: linear-gradient(90deg, #ff5f6d, #ffc371, #5fd35f, #4aa3ff, #b06bff);
  --crate-body: repeating-linear-gradient(0deg, #e9e2d6 0 13px, #cfc6b8 13px 15px);
  --crate-trim: #4a3a2a;
  --crate-badge: #2b2230;
  --crate-glow: rgb(255 255 255 / 0.5);
}

.crate-style-prestige {
  --crate-lid: conic-gradient(from 0deg, #ff5cf0, #4aa3ff, #5fd35f, #ffd34d, #ff5cf0);
  --crate-body: linear-gradient(180deg, #24183a, #120b1f);
  --crate-trim: #ff5cf0;
  --crate-badge: radial-gradient(circle, #ff5cf0, #4a0f52);
  --crate-glow: rgb(255 92 240 / 0.7);
}

.crate-contents {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.crate-content {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--tier);
  border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 30%, #1a1220), #120c18);
}

.crate-content .shop-item-art {
  width: 78%;
  height: 62%;
  margin-bottom: 8px;
}

.crate-content > span:last-child {
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

.crate-content.is-owned::after {
  position: absolute;
  top: 0;
  right: 3px;
  color: #8fff9a;
  font-size: 0.55rem;
  content: "✔";
}

.crate-owned {
  color: #bfae90;
  font-size: 0.7rem;
  font-weight: 800;
}

@keyframes crate-idle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes crate-shake {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -5deg; }
  75% { rotate: 5deg; }
}

/* Ouverture de caisse */
.crate-opening {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgb(60 30 80 / 0.78), rgb(5 3 10 / 0.94));
  animation: crate-fade 0.25s ease-out;
}

.crate-opening[hidden] {
  display: none;
}

.crate-opening-panel {
  width: min(760px, 94vw);
  box-sizing: border-box;
  padding: 20px 22px 18px;
  border: 2px solid var(--crate-trim, #c98a4a);
  border-radius: 18px;
  background: linear-gradient(160deg, #2e1d3a, #160f1f);
  box-shadow: 0 0 40px var(--crate-glow, rgb(255 160 60 / 0.3)), 0 20px 50px rgb(0 0 0 / 0.6);
  color: #fff1dc;
  text-align: center;
}

.crate-opening-panel.crate-style-bois { --crate-trim: #c98a4a; }

.crate-opening-title {
  margin: 0 0 14px;
  color: #ffcb91;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}

.crate-reel {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 12px;
  background: #0d0912;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.08), inset 0 0 30px rgb(0 0 0 / 0.8);
}

.crate-reel::before,
.crate-reel::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 14%;
  content: "";
  pointer-events: none;
}

.crate-reel::before { left: 0; background: linear-gradient(90deg, #0d0912, transparent); }
.crate-reel::after { right: 0; background: linear-gradient(-90deg, #0d0912, transparent); }

.crate-reel-strip {
  position: absolute;
  top: 12px;
  left: 0;
  display: flex;
  gap: 8px;
  will-change: transform;
}

.crate-reel-item {
  position: relative;
  display: grid;
  flex: 0 0 116px;
  height: 126px;
  box-sizing: border-box;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 6px 4px;
  border: 2px solid var(--tier);
  border-bottom-width: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 28%, #1b1322), #120c18 75%);
}

.crate-reel-item .shop-item-art {
  width: 82px;
  height: 78px;
}

.crate-reel-item > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  color: #f4e6d4;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.crate-reel-item.is-winner {
  box-shadow: 0 0 22px var(--tier), inset 0 0 18px color-mix(in srgb, var(--tier) 50%, transparent);
  animation: crate-winner 0.6s ease-out;
}

.crate-reel-marker {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #ffd34d;
  box-shadow: 0 0 10px #ffd34d;
  translate: -50% 0;
}

.crate-reel-marker::before,
.crate-reel-marker::after {
  position: absolute;
  left: 50%;
  border: 9px solid transparent;
  content: "";
  translate: -50% 0;
}

.crate-reel-marker::before { top: 0; border-top-color: #ffd34d; }
.crate-reel-marker::after { bottom: 0; border-bottom-color: #ffd34d; }

.crate-result {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tier) 35%, transparent), transparent 70%);
  animation: crate-reveal 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.crate-result[hidden] {
  display: none;
}

.crate-result-art .shop-item-art {
  width: 118px;
  height: 118px;
}

.crate-result-tier {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--tier);
  color: #12091a;
  font-size: 0.75rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crate-result.tier-divin .crate-result-tier {
  background: linear-gradient(90deg, #ff5cf0, #ffd34d, #5fe0ff, #ff5cf0);
  background-size: 200% 100%;
  animation: crate-godly 1.6s linear infinite;
}

.crate-result-name {
  color: #fff;
  font-size: 1.2rem;
}

.crate-result-note {
  margin: 0;
  color: #e8d8c4;
  font-size: 0.85rem;
}

.crate-opening-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.crate-opening-actions [hidden] {
  display: none;
}

@keyframes crate-fade {
  from { opacity: 0; }
}

@keyframes crate-winner {
  0% { scale: 1; }
  40% { scale: 1.12; }
  100% { scale: 1; }
}

@keyframes crate-reveal {
  from { opacity: 0; scale: 0.6; }
}

@keyframes crate-godly {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crate-box,
  .crate-card:hover .crate-box,
  [data-coating] {
    animation: none;
  }
}

/* ===== Caisses de costumes et de pouvoirs ===== */

.crate-style-garde-robe {
  --crate-lid: repeating-linear-gradient(90deg, #7a2350 0 10px, #5c1a3c 10px 20px);
  --crate-body: linear-gradient(90deg, #4a2a1a 0 48%, #2a170d 48% 52%, #4a2a1a 52%);
  --crate-trim: #e0b25a;
  --crate-badge: radial-gradient(circle, #8a2f63, #3a0f28);
  --crate-glow: rgb(255 120 200 / 0.5);
}

.crate-style-grimoire {
  --crate-lid: linear-gradient(180deg, #23407a, #142650);
  --crate-body: repeating-linear-gradient(0deg, #1c2f5c 0 12px, #e8dcc0 12px 14px);
  --crate-trim: #5fe0ff;
  --crate-badge: radial-gradient(circle, #2f5fb0, #0e1f45);
  --crate-glow: rgb(95 224 255 / 0.55);
}

.crate-style-arcane {
  --crate-lid: conic-gradient(from 90deg, #7b3cff, #5fe0ff, #ff5cf0, #7b3cff);
  --crate-body: linear-gradient(180deg, #1a1040, #0a0620);
  --crate-trim: #b48cff;
  --crate-badge: radial-gradient(circle, #9b6bff, #2a0f5c);
  --crate-glow: rgb(180 140 255 / 0.75);
}

.crate-content .character-preview {
  width: 100%;
  height: 86%;
  margin-bottom: 8px;
}

.crate-reel-item .character-preview {
  width: 76px;
  height: 86px;
}

.crate-result-art .character-preview {
  width: 112px;
  height: 132px;
}

.crate-power-icon {
  filter: drop-shadow(0 0 8px var(--tier, #fff)) drop-shadow(0 3px 2px rgb(0 0 0 / 0.6));
}

.crate-content .crate-power-icon {
  margin-bottom: 8px;
  font-size: 1.55rem;
}

.crate-reel-item .crate-power-icon {
  font-size: 3.3rem;
}

.crate-result-art .crate-power-icon {
  font-size: 5rem;
}

/* ===== Deux armes en partie : distance (1) et épée (2) ===== */

.arena .combat-weapon-slot {
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease, scale 0.15s ease;
}

.arena .combat-weapon-slot:not(.is-active) {
  opacity: 0.6;
  filter: grayscale(0.45) brightness(0.85);
  scale: 0.9;
}

.arena .combat-weapon-slot:not(.is-active):hover {
  opacity: 0.9;
  filter: none;
}

.arena .combat-weapon-slot.is-active {
  border-color: #ffd27a;
  box-shadow: 0 0 0 2px rgb(255 210 122 / 0.35), 0 0 16px rgb(255 179 71 / 0.55), 0 8px 24px rgb(0 0 0 / 0.45);
}

.combat-melee-slot .combat-slot-art {
  height: 56px;
  rotate: 40deg;
}

/* ===== Prise en main réaliste : poignet, recul, coups d'épée et dégainé ===== */

@property --wrist {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --wrist-kick {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --weapon-recoil {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Au repos, le pistolet pointe vers le sol devant soi et l'épée est tenue en garde, pointe levée. */
:is(.player, .hero-real)[data-weapon-hands="one"][data-weapon-motion="gun"] .rig-weapon-mount > .hero-real-weapon {
  --wrist: -42deg;
}

:is(.player, .hero-real)[data-weapon-hands="one"][data-weapon-motion="melee"] .rig-weapon-mount > .hero-real-weapon {
  --wrist: -24deg;
}

.player.is-running[data-weapon-hands="one"][data-weapon-motion="melee"] .rig-weapon-mount > .hero-real-weapon {
  --wrist: -48deg;
}

.player.is-aiming[data-weapon-hands="one"] .rig-weapon-mount > .hero-real-weapon {
  --wrist: 0deg;
}

.player.is-aiming[data-weapon-hands="one"][data-weapon-motion="melee"] .rig-weapon-mount > .hero-real-weapon {
  --wrist: 38deg;
}

/* Tir : le canon se relève et l'arme recule dans la main, le buste encaisse. */
.player.is-shooting[data-weapon-motion="gun"] .rig {
  animation: wrist-gun-kick 0.24s cubic-bezier(0.15, 0.85, 0.3, 1);
}

.player[data-weapon-hands="two"][data-weapon-motion="gun"] .rig {
  --gun-kick: -9deg;
  --gun-recoil: 4px;
}

.player.is-shooting[data-weapon-motion="crossbow"] .rig {
  --gun-kick: -6deg;
  --gun-recoil: 3px;
  animation: wrist-gun-kick 0.24s cubic-bezier(0.15, 0.85, 0.3, 1);
}

.player.is-shooting:is([data-weapon-motion="gun"], [data-weapon-motion="crossbow"]) .rig-limbs .rig-torso {
  animation: torso-recoil 0.24s ease-out;
}

.player.is-shooting[data-weapon-motion="magic"] .rig {
  animation: wrist-cast-flick 0.24s ease-out;
}

/* Épée : armé du poignet, taille rapide qui traverse la cible, puis retour en garde. */
.player.is-shooting[data-weapon-motion="melee"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-slash 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-hands="one"][data-weapon-motion="melee"] .rig {
  animation: wrist-slash 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-motion="melee"] .rig-limbs .rig-torso {
  animation: torso-slash 0.26s ease-out;
}

/* Changer d'arme : l'épée sort du fourreau à la hanche, le pistolet de son étui. */
.player.is-drawing[data-weapon-hands="one"][data-weapon-motion="melee"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-draw-blade 0.62s cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-drawing[data-weapon-hands="one"][data-weapon-motion="melee"] .rig {
  animation: wrist-draw-blade 0.62s cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-drawing[data-weapon-hands="one"][data-weapon-motion="gun"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-draw-holster 0.5s cubic-bezier(0.3, 0, 0.2, 1);
}

.player.is-drawing[data-weapon-hands="one"][data-weapon-motion="gun"] .rig {
  animation: wrist-draw-holster 0.5s cubic-bezier(0.3, 0, 0.2, 1);
}

@keyframes wrist-gun-kick {
  0% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
  14% { --wrist-kick: var(--gun-kick, -24deg); --weapon-recoil: var(--gun-recoil, 6px); }
  45% { --wrist-kick: calc(var(--gun-kick, -24deg) * 0.35); --weapon-recoil: 1px; }
  100% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
}

@keyframes wrist-cast-flick {
  0%, 100% { --wrist-kick: 0deg; }
  30% { --wrist-kick: -16deg; }
  60% { --wrist-kick: 6deg; }
}

@keyframes torso-recoil {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -4deg; }
}

@keyframes hold-slash {
  0% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
  20% { rotate: calc(var(--arm-aim) - 88deg); scale: 1 0.9; }
  58% { rotate: calc(var(--arm-aim) + 48deg); scale: 1 1; }
  100% { rotate: var(--arm-aim); scale: 1 var(--reach, 1); }
}

@keyframes wrist-slash {
  0% { --wrist-kick: 0deg; }
  20% { --wrist-kick: -62deg; }
  58% { --wrist-kick: 34deg; }
  100% { --wrist-kick: 0deg; }
}

@keyframes torso-slash {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -5deg; }
  58% { rotate: 7deg; }
}

@keyframes hold-draw-blade {
  0% { rotate: var(--hold-angle, 0deg); }
  28% { rotate: 28deg; }
  40% { rotate: 24deg; }
  72% { rotate: -128deg; }
  100% { rotate: var(--hold-angle, 0deg); }
}

@keyframes wrist-draw-blade {
  0% { --wrist-kick: 0deg; }
  28%, 40% { --wrist-kick: 100deg; }
  72% { --wrist-kick: -40deg; }
  100% { --wrist-kick: 0deg; }
}

@keyframes hold-draw-holster {
  0% { rotate: var(--hold-angle, 0deg); }
  30%, 42% { rotate: 20deg; }
  75% { rotate: -72deg; }
  100% { rotate: var(--hold-angle, 0deg); }
}

@keyframes wrist-draw-holster {
  0% { --wrist-kick: 0deg; }
  30%, 42% { --wrist-kick: 42deg; }
  75% { --wrist-kick: 30deg; }
  100% { --wrist-kick: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .player .rig,
  .player .rig-limbs .rig-torso {
    animation: none !important;
  }
}

/* Casier : les lames fines restent dans la vignette, le niveau ne masque plus l'étiquette */
.locker-tile-art {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.locker-tile-art .shop-item-art {
  object-fit: contain;
}

.locker-slot .locker-tile-level {
  top: auto;
  left: auto;
  right: 6px;
  bottom: 24%;
}

/* ============================================================
   Paramètres : bouton en bas à droite en partie, sous les pièces dans le menu.
   ============================================================ */

.sio-wallet {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.sio-settings-button {
  padding: 2px 9px;
  border: 2px solid #12060f;
  border-radius: 999px;
  background: #1c0826;
  color: #f0d8ff;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.sio-settings-button:hover,
.sio-settings-button:focus-visible {
  background: #3a1250;
  transform: translateY(-1px);
}

.hud-sound .settings-open-button {
  padding: 6px 11px;
  font-size: 0.74rem;
}

.settings-panel {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgb(40 10 50 / 0.6), rgb(6 2 10 / 0.86));
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.settings-panel[hidden] {
  display: none;
}

.settings-card {
  display: grid;
  width: min(460px, 100%);
  max-height: 100%;
  overflow: auto;
  gap: 12px;
  padding: 16px 18px;
  border: 3px solid #12060f;
  border-radius: 20px;
  background: linear-gradient(#4a1a5c, #24092f);
  box-shadow: 0 6px 0 #12060f, 0 0 40px rgb(255 122 26 / 0.25), inset 0 2px 0 rgb(255 154 74 / 0.2);
  color: #fbe9d4;
  font-family: "Segoe UI", Arial, sans-serif;
  animation: settings-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.settings-card button {
  font-family: inherit;
}

@keyframes settings-pop {
  from { opacity: 0; scale: 0.92; }
  to { opacity: 1; scale: 1; }
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-header h2 {
  margin: 0;
  color: #ffb347;
  font-size: 1.15rem;
  text-shadow: 0 2px 0 #12060f;
}

.settings-close {
  width: 32px;
  height: 32px;
  border: 2px solid #12060f;
  border-radius: 50%;
  background: #1c0826;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.settings-tab {
  padding: 7px;
  border: 2px solid #12060f;
  border-radius: 12px;
  background: #1c0826;
  color: #cdb4dc;
  cursor: pointer;
  font-weight: 700;
}

.settings-tab.is-active {
  background: linear-gradient(#ffb347, #ff7a1a);
  color: #2a0d00;
  box-shadow: 0 0 12px rgb(255 122 26 / 0.5);
}

.settings-section {
  display: grid;
  gap: 10px;
}

.settings-section[hidden] {
  display: none;
}

.settings-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
}

.settings-mute {
  padding: 6px 8px;
  font-size: 0.72rem;
  text-align: left;
}

.settings-mute[aria-pressed="false"] {
  opacity: 0.6;
}

.settings-panel.is-muted :is(#music-toggle, #sound-toggle, #volume-music, #volume-effects) {
  opacity: 0.4;
}

.settings-slider {
  width: 100%;
  accent-color: #ff7a1a;
  cursor: pointer;
}

.settings-value {
  color: #ffd9a8;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.settings-note {
  margin: 0;
  color: #c7a9d6;
  font-size: 0.72rem;
  line-height: 1.35;
}

.settings-keys {
  display: grid;
  gap: 6px;
}

.settings-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 10px;
  border-radius: 10px;
  background: rgb(18 6 15 / 0.45);
  font-size: 0.8rem;
}

.settings-key-button {
  padding: 6px 8px;
  border: 2px solid #12060f;
  border-radius: 9px;
  background: #1c0826;
  color: #fff;
  cursor: pointer;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
}

.settings-key-button:hover,
.settings-key-button:focus-visible {
  background: #3a1250;
}

.settings-key-button.is-listening {
  background: #ff7a1a;
  color: #2a0d00;
  animation: key-listen 0.8s ease-in-out infinite;
  font-family: inherit;
  font-size: 0.7rem;
}

@keyframes key-listen {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 179 71 / 0.7); }
  50% { box-shadow: 0 0 0 5px rgb(255 179 71 / 0); }
}

.settings-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.settings-reset,
.settings-done {
  padding: 8px 16px;
  border: 2px solid #12060f;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.settings-reset {
  background: #1c0826;
  color: #e9c9ff;
}

.settings-done {
  background: linear-gradient(#ffb347, #ff7a1a);
  color: #2a0d00;
}

.settings-logout,
.settings-edit-controls {
  min-height: 42px;
  padding: 8px 12px;
  border: 2px solid #12060f;
  border-radius: 12px;
  background: #1c0826;
  color: #ffe7b0;
  cursor: pointer;
  font-weight: 800;
}

.settings-logout {
  background: #6a1a14;
  color: #fff;
}

.settings-gift {
  display: grid;
  gap: 8px;
}

.settings-gift label {
  display: grid;
  gap: 4px;
  color: #ffe7b0;
  font-size: 0.85rem;
  font-weight: 700;
}

.settings-gift input,
.settings-gift select {
  min-height: 38px;
  padding: 6px 8px;
  border: 2px solid #12060f;
  border-radius: 10px;
  background: #12060f;
  color: #fff8ea;
  font: inherit;
}

.settings-gift button {
  min-height: 42px;
  border: 2px solid #12060f;
  border-radius: 12px;
  background: linear-gradient(#ffb347, #ff7a1a);
  color: #2a0d00;
  cursor: pointer;
  font-weight: 800;
}

.admin-panel {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: radial-gradient(circle at 50% 40%, rgb(40 10 50 / 0.6), rgb(6 2 10 / 0.86));
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.admin-panel[hidden] {
  display: none;
}

.admin-card {
  width: min(420px, 100%);
  min-height: 0;
  max-height: 100%;
  overflow: auto;
}

#admin-status.is-ok {
  color: #9dffb0;
}

#admin-status.is-error {
  color: #ffb0b0;
}

/* Nouveaux pouvoirs : nuée toxique, tempête de foudre, onde sismique, vortex d'ombre et pacte vampirique. */
.player.power-cast-generic {
  animation: player-power-cast 0.6s ease-out;
}

.player.power-slam-casting {
  animation: player-power-slam 0.64s cubic-bezier(0.3, 0, 0.4, 1);
}

.player.power-throw-casting {
  animation: player-power-cast 0.52s ease-out;
}

.player.player-healed {
  animation: player-healed 0.7s ease-out;
}

.heal-num {
  position: absolute;
  z-index: 9;
  color: #7dff8f;
  font-family: "Arial Black", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #0d2412;
  text-shadow: 0 0 8px rgb(80 255 120 / 0.7);
  translate: -50% -100%;
  scale: var(--world-scale, 1);
  white-space: nowrap;
  animation: heal-rise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.pfx-poison {
  --pfx-glow: rgb(140 255 70 / 0.8);
}

.pfx-splash {
  width: calc(10px * var(--s));
  height: calc(14px * var(--s));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #eaffb0, #8fe33a 45%, #3f8a12 80%);
  box-shadow: 0 0 6px rgb(150 255 60 / 0.7);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-debris 0.7s var(--t) cubic-bezier(0.2, 0.7, 0.4, 1) both;
}

.pfx-poison-cloud {
  z-index: 4;
}

.pfx-toxic-pool {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 1.3);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 40%, rgb(190 255 90 / 0.35), transparent 40%),
    radial-gradient(ellipse, rgb(90 170 30 / 0.45), rgb(50 110 20 / 0.3) 55%, transparent 72%);
  filter: blur(3px);
  translate: -50% -50%;
  animation: pfx-pool-life var(--life, 5s) ease-out forwards;
}

.pfx-toxic-puff {
  width: calc(var(--r) * 0.9 * var(--s));
  height: calc(var(--r) * 0.7 * var(--s));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(170 240 80 / 0.55), rgb(100 170 40 / 0.3) 55%, transparent 72%);
  filter: blur(7px);
  rotate: var(--a);
  translate: -50% -50%;
  animation:
    pfx-toxic-swirl 3.2s var(--t) ease-in-out infinite alternate,
    pfx-cloud-fade var(--life, 5s) linear forwards;
}

.pfx-bubble {
  width: calc(10px * var(--s));
  height: calc(10px * var(--s));
  border: 1px solid rgb(220 255 150 / 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.8), rgb(160 240 70 / 0.35) 40%, transparent 70%);
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  animation: pfx-bubble-pop 1.6s var(--t) ease-in infinite;
}

.pfx-quake {
  --pfx-glow: rgb(255 210 150 / 0.6);
}

.pfx-crater {
  width: calc(var(--r) * 0.9);
  height: calc(var(--r) * 0.55);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(25 16 10 / 0.85), rgb(70 45 25 / 0.6) 45%, rgb(110 80 50 / 0.25) 65%, transparent 72%);
  box-shadow: inset 0 6px 10px rgb(0 0 0 / 0.6);
  translate: -50% -50%;
  animation: pfx-scorch 1.8s ease-out forwards;
}

.pfx-crack {
  width: 5px;
  height: var(--d);
  background: linear-gradient(180deg, #1a0f08, #3b2614 60%, transparent);
  clip-path: polygon(40% 0, 60% 0, 100% 25%, 30% 50%, 80% 75%, 50% 100%, 20% 75%, 60% 50%, 0 25%);
  rotate: var(--a);
  transform-origin: 50% 0;
  translate: -50% 0;
  animation: pfx-crack 1.7s var(--t) ease-out both;
}

.pfx-shockwave {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 1.3);
  border: 7px solid rgb(200 160 110 / 0.75);
  border-radius: 50%;
  box-shadow: 0 0 14px rgb(120 90 60 / 0.6);
  filter: blur(1.5px);
  translate: -50% -50%;
  animation: pfx-ring 0.6s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

.pfx-shockwave-late {
  border-width: 4px;
  animation-delay: 0.16s;
  animation-fill-mode: both;
}

.pfx-dust {
  width: calc(var(--r) * 0.45 * var(--s));
  height: calc(var(--r) * 0.32 * var(--s));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(170 140 105 / 0.7), rgb(120 95 70 / 0.35) 55%, transparent 72%);
  filter: blur(4px);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-smoke 1.5s var(--t) ease-out both;
}

.pfx-rock {
  width: calc(11px * var(--s));
  height: calc(9px * var(--s));
  border-radius: 35% 55% 40% 60%;
  background: linear-gradient(135deg, #a89a88, #6d5f50 55%, #3a3028);
  box-shadow: inset -2px -2px 3px rgb(0 0 0 / 0.4);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-rock-arc 0.9s var(--t) cubic-bezier(0.25, 0.6, 0.5, 1) both;
}

.arena.arena-lightning::after {
  position: absolute;
  z-index: 40;
  inset: 0;
  background: rgb(200 225 255 / 0.4);
  content: "";
  pointer-events: none;
  animation: arena-lightning 0.45s ease-out forwards;
}

.fx-layer.pfx-bolt {
  z-index: 7;
  transform-origin: 0 0;
}

.fx-layer.pfx-bolt svg {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  overflow: visible;
  animation: pfx-bolt-flicker 0.5s steps(1, end) forwards;
}

.pfx-bolt-glow {
  fill: none;
  stroke: rgb(120 170 255 / 0.55);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(3px);
}

.pfx-bolt-branch {
  fill: none;
  stroke: #b9d6ff;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.pfx-bolt-core {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #9fc4ff);
}

.pfx-zap {
  --pfx-glow: rgb(150 190 255 / 0.9);
}

.pfx-spark {
  width: calc(3px * var(--s));
  height: calc(12px * var(--s));
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, #9fc4ff);
  box-shadow: 0 0 5px #8bb8ff;
  rotate: var(--a);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  animation: pfx-burst-out 0.45s cubic-bezier(0.15, 0.8, 0.3, 1) both;
}

.pfx-vortex {
  --pfx-glow: rgb(170 90 255 / 0.85);
  z-index: 4;
}

.pfx-vortex-pull {
  width: calc(var(--r) * 2.1);
  height: calc(var(--r) * 2.1);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(20 0 40 / 0.55), rgb(60 20 110 / 0.3) 45%, transparent 70%);
  translate: -50% -50%;
  animation: pfx-vortex-appear 0.4s ease-out both;
}

.pfx-vortex-disc {
  width: calc(var(--r) * 1.7);
  height: calc(var(--r) * 1.7);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(150 70 255 / 0.5) 0 14deg, transparent 14deg 40deg);
  mask: radial-gradient(circle, transparent 12%, #000 30%, #000 55%, transparent 71%);
  filter: blur(2px);
  translate: -50% -50%;
  animation: pfx-vortex-spin 0.7s linear infinite;
}

.pfx-vortex-ring {
  width: calc(var(--r) * 1.2);
  height: calc(var(--r) * 1.2);
  border: 3px solid rgb(200 140 255 / 0.7);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 16px rgb(150 70 255 / 0.6);
  translate: -50% -50%;
  animation: pfx-vortex-spin 0.45s linear infinite reverse;
}

.pfx-vortex-core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 35%, #2a0a4a 55%, rgb(180 100 255 / 0.8) 70%, transparent 75%);
  box-shadow: 0 0 22px 6px rgb(140 60 255 / 0.7);
  translate: -50% -50%;
  animation: pfx-vortex-pulse 0.5s ease-in-out infinite alternate;
}

.pfx-vortex-mote {
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
  border-radius: 50%;
  background: #e2c6ff;
  box-shadow: 0 0 6px #a35cff;
  animation: pfx-vortex-suck 0.9s var(--t) cubic-bezier(0.5, 0, 0.9, 0.6) infinite;
}

.pfx-vortex.is-imploding > span {
  animation: pfx-vortex-collapse 0.35s ease-in forwards;
}

.pfx-implosion {
  --pfx-glow: rgb(200 140 255 / 0.95);
}

.pfx-vampire {
  --pfx-glow: rgb(220 20 50 / 0.85);
}

.pfx-vampire .pfx-mist {
  background: radial-gradient(circle, rgb(110 0 20 / 0.5), transparent 65%);
}

.pfx-blood-moon {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(160 0 30 / 0.3) 0 6deg, transparent 6deg 30deg),
    radial-gradient(circle, rgb(150 0 30 / 0.45), rgb(80 0 15 / 0.25) 55%, transparent 70%);
  mask: radial-gradient(circle, #000 50%, transparent 71%);
  translate: -50% -50%;
  animation: pfx-frost 1.4s ease-out forwards;
}

.pfx-drop {
  width: calc(8px * var(--s));
  height: calc(12px * var(--s));
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 40% 30%, #ff8a9a, #c40d2b 50%, #5c0010);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-drop-in 1s var(--t) ease-in both;
}

.fx-layer.pfx-blood-drop {
  z-index: 7;
  width: 9px;
  height: 9px;
  margin: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9aa8, #d0102e 55%, #600012);
  box-shadow: 0 0 6px rgb(255 30 60 / 0.75);
}

/* Altérations d'état sur les ennemis. */
.enemy-fx {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.enemy-fx i {
  position: absolute;
  display: block;
}

.enemy.enemy-stunned:not(.enemy-frozen) {
  filter: brightness(1.15) saturate(0.7);
}

.enemy-fx-stunned {
  top: -30%;
  bottom: auto;
  height: 22%;
  animation: enemy-stun-orbit 0.9s linear infinite;
}

.enemy-fx-stunned i {
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  background: #ffe259;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px #fff3a0);
}

.enemy-fx-stunned i:nth-child(1) { transform: translateX(-160%) translateY(0); }
.enemy-fx-stunned i:nth-child(2) { transform: translateX(0) translateY(-50%) scale(0.8); }
.enemy-fx-stunned i:nth-child(3) { transform: translateX(160%) translateY(0); }
.enemy-fx-stunned i:nth-child(4) { transform: translateX(0) translateY(50%) scale(0.7); }

.enemy.enemy-slowed:not(.enemy-frozen, .enemy-poison, .enemy-stunned) {
  filter: saturate(0.65) hue-rotate(-10deg);
}

.enemy-fx-slowed {
  top: auto;
  bottom: -6%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(160 220 255 / 0.45), transparent 70%);
}

.enemy-fx-slowed i {
  bottom: 30%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dff6ff;
  animation: enemy-fx-rise 1.2s ease-in infinite;
}

.enemy-fx-poison i,
.enemy-fx-bleed i {
  top: 15%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.enemy-fx-slowed i:nth-child(1),
.enemy-fx-poison i:nth-child(1),
.enemy-fx-bleed i:nth-child(1) { left: 18%; animation-delay: -0.2s; }

.enemy-fx-slowed i:nth-child(2),
.enemy-fx-poison i:nth-child(2),
.enemy-fx-bleed i:nth-child(2) { left: 42%; animation-delay: -0.75s; }

.enemy-fx-slowed i:nth-child(3),
.enemy-fx-poison i:nth-child(3),
.enemy-fx-bleed i:nth-child(3) { left: 64%; animation-delay: -0.45s; }

.enemy-fx-slowed i:nth-child(4),
.enemy-fx-poison i:nth-child(4),
.enemy-fx-bleed i:nth-child(4) { left: 80%; animation-delay: -1s; }

.enemy.enemy-poison:not(.enemy-frozen) {
  filter: sepia(0.35) hue-rotate(45deg) saturate(1.5) drop-shadow(0 0 5px rgb(140 255 60 / 0.6));
}

.enemy.enemy-bleed:not(.enemy-frozen, .enemy-poison) {
  filter: drop-shadow(0 0 4px rgb(220 20 40 / 0.7));
}

.enemy-fx-poison i {
  border: 1px solid rgb(220 255 150 / 0.8);
  background: radial-gradient(circle at 35% 30%, #fff, rgb(150 240 60 / 0.6) 45%, transparent 70%);
  animation: enemy-fx-rise 1.1s ease-in infinite;
}

.enemy-fx-bleed i {
  top: 30%;
  width: 5px;
  height: 8px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 40% 30%, #ff7a8a, #b50a26 55%, #4e000c);
  animation: enemy-fx-drip 0.9s ease-in infinite;
}

@keyframes player-power-cast {
  0%, 100% { filter: none; }
  25%, 65% { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px rgb(190 120 255 / 0.9)); }
}

@keyframes player-power-slam {
  0%, 100% { filter: none; translate: 0 0; }
  30% { translate: 0 -10px; filter: drop-shadow(0 0 8px #ffd9a0); }
  45% { translate: 0 3px; }
  60% { translate: 0 0; filter: drop-shadow(0 0 12px #c08a50); }
}

@keyframes player-healed {
  0%, 100% { filter: none; }
  30%, 60% { filter: drop-shadow(0 0 8px #9dffa9) drop-shadow(0 0 18px rgb(60 220 90 / 0.8)); }
}

@keyframes heal-rise {
  0% { opacity: 0; transform: translateY(6px) scale(0.5); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.25); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-38px) scale(0.9); }
}

@keyframes pfx-pool-life {
  0% { opacity: 0; scale: 0.3; }
  10% { opacity: 1; scale: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; scale: 1.05; }
}

@keyframes pfx-cloud-fade {
  0% { opacity: 0; }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pfx-toxic-swirl {
  from { transform: rotate(0deg) translateY(calc(var(--d) * -1)) scale(0.9); }
  to { transform: rotate(40deg) translateY(calc(var(--d) * -0.6)) scale(1.15); }
}

@keyframes pfx-bubble-pop {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  25% { opacity: 1; }
  80% { opacity: 1; transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(1.5); }
}

@keyframes pfx-crack {
  0% { opacity: 0; clip-path: polygon(40% 0, 60% 0, 60% 0, 40% 0); }
  15% { opacity: 1; }
  25% { clip-path: polygon(40% 0, 60% 0, 100% 25%, 30% 50%, 80% 75%, 50% 100%, 20% 75%, 60% 50%, 0 25%); }
  75% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes pfx-rock-arc {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(0.6); }
  45% { transform: translateY(calc(var(--d) * -0.6)) translateX(-18px) rotate(calc(var(--spin) * 0.5)) scale(1.15); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1)) rotate(var(--spin)) scale(0.9); }
}

@keyframes arena-lightning {
  0% { opacity: 0.9; }
  15% { opacity: 0.1; }
  25% { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes pfx-bolt-flicker {
  0% { opacity: 1; }
  30% { opacity: 0.35; }
  45% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 0; }
}

@keyframes pfx-vortex-appear {
  from { opacity: 0; scale: 0.2; }
  to { opacity: 1; scale: 1; }
}

@keyframes pfx-vortex-spin {
  to { rotate: 360deg; }
}

@keyframes pfx-vortex-pulse {
  from { scale: 0.85; }
  to { scale: 1.15; }
}

@keyframes pfx-vortex-suck {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(var(--s)); }
  20% { opacity: 1; }
  100% { opacity: 0.2; transform: rotate(calc(var(--a) + 220deg)) translateY(0) scale(0.2); }
}

@keyframes pfx-vortex-collapse {
  to { opacity: 0; scale: 0.05; }
}

@keyframes pfx-drop-in {
  0% { opacity: 0; transform: translateY(calc(var(--d) * -1)) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0) scale(0.3); }
}

@keyframes enemy-stun-orbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes enemy-fx-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.2); }
}

@keyframes enemy-fx-drip {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .arena.arena-lightning::after,
  .enemy-fx-stunned,
  .pfx-vortex-disc,
  .pfx-vortex-ring {
    animation: none;
  }
}

/* Signature de chaque pistolet : traçante, flamme de bouche, fumée et impact propres. */
.shot-bullet.shot-fx-flint {
  --trail: 30px;
  --trail-color: rgb(220 215 200 / 0.55);
}

.shot-bullet.shot-fx-flint .shot-core {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8e8e8, #8a8a8a 55%, #3d3d3d);
  box-shadow: 0 0 3px rgb(255 220 150 / 0.6);
}

.shot-bullet.shot-fx-sheriff {
  --trail: 58px;
  --trail-color: rgb(255 240 200 / 0.8);
}

.shot-bullet.shot-fx-sheriff .shot-core {
  background: linear-gradient(180deg, #ffffff, #d8d8e0 50%, #8a8a99);
  box-shadow: 0 0 6px 1px #fff3c4;
}

.shot-bullet.shot-fx-pumpkin {
  --trail: 40px;
  --trail-color: rgb(255 130 30 / 0.8);
}

.shot-bullet.shot-fx-pumpkin .shot-core {
  width: 10px;
  height: 9px;
  border-radius: 45%;
  background: radial-gradient(circle at 35% 30%, #ffd27a, #ff7a1a 55%, #a03a06);
  box-shadow: 0 0 8px 2px #ff6a1a;
  animation: shot-flicker 0.08s steps(2) infinite;
}

.shot-bullet.shot-fx-spectral {
  --trail: 70px;
  --trail-color: rgb(110 255 200 / 0.75);
}

.shot-bullet.shot-fx-spectral .shot-trail {
  height: 6px;
  filter: blur(1.5px);
}

.shot-bullet.shot-fx-spectral .shot-core {
  width: 14px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f4fff9, rgb(90 255 200 / 0.8) 50%, transparent 75%);
  box-shadow: 0 0 10px 3px rgb(80 255 190 / 0.6);
}

.shot-bullet.shot-fx-shadow {
  --trail: 60px;
  --trail-color: rgb(150 70 255 / 0.85);
}

.shot-bullet.shot-fx-shadow .shot-trail {
  height: 7px;
  filter: blur(1px);
}

.shot-bullet.shot-fx-shadow .shot-core {
  width: 15px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 30%, #2a0b4d 55%, #b27cff 75%, transparent 80%);
  box-shadow: 0 0 10px 3px rgb(150 70 255 / 0.7);
}

.muzzle-fx-flint .muzzle-flash {
  width: 34px;
  height: 22px;
}

.muzzle-fx-pumpkin .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #fff 0 12%, #ffc06b 30%, rgb(255 90 20 / 0.8) 55%, transparent 72%);
}

.muzzle-fx-spectral .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #f4fff9 0 15%, #9dffe0 35%, rgb(60 255 190 / 0.6) 55%, transparent 72%);
}

.muzzle-fx-shadow .muzzle-flash {
  width: 36px;
  height: 24px;
  background: radial-gradient(ellipse at 10% 50%, #fff 0 10%, #d2a8ff 28%, rgb(110 30 220 / 0.8) 55%, transparent 72%);
}

.muzzle-fx-spectral .muzzle-smoke {
  background: radial-gradient(circle, rgb(120 255 210 / 0.45), transparent 70%);
}

.muzzle-fx-shadow .muzzle-smoke {
  background: radial-gradient(circle, rgb(40 10 70 / 0.6), transparent 70%);
}

.fx-layer.gun-smoke-fx {
  z-index: 3;
  rotate: var(--dir);
}

.gun-smoke-puff {
  width: calc(18px * var(--s));
  height: calc(18px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgb(235 232 225 / 0.75), rgb(200 195 188 / 0.35) 55%, transparent 72%);
  filter: blur(2px);
  translate: calc(var(--d) - 50%) -50%;
  animation: gun-smoke-drift 1.4s var(--t) ease-out both;
}

.gun-pan-flash {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd36b 40%, transparent 70%);
  translate: -120% -110%;
  animation: pfx-flash 0.18s ease-out forwards;
}

.fx-layer.gun-eject-fx {
  z-index: 3;
}

.gun-seed {
  width: 5px;
  height: 3px;
  border-radius: 50%;
  background: #f4e2b0;
  box-shadow: inset -1px -1px 0 #b89a5a;
  rotate: var(--a);
  animation: gun-eject 0.6s cubic-bezier(0.3, 0.6, 0.5, 1) both;
}

.crit-num {
  position: absolute;
  z-index: 9;
  color: #ffe259;
  font-family: "Arial Black", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #3a1500;
  text-shadow: 0 0 10px rgb(255 160 40 / 0.85);
  translate: -50% -100%;
  scale: var(--world-scale, 1);
  white-space: nowrap;
  animation: crit-pop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.hit-fx-flint { --hit-core: #fff; --hit-glow: rgb(255 190 110 / 0.7); --hit-spark: #ffd28a; --hit-smoke: rgb(200 195 185 / 0.55); }
.hit-fx-sheriff { --hit-core: #fff; --hit-glow: rgb(255 245 210 / 0.85); --hit-spark: #fff2b8; --hit-smoke: rgb(150 140 130 / 0.4); }
.hit-fx-pumpkin { --hit-core: #fff4c0; --hit-glow: rgb(255 110 20 / 0.9); --hit-spark: #ff9a3a; --hit-smoke: rgb(80 50 30 / 0.55); }
.hit-fx-spectral { --hit-core: #f4fff9; --hit-glow: rgb(80 255 190 / 0.85); --hit-spark: #9dffe0; --hit-smoke: rgb(60 200 160 / 0.5); }
.hit-fx-shadow { --hit-core: #e8d4ff; --hit-glow: rgb(140 60 255 / 0.9); --hit-spark: #c99bff; --hit-smoke: rgb(30 10 50 / 0.6); }

.pfx-shadow-blast {
  --pfx-glow: rgb(150 70 255 / 0.85);
}

.pfx-shadow-orb {
  width: calc(var(--r) * 1.4);
  height: calc(var(--r) * 1.4);
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 25%, rgb(40 10 80 / 0.85) 45%, rgb(140 60 255 / 0.45) 62%, transparent 72%);
  translate: -50% -50%;
  animation: pfx-fireball 0.6s ease-out forwards;
}

.pfx-shadow-wisp {
  width: calc(10px * var(--s));
  height: calc(10px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #d8b8ff, rgb(90 30 180 / 0.6) 55%, transparent 72%);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-drift-out 0.7s var(--t) ease-out both;
}

/* Signature de chaque épée : traînée, particules et impact. */
.hit-fx-rust { --hit-core: #ffe6c8; --hit-glow: rgb(190 110 60 / 0.75); --hit-spark: #c9874a; --hit-smoke: rgb(120 70 40 / 0.45); }
.hit-fx-knight { --hit-core: #fff; --hit-glow: rgb(220 235 255 / 0.85); --hit-spark: #ffffff; --hit-smoke: rgb(170 180 200 / 0.35); }
.hit-fx-ghost { --hit-core: #f0ffff; --hit-glow: rgb(110 240 255 / 0.85); --hit-spark: #a8f6ff; --hit-smoke: rgb(70 180 200 / 0.45); }
.hit-fx-ember { --hit-core: #fff4c0; --hit-glow: rgb(255 110 20 / 0.9); --hit-spark: #ffb04a; --hit-smoke: rgb(70 40 25 / 0.55); }
.hit-fx-moon { --hit-core: #fff0f4; --hit-glow: rgb(255 40 90 / 0.9); --hit-spark: #ff7aa0; --hit-smoke: rgb(110 10 40 / 0.5); }

.slash-fx.slash-rust > .slash-arc {
  filter: drop-shadow(0 0 4px #a8642e) sepia(0.35);
}

.slash-fx.slash-knight > :is(.slash-arc, .slash-edge) {
  animation-duration: 0.34s;
}

.slash-fx.slash-ghost > .slash-arc {
  filter: blur(1px) drop-shadow(0 0 10px #6ff0ff);
  opacity: 0.85;
}

.slash-fx.slash-ghost.is-mirrored > :is(.slash-arc, .slash-edge) {
  animation-name: slash-sweep-back;
}

.slash-fx.slash-ember > .slash-arc {
  filter: drop-shadow(0 0 10px #ff6a1a) drop-shadow(0 0 3px #ffd36b);
  animation-duration: 0.4s;
}

.slash-fx.slash-moon > .slash-arc {
  filter: drop-shadow(0 0 12px #ff2a5a);
  animation-duration: 0.42s;
}

.fx-layer > :is(.slash-flake, .slash-ember, .slash-wisp) {
  width: calc(5px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 40%;
  rotate: var(--a);
  animation: slash-particle 0.5s var(--t) ease-out both;
}

.fx-layer > .slash-flake {
  background: #9a5a2a;
  clip-path: polygon(0 20%, 70% 0, 100% 60%, 30% 100%);
}

.fx-layer > .slash-ember {
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 6px 2px #ff6a1a;
}

.fx-layer > .slash-wisp {
  width: calc(10px * var(--s));
  height: calc(10px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #effffe, rgb(110 240 255 / 0.5) 55%, transparent 72%);
}

.fx-layer > .slash-glint {
  width: 26px;
  height: 26px;
  background:
    linear-gradient(90deg, transparent 45%, #fff 50%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #fff 50%, transparent 55%);
  filter: drop-shadow(0 0 4px #dff0ff);
  rotate: var(--angle);
  transform: translateX(calc(var(--reach) * 0.92));
  translate: -50% -50%;
  animation: slash-glint 0.34s 0.08s ease-out both;
}

.fx-layer > .slash-crescent {
  top: calc(-1 * var(--reach));
  left: calc(-1 * var(--reach));
  width: calc(2 * var(--reach));
  height: calc(2 * var(--reach));
  border-radius: 50%;
  background: conic-gradient(
    from calc(90deg - var(--arc) / 2),
    transparent 0deg,
    rgb(255 60 110 / 0.8) calc(var(--arc) * 0.5),
    transparent var(--arc)
  );
  filter: drop-shadow(0 0 8px #ff2a5a);
  -webkit-mask: radial-gradient(circle closest-side, transparent 86%, #000 92%, transparent 99%);
  mask: radial-gradient(circle closest-side, transparent 86%, #000 92%, transparent 99%);
  rotate: calc(var(--angle) - 90deg + var(--arc) * 0);
  animation: slash-crescent 0.42s 0.06s cubic-bezier(0.2, 0.6, 0.3, 1) both;
}

@keyframes gun-smoke-drift {
  0% { opacity: 0; scale: 0.3; }
  15% { opacity: 1; }
  100% { opacity: 0; scale: 2.4; transform: translate(var(--dx), -22px); }
}

@keyframes gun-eject {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(var(--d) * -1)) rotate(calc(var(--spin) * 0.5)); }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -0.6)) translateX(10px) rotate(var(--spin)); }
}

@keyframes crit-pop {
  0% { opacity: 0; transform: translateY(4px) scale(0.4) rotate(-8deg); }
  18% { opacity: 1; transform: translateY(-12px) scale(1.5) rotate(4deg); }
  35% { transform: translateY(-16px) scale(1) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

@keyframes slash-sweep-back {
  0% { opacity: 0; transform: scaleY(-1) rotate(calc(-1 * var(--angle) - 32deg)) scale(0.88); }
  15% { opacity: 0.8; }
  100% { opacity: 0; transform: scaleY(-1) rotate(calc(-1 * var(--angle) + 10deg)) scale(1.04); }
}

@keyframes slash-particle {
  0% { opacity: 0; transform: translateY(calc(var(--d) * -0.85)) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--d) * -1.15)) translateX(6px) scale(1); }
}

@keyframes slash-glint {
  0% { opacity: 0; scale: 0.2; }
  40% { opacity: 1; scale: 1.2; }
  100% { opacity: 0; scale: 0.4; }
}

@keyframes slash-crescent {
  0% { opacity: 0; scale: 0.8; }
  20% { opacity: 1; }
  100% { opacity: 0; scale: var(--wave, 1.6); }
}

/* Gestes propres à chaque arme : balancement au repos, coups et reculs différents. */
@property --wrist-sway {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.rig-weapon-mount > .hero-real-weapon {
  rotate: calc(var(--wrist) + var(--wrist-kick, 0deg) + var(--wrist-sway));
}

:where(.player) .rig {
  animation: weapon-idle-sway 2.6s ease-in-out infinite;
}

:where(.player.is-walking, .player.is-running) .rig {
  animation: weapon-walk-bob 0.46s ease-in-out infinite;
}

:where(.player.is-aiming) .rig {
  animation: none;
}

.player.is-shooting[data-weapon-style="rust"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-chop 0.34s cubic-bezier(0.5, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-hands="one"][data-weapon-style="rust"] .rig {
  animation: wrist-chop 0.34s cubic-bezier(0.5, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-style="knight"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-sweep 0.32s cubic-bezier(0.35, 0, 0.25, 1);
}

.player.is-shooting[data-weapon-style="knight"] .rig-limbs .rig-torso {
  animation: torso-sweep 0.32s ease-out;
}

.player.is-shooting[data-weapon-style="ghost"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-double-flick 0.3s ease-in-out;
}

.player.is-shooting[data-weapon-hands="one"][data-weapon-style="ghost"] .rig {
  animation: wrist-double-flick 0.3s ease-in-out;
}

.player.is-shooting[data-weapon-style="ember"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-heavy 0.4s cubic-bezier(0.55, 0, 0.15, 1);
}

.player.is-shooting[data-weapon-style="ember"] .rig-limbs .rig-torso {
  animation: torso-heavy 0.4s ease-out;
}

.player.is-shooting[data-weapon-style="moon"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-spin 0.42s cubic-bezier(0.45, 0, 0.25, 1);
}

.player.is-shooting[data-weapon-style="moon"] .rig-limbs .rig-torso {
  animation: torso-spin 0.42s ease-in-out;
}

.player.is-shooting[data-weapon-style="flint"] .rig {
  --gun-kick: -38deg;
  --gun-recoil: 9px;
  animation: wrist-gun-kick-slow 0.42s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting[data-weapon-style="sheriff"] .rig {
  --gun-kick: -20deg;
  --gun-recoil: 5px;
  animation: wrist-gun-kick 0.2s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting[data-weapon-style="pumpkin"] .rig {
  --gun-kick: -18deg;
  --gun-recoil: 5px;
  animation: wrist-gun-double 0.32s ease-out;
}

.player.is-shooting[data-weapon-style="spectral"] .rig {
  --gun-kick: -9deg;
  --gun-recoil: 2px;
  animation: wrist-gun-float 0.3s ease-in-out;
}

.player.is-shooting[data-weapon-style="shadow"] .rig {
  --gun-kick: -30deg;
  --gun-recoil: 11px;
  animation: wrist-gun-kick-slow 0.4s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting:is([data-weapon-style="flint"], [data-weapon-style="shadow"]) .rig-limbs .rig-torso {
  animation: torso-recoil-heavy 0.4s ease-out;
}

@keyframes weapon-idle-sway {
  0%, 100% { --wrist-sway: -2deg; }
  50% { --wrist-sway: 3deg; }
}

@keyframes weapon-walk-bob {
  0%, 100% { --wrist-sway: -6deg; }
  50% { --wrist-sway: 5deg; }
}

@keyframes hold-chop {
  0% { rotate: var(--arm-aim); }
  32% { rotate: calc(var(--arm-aim) - 140deg); }
  62% { rotate: calc(var(--arm-aim) + 58deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes wrist-chop {
  0% { --wrist-kick: 0deg; }
  32% { --wrist-kick: -78deg; }
  62% { --wrist-kick: 40deg; }
  100% { --wrist-kick: 0deg; }
}

@keyframes hold-sweep {
  0% { rotate: var(--arm-aim); }
  22% { rotate: calc(var(--arm-aim) - 105deg); }
  64% { rotate: calc(var(--arm-aim) + 72deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes torso-sweep {
  0%, 100% { rotate: 0deg; }
  22% { rotate: -8deg; }
  64% { rotate: 10deg; }
}

@keyframes hold-double-flick {
  0% { rotate: var(--arm-aim); }
  18% { rotate: calc(var(--arm-aim) - 62deg); }
  40% { rotate: calc(var(--arm-aim) + 34deg); }
  60% { rotate: calc(var(--arm-aim) - 50deg); }
  80% { rotate: calc(var(--arm-aim) + 30deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes wrist-double-flick {
  0%, 100% { --wrist-kick: 0deg; }
  18% { --wrist-kick: -50deg; }
  40% { --wrist-kick: 30deg; }
  60% { --wrist-kick: -42deg; }
  80% { --wrist-kick: 24deg; }
}

@keyframes hold-heavy {
  0% { rotate: var(--arm-aim); }
  38% { rotate: calc(var(--arm-aim) - 112deg); }
  66% { rotate: calc(var(--arm-aim) + 82deg); }
  82% { rotate: calc(var(--arm-aim) + 70deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes torso-heavy {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  38% { rotate: -9deg; translate: -2px 0; }
  66% { rotate: 12deg; translate: 3px 1px; }
}

@keyframes hold-spin {
  0% { rotate: var(--arm-aim); }
  20% { rotate: calc(var(--arm-aim) - 50deg); }
  100% { rotate: calc(var(--arm-aim) + 360deg); }
}

@keyframes torso-spin {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -6deg; }
  60% { rotate: 11deg; }
}

@keyframes wrist-gun-kick-slow {
  0% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
  10% { --wrist-kick: var(--gun-kick, -24deg); --weapon-recoil: var(--gun-recoil, 6px); }
  40% { --wrist-kick: calc(var(--gun-kick, -24deg) * 0.7); --weapon-recoil: 3px; }
  100% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
}

@keyframes wrist-gun-double {
  0% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
  12% { --wrist-kick: var(--gun-kick); --weapon-recoil: var(--gun-recoil); }
  35% { --wrist-kick: calc(var(--gun-kick) * 0.3); --weapon-recoil: 1px; }
  50% { --wrist-kick: var(--gun-kick); --weapon-recoil: var(--gun-recoil); }
  100% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
}

@keyframes wrist-gun-float {
  0% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
  20% { --wrist-kick: var(--gun-kick); --weapon-recoil: var(--gun-recoil); }
  55% { --wrist-kick: 4deg; --weapon-recoil: -2px; }
  100% { --wrist-kick: 0deg; --weapon-recoil: 0px; }
}

@keyframes torso-recoil-heavy {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  15% { rotate: -7deg; translate: -3px 0; }
  45% { rotate: -3deg; translate: -1px 0; }
}



/* ===== Nouvelles armes : hache, lance, marteau, dague, katana, tromblon, fusil, givre, foudre, néon ===== */
.hit-fx-axe { --hit-core: #fff1dc; --hit-glow: rgb(200 140 80 / 0.8); --hit-spark: #e8c18a; --hit-smoke: rgb(110 70 40 / 0.5); }
.hit-fx-spear { --hit-core: #fff; --hit-glow: rgb(255 230 160 / 0.8); --hit-spark: #fff2c0; --hit-smoke: rgb(150 140 120 / 0.35); }
.hit-fx-hammer { --hit-core: #fff8e0; --hit-glow: rgb(255 200 90 / 0.9); --hit-spark: #ffd27a; --hit-smoke: rgb(120 100 80 / 0.6); }
.hit-fx-poison { --hit-core: #f4ffe0; --hit-glow: rgb(140 255 80 / 0.85); --hit-spark: #b6ff6a; --hit-smoke: rgb(60 140 30 / 0.55); }
.hit-fx-katana { --hit-core: #f6ecff; --hit-glow: rgb(170 100 255 / 0.9); --hit-spark: #d6b0ff; --hit-smoke: rgb(50 20 80 / 0.55); }
.hit-fx-blunderbuss { --hit-core: #fff4d0; --hit-glow: rgb(255 150 60 / 0.8); --hit-spark: #ffc070; --hit-smoke: rgb(110 100 95 / 0.6); }
.hit-fx-sniper { --hit-core: #fff; --hit-glow: rgb(255 255 255 / 0.9); --hit-spark: #ffffff; --hit-smoke: rgb(160 160 170 / 0.45); }
.hit-fx-frost { --hit-core: #fff; --hit-glow: rgb(140 225 255 / 0.9); --hit-spark: #c8f4ff; --hit-smoke: rgb(180 230 255 / 0.5); }
.hit-fx-storm { --hit-core: #fff; --hit-glow: rgb(120 180 255 / 0.95); --hit-spark: #d8ecff; --hit-smoke: rgb(60 80 160 / 0.45); }
.hit-fx-neon { --hit-core: #fff; --hit-glow: rgb(0 255 230 / 0.95); --hit-spark: #ff4df0; --hit-smoke: rgb(0 120 140 / 0.45); }

.slash-fx.slash-axe > .slash-arc {
  filter: drop-shadow(0 0 5px #b07a3c) sepia(0.2);
  animation-duration: 0.42s;
}

.slash-fx.slash-hammer > .slash-arc {
  filter: drop-shadow(0 0 10px #ffb84a) brightness(1.1);
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.slash-fx.slash-spear > :is(.slash-arc, .slash-edge) {
  animation-duration: 0.22s;
}

.slash-fx.slash-poison > .slash-arc {
  filter: drop-shadow(0 0 8px #7dff3a);
  animation-duration: 0.2s;
}

.slash-fx.slash-katana > .slash-arc {
  filter: drop-shadow(0 0 12px #a46bff) drop-shadow(0 0 3px #fff);
  animation-duration: 0.24s;
}

.slash-fx.slash-katana.is-mirrored > :is(.slash-arc, .slash-edge) {
  animation-name: slash-sweep-back;
}

.fx-layer > :is(.slash-chip, .slash-dust, .slash-venom, .slash-petal) {
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
  rotate: var(--a);
  animation: slash-particle 0.5s var(--t) ease-out both;
}

.fx-layer > .slash-chip {
  background: #c99a62;
  clip-path: polygon(0 30%, 80% 0, 100% 70%, 20% 100%);
}

.fx-layer > .slash-dust {
  width: calc(14px * var(--s));
  height: calc(14px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgb(220 200 170 / 0.7), transparent 70%);
  filter: blur(1px);
}

.fx-layer > .slash-venom {
  border-radius: 50% 50% 50% 0;
  background: #9dff4a;
  box-shadow: 0 0 6px 2px rgb(110 255 50 / 0.7);
}

.fx-layer > .slash-petal {
  width: calc(9px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 80% 0;
  background: linear-gradient(135deg, #f0d8ff, #9a5cff);
  box-shadow: 0 0 5px rgb(170 110 255 / 0.8);
}

.fx-layer > .slash-thrust {
  width: var(--reach);
  height: 10px;
  border-radius: 0 50% 50% 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--slash-color) 70%, transparent) 60%, #fff);
  filter: drop-shadow(0 0 6px var(--slash-color));
  rotate: var(--angle);
  transform-origin: 0 50%;
  translate: 0 -50%;
  animation: slash-thrust 0.24s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes slash-thrust {
  0% { opacity: 0; scale: 0.2 0.6; }
  35% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: 1.08 0.4; }
}

.pfx-hammer-shock {
  --pfx-glow: rgb(255 200 110 / 0.8);
}

.shot-pellet.shot-fx-blunderbuss .shot-core {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle at 35% 30%, #d8d8d8, #6a6a6a 60%, #2a2a2a);
  box-shadow: 0 0 4px rgb(255 170 80 / 0.7);
}

.shot-pellet.shot-fx-blunderbuss {
  --trail: 30px;
  --trail-color: rgb(230 220 200 / 0.6);
}

.shot-bullet.shot-fx-sniper {
  --trail: 140px;
  --trail-color: rgb(255 255 255 / 0.85);
}

.shot-bullet.shot-fx-sniper .shot-trail {
  height: 2px;
  box-shadow: 0 0 6px rgb(255 255 255 / 0.8);
}

.shot-bullet.shot-fx-sniper .shot-core {
  width: 16px;
  height: 4px;
  background: linear-gradient(180deg, #fff, #d4b26a 55%, #6a4a12);
}

.shot-bullet.shot-fx-frost {
  --trail: 60px;
  --trail-color: rgb(150 225 255 / 0.85);
}

.shot-bullet.shot-fx-frost .shot-core {
  width: 12px;
  height: 8px;
  border-radius: 20% 60% 60% 20%;
  background: linear-gradient(180deg, #fff, #bdf0ff 45%, #4cb8e8);
  box-shadow: 0 0 8px 2px rgb(140 225 255 / 0.85);
  clip-path: polygon(0 20%, 70% 0, 100% 50%, 70% 100%, 0 80%);
}

.shot-rune.shot-fx-storm {
  --trail: 50px;
  --trail-color: rgb(140 190 255 / 0.9);
  filter: drop-shadow(0 0 8px #6aa8ff);
}

.shot-rune.shot-fx-storm .shot-core {
  width: 16px;
  height: 16px;
  border: 0;
  background: radial-gradient(circle, #fff 0 25%, #bfe0ff 40%, rgb(90 150 255 / 0.6) 62%, transparent 72%);
  font-size: 0;
  animation: shot-flicker 0.07s steps(2) infinite;
}

.shot-bullet.shot-fx-neon {
  --trail: 80px;
  --trail-color: rgb(0 255 230 / 0.95);
}

.shot-bullet.shot-fx-neon .shot-trail {
  height: 4px;
  box-shadow: 0 0 8px #00ffe6, 0 0 14px #ff4df0;
}

.shot-bullet.shot-fx-neon .shot-core {
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 6px 2px #00ffe6, 0 0 12px 3px #ff4df0;
}

.muzzle-fx-blunderbuss .muzzle-flash {
  width: 44px;
  height: 34px;
  background: radial-gradient(ellipse at 10% 50%, #fff 0 10%, #ffd27a 30%, rgb(255 110 30 / 0.8) 55%, transparent 72%);
}

.muzzle-fx-sniper .muzzle-flash {
  width: 40px;
  height: 16px;
}

.muzzle-fx-frost .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #fff 0 15%, #c8f4ff 35%, rgb(90 200 255 / 0.7) 55%, transparent 72%);
}

.muzzle-fx-storm .muzzle-flash {
  background: radial-gradient(circle, #fff 0 15%, #bfe0ff 35%, rgb(90 150 255 / 0.7) 55%, transparent 72%);
}

.muzzle-fx-neon .muzzle-flash {
  background: radial-gradient(ellipse at 10% 50%, #fff 0 15%, #7dfff0 35%, rgb(255 77 240 / 0.6) 55%, transparent 72%);
}

.muzzle-fx-frost .muzzle-smoke {
  background: radial-gradient(circle, rgb(220 245 255 / 0.6), transparent 70%);
}

.muzzle-fx-neon .muzzle-smoke,
.muzzle-fx-storm .muzzle-smoke {
  display: none;
}

/* Gestes des nouvelles armes */
.player.is-shooting[data-weapon-style="axe"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-chop 0.46s cubic-bezier(0.6, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-hands="one"][data-weapon-style="axe"] .rig {
  animation: wrist-chop 0.46s cubic-bezier(0.6, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-style="axe"] .rig-limbs .rig-torso {
  animation: torso-heavy 0.46s ease-out;
}

.player.is-shooting[data-weapon-style="hammer"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-part.rig-arm-l, .rig-weapon-mount) {
  animation: hold-slam 0.56s cubic-bezier(0.65, 0, 0.2, 1);
}

.player.is-shooting[data-weapon-style="hammer"] .rig-limbs .rig-torso {
  animation: torso-slam 0.56s ease-out;
}

.player.is-shooting[data-weapon-style="spear"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-part.rig-arm-l, .rig-weapon-mount) {
  animation: hold-jab 0.36s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.player.is-shooting[data-weapon-style="spear"] .rig-limbs .rig-torso {
  animation: torso-lunge 0.36s ease-out;
}

.player.is-shooting[data-weapon-style="poison"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-stab 0.2s ease-in-out;
}

.player.is-shooting[data-weapon-style="katana"] .rig-limbs :is(.rig-part.rig-arm-r, .rig-weapon-mount) {
  animation: hold-double-flick 0.26s ease-in-out;
}

.player.is-shooting[data-weapon-hands="one"][data-weapon-style="katana"] .rig {
  animation: wrist-double-flick 0.26s ease-in-out;
}

.player.is-shooting[data-weapon-style="katana"] .rig-limbs .rig-torso {
  animation: torso-sweep 0.26s ease-out;
}

.player.is-shooting[data-weapon-style="blunderbuss"] .rig {
  --gun-kick: -42deg;
  --gun-recoil: 12px;
  animation: wrist-gun-kick-slow 0.46s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting[data-weapon-style="sniper"] .rig {
  --gun-kick: -26deg;
  --gun-recoil: 10px;
  animation: wrist-gun-kick-slow 0.52s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting:is([data-weapon-style="blunderbuss"], [data-weapon-style="sniper"]) .rig-limbs .rig-torso {
  animation: torso-recoil-heavy 0.46s ease-out;
}

.player.is-shooting[data-weapon-style="frost"] .rig {
  --gun-kick: -14deg;
  --gun-recoil: 4px;
  animation: wrist-gun-kick 0.28s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.player.is-shooting[data-weapon-style="storm"] .rig {
  --gun-kick: -22deg;
  --gun-recoil: 0px;
  animation: wrist-gun-float 0.34s ease-in-out;
}

.player.is-shooting[data-weapon-style="neon"] .rig {
  --gun-kick: -6deg;
  --gun-recoil: 3px;
  animation: wrist-gun-kick 0.18s cubic-bezier(0.1, 0.9, 0.3, 1);
}

@keyframes hold-slam {
  0% { rotate: var(--arm-aim); }
  40% { rotate: calc(var(--arm-aim) - 165deg); }
  62% { rotate: calc(var(--arm-aim) + 25deg); }
  78% { rotate: calc(var(--arm-aim) + 18deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes torso-slam {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  40% { rotate: -10deg; translate: -2px -3px; }
  62% { rotate: 12deg; translate: 3px 3px; }
}

@keyframes hold-jab {
  0% { rotate: var(--arm-aim); }
  25% { rotate: calc(var(--arm-aim) - 22deg); }
  50% { rotate: calc(var(--arm-aim) + 6deg); }
  100% { rotate: var(--arm-aim); }
}

@keyframes torso-lunge {
  0%, 100% { translate: 0 0; }
  45% { translate: 4px 0; }
}

@keyframes hold-stab {
  0%, 100% { rotate: var(--arm-aim); }
  40% { rotate: calc(var(--arm-aim) - 30deg); }
  70% { rotate: calc(var(--arm-aim) + 14deg); }
}

/* ===== Nouveaux pouvoirs ===== */
.pfx-holy {
  --pfx-glow: rgb(255 236 150 / 0.9);
}

.pfx-holy-glow {
  width: calc(var(--r) * 2.2);
  height: calc(var(--r) * 2.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 248 200 / 0.55), rgb(255 220 120 / 0.25) 50%, transparent 70%);
  filter: blur(6px);
  translate: -50% -50%;
  animation: pfx-mist 1.6s ease-out forwards;
}

.pfx-holy-pillar {
  width: 130px;
  height: 460px;
  border-radius: 45px 45px 50% 50%;
  background: linear-gradient(0deg, rgb(255 255 240 / 0.95), rgb(255 230 140 / 0.7) 35%, rgb(255 220 120 / 0.2) 80%, transparent);
  filter: blur(3px);
  transform-origin: 50% 100%;
  translate: -50% -96%;
  animation: pfx-holy-pillar 1.4s ease-out forwards;
}

.pfx-holy-rune {
  width: calc(var(--r) * 1.4);
  height: calc(var(--r) * 0.7);
  border: 3px solid rgb(255 236 150 / 0.9);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 240 170 / 0.5) 0 6deg, transparent 6deg 30deg);
  box-shadow: 0 0 16px rgb(255 220 120 / 0.8), inset 0 0 14px rgb(255 220 120 / 0.6);
  translate: -50% -50%;
  animation: pfx-holy-rune 1.5s ease-out forwards;
}

.pfx-feather {
  width: calc(8px * var(--s));
  height: calc(20px * var(--s));
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  background: linear-gradient(90deg, #fffef4, #fff3c4 50%, #f2d98a);
  box-shadow: 0 0 6px rgb(255 240 180 / 0.9);
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-debris 1.3s var(--t) ease-out both;
}

.pfx-mote {
  width: calc(5px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 50%;
  background: #fffbe0;
  box-shadow: 0 0 6px 2px #ffe27a;
  rotate: var(--a);
  animation: pfx-drift-out 1.2s var(--t) ease-out both;
}

@keyframes pfx-holy-pillar {
  0% { opacity: 0; scale: 0.2 0; }
  18% { opacity: 1; scale: 1 1; }
  70% { opacity: 0.85; scale: 0.8 1; }
  100% { opacity: 0; scale: 0.2 1.05; }
}

@keyframes pfx-holy-rune {
  0% { opacity: 0; scale: 0.2; rotate: 0deg; }
  20% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.1; rotate: 60deg; }
}

.player.power-holy-casting .rig {
  filter: drop-shadow(0 0 10px rgb(255 230 140 / 0.95));
}

.pfx-boneshield,
.pfx-bone-burst {
  --pfx-glow: rgb(235 228 205 / 0.8);
  z-index: 6;
}

.pfx-bone-aura {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgb(230 225 200 / 0.12) 68%, rgb(240 235 210 / 0.35) 72%, transparent 76%);
  translate: -50% -50%;
  animation: pfx-bone-pulse 1.2s ease-in-out infinite;
}

.pfx-bone-orbit {
  width: 0;
  height: 0;
  animation: pfx-bone-spin 1.1s linear infinite;
}

.pfx-bone-orbit > .pfx-bone {
  position: absolute;
  width: 34px;
  height: 9px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 4px 2px, #f6f1df 3.5px, transparent 4px),
    radial-gradient(circle at 4px 7px, #f6f1df 3.5px, transparent 4px),
    radial-gradient(circle at 30px 2px, #f6f1df 3.5px, transparent 4px),
    radial-gradient(circle at 30px 7px, #f6f1df 3.5px, transparent 4px),
    linear-gradient(180deg, transparent 2px, #ece4c8 2px, #d8cfae 7px, transparent 7px);
  filter: drop-shadow(0 0 4px rgb(255 250 220 / 0.7)) drop-shadow(0 2px 1px rgb(0 0 0 / 0.5));
  transform: rotate(var(--a)) translateX(calc(var(--r) * 0.72)) rotate(90deg);
  translate: -50% -50%;
}

.pfx-boneshield.is-ending,
.pfx-tornado.is-ending,
.pfx-wolf-pack.is-ending,
.pfx-timestop.is-ending {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pfx-bone-chip {
  width: calc(10px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 2px;
  background: #efe7cc;
  rotate: var(--a);
  translate: -50% -50%;
  animation: pfx-debris 0.8s ease-out both;
}

@keyframes pfx-bone-spin {
  to { rotate: 360deg; }
}

@keyframes pfx-bone-pulse {
  0%, 100% { opacity: 0.6; scale: 0.96; }
  50% { opacity: 1; scale: 1.03; }
}

.player.power-boneshield-active .rig {
  filter: drop-shadow(0 0 6px rgb(240 235 210 / 0.7));
}

.pfx-tornado {
  z-index: 6;
}

.pfx-tornado-base {
  width: calc(var(--r) * 1.6);
  height: calc(var(--r) * 0.6);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(160 150 140 / 0.55), rgb(120 110 100 / 0.25) 55%, transparent 72%);
  filter: blur(4px);
  translate: -50% -50%;
  animation: pfx-bone-pulse 0.6s ease-in-out infinite;
}

.pfx-tornado-funnel {
  width: 0;
  height: 0;
}

.pfx-tornado-funnel::before {
  position: absolute;
  bottom: -16px;
  left: 0;
  width: calc(var(--r) * 1.35);
  height: calc(var(--r) * 1.7);
  background: linear-gradient(0deg, rgb(255 255 255 / 0.08), rgb(214 232 255 / 0.55) 42%, rgb(255 255 255 / 0.15) 70%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  content: "";
  filter: blur(1px) drop-shadow(0 0 10px rgb(190 220 255 / 0.85));
  translate: -50% 0;
  animation: pfx-bone-pulse 0.35s ease-in-out infinite;
}

.pfx-tornado-funnel > .pfx-tornado-band {
  position: absolute;
  bottom: calc(var(--i) * 26px - 10px);
  left: 0;
  width: calc(36px + var(--i) * 22px);
  height: 30px;
  border: 5px solid rgb(236 246 255 / 0.9);
  border-right-color: transparent;
  border-left-color: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgb(180 220 255 / 0.9));
  translate: -50% 0;
  animation: pfx-tornado-twist 0.45s var(--t) linear infinite;
}

.pfx-tornado-debris {
  width: calc(7px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 30%;
  background: #6d5a46;
  animation: pfx-tornado-debris 0.9s var(--t) linear infinite;
}

@keyframes pfx-tornado-twist {
  0%, 100% { translate: -50% 0; scale: 1 1; }
  50% { translate: calc(-50% + 8px) 0; scale: 0.9 1; }
}

@keyframes pfx-tornado-debris {
  0% { transform: rotate(var(--a)) translateX(calc(var(--r) * 0.3)) translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(calc(var(--a) + 360deg)) translateX(calc(var(--r) * 0.6)) translateY(calc(var(--r) * -0.9)); opacity: 0; }
}

.pfx-meteor,
.pfx-meteor-mark {
  --pfx-glow: rgb(255 130 40 / 0.9);
}

.pfx-meteor-mark::before {
  position: absolute;
  width: calc(var(--r) * 1.6);
  height: calc(var(--r) * 0.9);
  border: 2px dashed rgb(255 120 40 / 0.85);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 90 20 / 0.25), transparent 70%);
  content: "";
  translate: -50% -50%;
  animation: pfx-flash 0.5s ease-in reverse both;
}

.fx-layer.pfx-meteor-fall {
  z-index: 7;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c0, #ffb040 30%, #d4400d 60%, #4a1a0a 80%);
  box-shadow: 0 0 18px 6px rgb(255 110 30 / 0.8);
}

.fx-layer.pfx-meteor-fall::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgb(255 200 80 / 0.9), rgb(255 90 20 / 0.5) 40%, transparent);
  filter: blur(3px);
  content: "";
  transform-origin: 0 50%;
  translate: 0 -50%;
  rotate: -55deg;
}

.fx-layer.pfx-wolf-pack {
  z-index: 6;
}

.pfx-wolf {
  width: 0;
  height: 0;
  animation: pfx-wolf-circle 2.4s var(--t) linear infinite;
}

.pfx-wolf::before,
.fx-layer.pfx-wolf-lunge::before {
  position: absolute;
  top: -18px;
  left: -28px;
  width: 56px;
  height: 36px;
  background: #e7fbff;
  clip-path: polygon(6% 62%, 16% 38%, 30% 34%, 40% 16%, 48% 32%, 70% 26%, 84% 10%, 80% 36%, 100% 48%, 90% 60%, 74% 66%, 66% 100%, 54% 70%, 34% 100%, 36% 68%, 14% 64%);
  filter: drop-shadow(0 0 6px rgb(130 230 255 / 0.9));
  content: "";
}

.pfx-wolf::before {
  animation: pfx-wolf-run 0.25s ease-in-out infinite alternate;
}

.fx-layer.pfx-wolf-lunge {
  z-index: 7;
}

.fx-layer.pfx-wolf-lunge.is-left::before {
  scale: -1 1;
}

.pfx-bite {
  --pfx-glow: rgb(255 70 90 / 0.8);
}

.pfx-bite-jaw {
  width: 44px;
  height: 30px;
  background:
    linear-gradient(180deg, #fff 0 4px, transparent 4px) top / 100% 50% no-repeat,
    linear-gradient(0deg, #fff 0 4px, transparent 4px) bottom / 100% 50% no-repeat;
  clip-path: polygon(0 0, 12% 40%, 25% 0, 38% 40%, 50% 0, 62% 40%, 75% 0, 88% 40%, 100% 0, 100% 100%, 88% 60%, 75% 100%, 62% 60%, 50% 100%, 38% 60%, 25% 100%, 12% 60%, 0 100%);
  filter: drop-shadow(0 0 4px rgb(160 230 255 / 0.9));
  translate: -50% -50%;
  animation: pfx-bite 0.35s ease-out forwards;
}

@keyframes pfx-wolf-circle {
  from { transform: rotate(var(--a)) translateX(74px) rotate(90deg); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(74px) rotate(90deg); }
}

@keyframes pfx-wolf-run {
  from { translate: 0 -2px; }
  to { translate: 0 2px; }
}

@keyframes pfx-bite {
  0% { opacity: 0; scale: 1.4 1.8; }
  40% { opacity: 1; scale: 1 0.6; }
  100% { opacity: 0; scale: 0.9 0.3; }
}

.pfx-timestop {
  --pfx-glow: rgb(200 230 255 / 0.85);
  z-index: 6;
}

.pfx-clock {
  width: 220px;
  height: 220px;
  border: 4px solid rgb(210 235 255 / 0.7);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, rgb(230 245 255 / 0.9) 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, rgb(150 190 255 / 0.28), rgb(40 60 120 / 0.12) 62%, transparent 68%);
  box-shadow: 0 0 30px rgb(150 200 255 / 0.6), inset 0 0 30px rgb(150 200 255 / 0.5);
  mask: radial-gradient(circle, transparent 0 62%, #000 66% 100%);
  translate: -50% -50%;
  animation: pfx-clock 0.35s ease-out forwards;
}

.pfx-clock-hand {
  width: 6px;
  height: 64px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgb(255 255 255 / 0.95), rgb(190 220 255 / 0.8));
  box-shadow: 0 0 8px rgb(170 210 255 / 0.9);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  animation: pfx-clock-hand 0.7s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

.pfx-clock-hand-long {
  width: 4px;
  height: 92px;
  animation-name: pfx-clock-hand-long;
}

.pfx-sand {
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 50%;
  background: #f4e2a8;
  box-shadow: 0 0 5px #ffe9a8;
  rotate: var(--a);
  animation: pfx-drift-out 1.6s var(--t) ease-out both;
}

@keyframes pfx-clock {
  0% { opacity: 0; scale: 0.35; }
  100% { opacity: 1; scale: 1; }
}

@keyframes pfx-clock-hand {
  0% { opacity: 0; rotate: -30deg; }
  100% { opacity: 1; rotate: 250deg; }
}

@keyframes pfx-clock-hand-long {
  0% { opacity: 0; rotate: 20deg; }
  100% { opacity: 1; rotate: 610deg; }
}

.arena.arena-timestop .enemy {
  filter: grayscale(0.85) brightness(0.85) contrast(1.1) hue-rotate(180deg) saturate(0.4);
}

.arena.arena-timestop::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgb(60 90 160 / 0.28));
  content: "";
  pointer-events: none;
  animation: pfx-veil-fade 2.6s linear forwards;
}

/* ===== Packs de la boutique ===== */
.store-tab-packs {
  border-color: #ffd36b;
  background: linear-gradient(180deg, rgb(255 211 107 / 0.25), rgb(230 95 39 / 0.18));
  color: #ffe6b0;
}

.pack-card {
  --pack-a: #3d2738;
  --pack-b: #241a2b;
  --pack-trim: #ffb04a;
  grid-column: span 2;
  border: 2px solid var(--pack-trim);
  background: linear-gradient(150deg, var(--pack-a), var(--pack-b));
  box-shadow: 0 0 18px color-mix(in srgb, var(--pack-trim) 30%, transparent), 0 6px 16px rgb(0 0 0 / 0.4);
}

.pack-card.is-complete {
  opacity: 0.8;
  filter: saturate(0.7);
}

.pack-theme-western { --pack-a: #5a3a22; --pack-b: #2b1d14; --pack-trim: #e8b06a; }
.pack-theme-marais { --pack-a: #2f4a2a; --pack-b: #16211a; --pack-trim: #8fd36a; }
.pack-theme-pirate { --pack-a: #1f3a4a; --pack-b: #101c26; --pack-trim: #7fe0ff; }
.pack-theme-ninja { --pack-a: #2a2a33; --pack-b: #111116; --pack-trim: #e2384a; }
.pack-theme-samourai { --pack-a: #5a1c22; --pack-b: #261013; --pack-trim: #ffcf5a; }
.pack-theme-viking { --pack-a: #36434f; --pack-b: #181f26; --pack-trim: #c9d6e2; }
.pack-theme-chasseur { --pack-a: #3a2030; --pack-b: #170d14; --pack-trim: #ff5a6e; }
.pack-theme-cirque { --pack-a: #4a1f4a; --pack-b: #1f0f22; --pack-trim: #ff7ae0; }
.pack-theme-galactique { --pack-a: #1c2450; --pack-b: #0a0d22; --pack-trim: #a8c8ff; }
.pack-theme-neon { --pack-a: #102f3a; --pack-b: #08121a; --pack-trim: #00ffe6; }
.pack-theme-faucheuse { --pack-a: #26132e; --pack-b: #0a050e; --pack-trim: #ff5cf0; }

/* Thèmes des 50 packs supplémentaires */
.pack-theme-bonbon { --pack-a: #6a2a52; --pack-b: #2a0f26; --pack-trim: #ff9ad9; }
.pack-theme-braise { --pack-a: #5a2412; --pack-b: #220d07; --pack-trim: #ff8a3d; }
.pack-theme-desert { --pack-a: #5a4524; --pack-b: #241b0e; --pack-trim: #f0cf7a; }
.pack-theme-divin { --pack-a: #4a3a12; --pack-b: #1a1305; --pack-trim: #ffe27a; }
.pack-theme-foret { --pack-a: #23442c; --pack-b: #0f2014; --pack-trim: #9be37a; }
.pack-theme-glace { --pack-a: #1f4560; --pack-b: #0c1b28; --pack-trim: #aee6ff; }
.pack-theme-mystique { --pack-a: #3a2468; --pack-b: #150d2a; --pack-trim: #c9a2ff; }
.pack-theme-ocean { --pack-a: #16405a; --pack-b: #08171f; --pack-trim: #5fd0e8; }
.pack-theme-ombre { --pack-a: #2d2638; --pack-b: #0e0b14; --pack-trim: #b9a8d6; }
.pack-theme-or { --pack-a: #5a4a1a; --pack-b: #231c08; --pack-trim: #ffd45a; }
.pack-theme-orage { --pack-a: #26305a; --pack-b: #0d1124; --pack-trim: #8fb4ff; }
.pack-theme-sang { --pack-a: #5a1426; --pack-b: #1f070d; --pack-trim: #ff4d6a; }
.pack-theme-spectre { --pack-a: #25405a; --pack-b: #0b1622; --pack-trim: #a8f0ff; }
.pack-theme-toxique { --pack-a: #35501a; --pack-b: #12200a; --pack-trim: #b6f04a; }

.pack-card.pack-mythic {
  border-width: 3px;
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--pack-trim) 38%, transparent), transparent 46%),
    linear-gradient(150deg, var(--pack-a), var(--pack-b));
  box-shadow: 0 0 28px color-mix(in srgb, var(--pack-trim) 55%, transparent), 0 8px 20px rgb(0 0 0 / 0.5);
}

.pack-card.pack-mini .pack-emblem { filter: saturate(0.9); }

.store-badge-pack-mythic {
  background: linear-gradient(90deg, #ffe27a, #ff8a3d, #ff4d9d);
  color: #1c0a05;
}

.store-badge-pack-mini {
  background: #7fe0a0;
  color: #06220f;
}

.pack-opening-panel {
  max-height: 92vh;
  overflow-y: auto;
}

.store-badge-tier {
  background: var(--tier);
  color: #140c18;
}

.pack-preview {
  position: relative;
  height: 120px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--pack-trim) 35%, transparent) 0 38%, transparent 45%),
    linear-gradient(145deg, rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.04));
}

.pack-preview .character-preview {
  width: 92px;
  height: 112px;
}

.pack-emblem {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 2rem;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.6));
}

.pack-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.pack-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--tier);
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 22%, #1a1220), rgb(18 12 24 / 0.8));
}

.pack-item.is-owned {
  opacity: 0.6;
}

.pack-item-art {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
}

.pack-item-art .shop-item-art {
  width: 32px;
  height: 32px;
}

.pack-item-art .character-preview {
  width: 32px;
  height: 36px;
}

.pack-item-art .crate-power-icon {
  font-size: 1.4rem;
}

.pack-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pack-item-text strong {
  overflow: hidden;
  color: #fff1dc;
  font-size: 0.7rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-item-text small {
  overflow: hidden;
  color: var(--tier);
  font-size: 0.58rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-item-owned {
  position: absolute;
  top: 2px;
  right: 4px;
  color: #8fff9a;
  font-size: 0.52rem;
  font-weight: 900;
}

.pack-buy-button:not(:disabled) {
  background: linear-gradient(180deg, #ffd36b, #e65f27);
  color: #2a1206;
}

.pack-opening-panel {
  --crate-trim: var(--pack-trim, #ffb04a);
  --crate-glow: color-mix(in srgb, var(--pack-trim, #ffb04a) 45%, transparent);
  width: min(560px, 94vw);
}

.pack-opening-emblem {
  display: block;
  font-size: 3.4rem;
  animation: pack-emblem-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.pack-opening-note {
  margin: 4px 0 12px;
  color: #ffe0a8;
  font-weight: 800;
}

.pack-opening-items {
  margin-bottom: 14px;
  text-align: left;
}

.pack-opening-items .pack-item {
  padding: 8px;
  animation: pack-item-in 0.45s var(--delay, 0s) cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.pack-opening-items .pack-item.is-new::after {
  position: absolute;
  top: -7px;
  right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #3fbf5f;
  color: #08200f;
  content: "NOUVEAU";
  font-size: 0.5rem;
  font-weight: 1000;
}

.pack-opening-items .pack-item-art {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
}

.pack-opening-items .pack-item-art .character-preview {
  width: 44px;
  height: 50px;
}

.pack-opening-items .pack-item-art .shop-item-art {
  width: 46px;
  height: 46px;
}

.pack-opening-items .pack-item-text strong {
  font-size: 0.85rem;
}

.pack-opening-items .pack-item-text small {
  font-size: 0.68rem;
}

@keyframes pack-emblem-pop {
  0% { opacity: 0; scale: 0.2; rotate: -30deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes pack-item-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.85); }
  100% { opacity: 1; transform: none; }
}

.locker-tile-type {
  color: #cdb994;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .pack-card {
    grid-column: span 1;
  }

  .pack-items {
    grid-template-columns: 1fr;
  }
}

.touch-hud,
html[data-device="pc"] .touch-hud {
  display: none;
}

html[data-device="phone"] .arena.is-live .touch-hud {
  position: absolute;
  z-index: 16;
  inset: 0;
  display: block;
  pointer-events: none;
}

html[data-device="phone"] .arena.is-live .controls-hint {
  display: none;
}

html[data-device="phone"] .arena.is-live .hud-hearts {
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 136px;
}

html[data-device="phone"] .arena.is-live .touch-actions {
  bottom: max(68px, calc(env(safe-area-inset-bottom) + 58px));
}

html[data-device="phone"],
html[data-device="phone"] body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #070812;
}

html[data-device="phone"] body {
  display: block;
}

html[data-device="phone"] .arena {
  position: fixed !important;
  z-index: 1;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

html[data-device="phone"] .world {
  inset: auto;
  top: 0;
  left: 0;
}

html[data-device="phone"] .arena.is-live {
  touch-action: none;
}

html[data-device="phone"] .game-hud {
  top: max(10px, calc(env(safe-area-inset-top) + 4px));
  right: auto;
  left: 6px;
  gap: 3px;
  width: max-content;
  max-width: calc(100% - 110px);
  justify-content: flex-start;
  padding: 2px 4px;
  border-color: rgb(232 190 120 / 0.22);
  background: rgb(12 10 16 / 0.28);
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

html[data-device="phone"] .wave-display,
html[data-device="phone"] .player-name-display,
html[data-device="phone"] .hud-coins,
html[data-device="phone"] .auto-shoot-toggle,
html[data-device="phone"] .timer-label,
html[data-device="phone"] .run-time,
html[data-device="phone"] .boss-eta {
  font-size: 0.52rem;
}

html[data-device="phone"] .player-name-display,
html[data-device="phone"] .hud-coins,
html[data-device="phone"] .auto-shoot-toggle {
  padding: 1px 4px;
  border-color: rgb(255 220 160 / 0.28);
  background: rgb(20 16 12 / 0.22);
  box-shadow: none;
}

html[data-device="phone"] .player-name-display {
  max-width: 64px;
}

html[data-device="phone"] .arena.is-live .hud-timer {
  top: max(4px, env(safe-area-inset-top));
  right: max(4px, env(safe-area-inset-right));
  min-width: 0;
  gap: 0;
  padding: 2px 5px;
  border-color: rgb(232 190 120 / 0.22);
  background: rgb(12 10 16 / 0.28);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-device="phone"] .arena.is-live .hud-timer .timer {
  font-size: 0.82rem;
}

html[data-device="phone"] .arena.is-live .boss-eta {
  margin-top: 1px;
  padding: 0 4px;
  background: rgb(74 16 32 / 0.35);
}

html[data-device="phone"] .arena.is-live .hud-xp {
  top: 2px;
  width: min(420px, calc(100% - 16px));
  height: 8px;
  border-width: 1px;
  background: rgb(18 23 49 / 0.35);
  box-shadow: none;
}

html[data-device="phone"] .arena.is-live .hud-xp-level {
  font-size: 0.48rem;
}

html[data-device="phone"] .arena.is-live .hud-hearts {
  top: auto;
  right: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 42%;
  gap: 1px;
  padding: 2px 4px;
  border-color: rgb(232 190 120 / 0.2);
  background: rgb(12 10 16 / 0.28);
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
}

html[data-device="phone"] .arena.is-live .hud-hearts-row {
  gap: 2px;
}

html[data-device="phone"] .arena.is-live .hud-heart {
  width: 14px;
  height: 13px;
}

html[data-device="phone"] .arena.is-live .hud-hearts-value {
  font-size: 0.48rem;
}

html[data-device="phone"] .arena.is-live .hud-sound {
  right: max(6px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-device="phone"] .arena.is-live :is(.touch-action, .combat-slot, .auto-shoot-toggle, .sound-toggle, .settings-open-button) {
  border-color: rgb(255 215 160 / 0.4);
  background: rgb(16 10 14 / 0.22);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-device="phone"] .arena.is-live .touch-stick {
  border-color: rgb(255 215 160 / 0.35);
  background: rgb(20 12 8 / 0.18);
  box-shadow: none;
}

html[data-device="phone"] .arena.is-live .touch-stick-knob {
  opacity: 0.7;
}

html[data-device="phone"] .arena.is-live .touch-action {
  font-size: 0.55rem;
}

@media (max-width: 700px) {
  html[data-device="phone"] .arena.is-live .touch-hud {
    position: absolute;
    z-index: 30;
  }

  html[data-device="phone"] .arena.is-live .combat-loadout {
    top: 4px;
    gap: 3px;
  }

  html[data-device="phone"] .arena.is-live .combat-slot {
    width: 34px;
    height: 34px;
  }

  html[data-device="phone"] .arena.is-live .combat-slot-art {
    width: 28px;
    height: 28px;
  }
}

html[data-device="phone"] .arena.is-live .combat-loadout,
html[data-editing-controls] .combat-loadout {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;
}

html[data-device="phone"] .arena.is-live .combat-slot,
html[data-editing-controls] .combat-slot,
html[data-device="phone"] .touch-stick,
html[data-device="phone"] .touch-action,
html[data-editing-controls] .touch-stick,
html[data-editing-controls] .touch-action {
  position: absolute;
  pointer-events: auto;
}

html[data-device="phone"] .touch-actions,
html[data-editing-controls] .touch-actions {
  display: contents;
}

html[data-editing-controls] .touch-hud {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: block;
  pointer-events: none;
}

html[data-editing-controls] [data-control] {
  cursor: grab;
  touch-action: none;
  outline: 2px dashed #ffd7a0;
  outline-offset: 3px;
}

html[data-editing-controls] [data-control].is-selected {
  outline-color: #fff;
  box-shadow: 0 0 0 4px #ff8a2a;
}

.control-editor {
  position: absolute;
  z-index: 45;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 2px solid #6a3a18;
  border-radius: 14px;
  background: #24140ce6;
  color: #ffe7b0;
  pointer-events: auto;
}

.control-editor[hidden] {
  display: none;
}

.control-editor-title {
  margin: 0;
  flex: 1 1 160px;
  font-size: 0.78rem;
  font-weight: 800;
}

.control-editor-size {
  display: grid;
  grid-template-columns: auto minmax(90px, 180px);
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
}

.control-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.control-editor-actions button {
  min-height: 36px;
  padding: 6px 10px;
  border: 2px solid #6a3a18;
  border-radius: 10px;
  background: #3a2418;
  color: #ffe7b0;
  cursor: pointer;
  font-weight: 800;
}

#control-save {
  background: #8a3a12;
}

.account-gate {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 30%, #3a241888, #120c10ee 70%);
}

.account-gate[hidden] {
  display: none;
}

.account-panel,
.account-panel form,
.account-device-step {
  display: grid;
  gap: 10px;
}

.account-panel form[hidden],
.account-device-step[hidden] {
  display: none;
}

.account-panel {
  width: min(460px, 100%);
  padding: 22px 20px 18px;
  border: 3px solid #3a2414;
  border-radius: 16px;
  background:
    linear-gradient(#fff6d866, transparent 28%),
    linear-gradient(#f3e2c4, #c9a36a);
  box-shadow: 0 8px 0 #1a1008, 0 18px 40px #000a;
  color: #2a160c;
}

.account-kicker {
  margin: 0;
  color: #7a3412;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.account-panel h1 {
  margin: 0;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: 1.7rem;
  line-height: 1;
}

.account-lead {
  margin: 0;
  font-size: 0.92rem;
}

.account-modes,
.account-devices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#account-mode-email {
  grid-column: 1 / -1;
}

.account-mode,
.account-device,
.account-submit {
  border: 2px solid #6a3a18;
  border-radius: 10px;
  background: #2a160c;
  color: #ffe7b0;
  font-weight: 900;
  cursor: pointer;
}

.account-mode,
.account-submit {
  min-height: 42px;
}

.account-mode.is-active,
.account-device.is-active {
  background: #8a3a12;
  box-shadow: inset 0 0 0 2px #ffd7a0;
}

.account-field[hidden] {
  display: none;
}

.account-field {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
}

.account-field input {
  min-height: 40px;
  padding: 0 10px;
  border: 2px solid #6a3a18;
  border-radius: 8px;
  background: #fff8ea;
  color: #2a160c;
  font: inherit;
}

.account-device {
  display: grid;
  justify-items: center;
  min-height: 148px;
  padding: 14px 8px;
  text-align: center;
}

.account-device-icon {
  width: 64px;
  height: 64px;
  color: #ffe7b0;
}

.account-device.is-active .account-device-icon {
  color: #fff6d8;
}

.account-device span {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}

.account-device-label,
.account-feedback {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
}

.account-feedback:empty {
  display: none;
}

.account-feedback {
  color: #7a180c;
}

.touch-stick {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
  border: 2px solid #6a3a18;
  border-radius: 50%;
  background: radial-gradient(circle, #3a241888, #140c0888 70%);
  box-shadow: inset 0 0 0 8px #2a160c55, 0 4px 0 #0006;
  pointer-events: auto;
  touch-action: none;
}

.touch-stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 2px solid #ffd7a0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb15a, #8a3a12 70%);
  box-shadow: 0 3px 0 #2a1008;
}

.touch-actions {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  pointer-events: auto;
}

.touch-action {
  min-width: 64px;
  min-height: 64px;
  padding: 6px;
  border: 2px solid #6a3a18;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a3018, #24140c 72%);
  color: #ffe7b0;
  font-size: 0.68rem;
  font-weight: 900;
  touch-action: manipulation;
}

/* Maïs de la carte 2 : feuilles arrachées quand on traverse le champ. */
.corn-leaf {
  position: absolute;
  z-index: 4;
  width: 9px;
  height: 4px;
  border-radius: 80% 20% 80% 20%;
  background: linear-gradient(90deg, #6f9c34, #d7e27a);
  box-shadow: 0 0 0 1px #3d5a1c88;
  pointer-events: none;
  animation: corn-leaf-fly 0.9s ease-out forwards;
}

@keyframes corn-leaf-fly {
  0% { opacity: 0.95; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); }
}

/* Caméra à la 3e personne : le monde est un vrai plan 3D ; les personnages sont des « billboards » debout, face à l'écran.
   --bb-rot (rotation inverse de la caméra) est calculé par le script. Le pivot est l'ancre du sprite (origine 0 0) :
   l'échelle des acteurs passe par la propriété `scale` pour que l'ancre ne bouge pas. */
.arena.cam-tps .world {
  transform-style: preserve-3d;
}

.arena.cam-tps .world > :is(.player, .enemy) {
  --actor-scale: 1;
  scale: var(--actor-s, 0.72);
  transform-origin: 0 0;
  rotate: var(--bb-rot, none);
}

/* le voile de lumière en mix-blend-mode aplatit le contexte 3D et couche les personnages au sol : retiré en vue 3e personne */
html[data-look="toon"] .arena.cam-tps .world::after {
  display: none;
}

/* Vue à la 3e personne : tout ce qui a du volume reste debout face à la caméra, les marquages restent à plat au sol. */
.arena.cam-tps .world > :is(.dmg-num, .heal-num, .crit-num) {
  transform-origin: 50% 100%;
  rotate: var(--bb-rot, none);
}

.arena.cam-tps .world > .xp-gain-text {
  rotate: var(--bb-rot, none);
}

.arena.cam-tps .world > :is(.loot-pickup, .weapon-pickup) {
  transform-origin: 0 0;
  rotate: var(--bb-rot, none);
}

.arena.cam-tps .world > :is(.boss-projectile:not(.enemy-shot-arrow), .impact-burst) {
  rotate: var(--bb-rot, none);
}

.arena.cam-tps .world > .boss-projectile::before {
  display: none;
}

/* les tirs volent à hauteur de buste plutôt que collés au sol */
.arena.cam-tps .world > :is(.stone.shot, .boss-projectile.enemy-shot-arrow) {
  translate: 0 0 30px;
}

.arena.cam-tps .world > .boss-portal {
  transform-style: preserve-3d;
}

.arena.cam-tps .world > .boss-portal .portal-gate {
  rotate: var(--bb-rot, none);
}

/* le héros se tourne vraiment (de dos quand il avance) : plus de miroir gauche/droite */
.arena.cam-tps .player.is-facing-left .hero-real {
  scale: 1;
}

.cam-crosshair {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: none;
  width: 26px;
  height: 26px;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(0 0 0 / 0.35);
  pointer-events: none;
  translate: -50% -50%;
}

.cam-crosshair::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6);
  content: "";
  translate: -50% -50%;
}

.arena.cam-locked .cam-crosshair {
  display: block;
}

.arena.cam-locked {
  cursor: none;
}

/* Personnage posé dans la carte (vrai modèle 3D) : le canvas sert seulement de repère de taille, la barre de vie suit la tête. */
canvas.actor3d-canvas.in-world {
  visibility: hidden;
}

.arena.cam-tps .world > :is(.player, .enemy).is-world {
  translate: 0 0 var(--lift, 0px);
}

.arena.cam-tps .world > .player.is-world::before,
.arena.cam-tps .world > .enemy.is-world .enemy-shadow {
  display: none;
}

/* un filtre CSS aplatit le contexte 3D et dessinait un rectangle noir : le flash des personnages 3D est fait dans WebGL */
.enemy.is-world,
.player.is-world,
.enemy.is-world .rig {
  filter: none !important;
}

/* Mode 2D (par défaut) : cartes dessinées à plat en cartoon. Le mode 3D (?3d=1) garde les rendus en relief. */
html:not([data-look="toon"]) .arena { --map-image: url("./assets/map-1-2d.jpg?v=2"); }
html:not([data-look="toon"]) .arena[data-wave="2"] { --map-image: url("./assets/map-2-2d.jpg?v=2"); }
html:not([data-look="toon"]) .arena[data-wave="3"] { --map-image: url("./assets/map-3-2d.jpg?v=2"); }
html:not([data-look="toon"]) .arena[data-wave="4"] { --map-image: url("./assets/map-4-2d.jpg?v=2"); }
html:not([data-look="toon"]) .arena[data-wave="5"] { --map-image: url("./assets/map-5-2d.jpg?v=2"); }
html:not([data-look="toon"]) .arena-throne-room {
  --map-image:
    linear-gradient(180deg, rgb(13 10 20 / 9%), rgb(13 10 20 / 0%) 44%, rgb(13 10 20 / 16%)),
    url("./assets/map-throne-2d.jpg?v=2");
}

/* Ambiance Halloween : brouillard dérivant, rais de lune, chauves-souris, feux follets et éclairs lointains. */
.arena {
  --hw-fog-a: 150 120 210;
  --hw-fog-b: 110 190 150;
  --hw-moon: 170 190 255;
}

.arena[data-wave="2"] { --hw-fog-a: 225 150 95; --hw-fog-b: 150 110 200; --hw-moon: 255 200 150; }
.arena[data-wave="3"] { --hw-fog-a: 200 120 230; --hw-fog-b: 120 90 190; --hw-moon: 210 170 255; }
.arena[data-wave="4"] { --hw-fog-a: 130 150 235; --hw-fog-b: 190 120 220; --hw-moon: 170 200 255; }
.arena[data-wave="5"] { --hw-fog-a: 225 105 150; --hw-fog-b: 150 100 225; --hw-moon: 255 170 190; }
.arena-throne-room { --hw-fog-a: 175 100 235; --hw-fog-b: 90 205 130; --hw-moon: 200 150 255; }

.atmosphere > .halloween-fog {
  --fog-tile: 520px;
  inset: auto;
  left: calc(var(--fog-tile) * -1);
  top: 0;
  width: calc(100% + var(--fog-tile));
  height: 100%;
  z-index: 5;
  background: rgb(var(--hw-fog-a) / 0.46);
  -webkit-mask-image: url("./assets/fog-1.png");
  mask-image: url("./assets/fog-1.png");
  -webkit-mask-size: var(--fog-tile) var(--fog-tile);
  mask-size: var(--fog-tile) var(--fog-tile);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  will-change: transform;
  animation: hw-fog-slide-x 80s linear infinite;
}

.atmosphere > .halloween-fog-mid {
  --fog-tile: 400px;
  left: 0;
  top: calc(var(--fog-tile) * -1);
  width: 100%;
  height: calc(100% + var(--fog-tile));
  background: rgb(var(--hw-fog-b) / 0.36);
  -webkit-mask-image: url("./assets/fog-2.png");
  mask-image: url("./assets/fog-2.png");
  animation: hw-fog-slide-y 58s linear infinite;
}

.atmosphere > .halloween-fog-front {
  --fog-tile: 640px;
  left: calc(var(--fog-tile) * -1);
  top: calc(var(--fog-tile) * -1);
  width: calc(100% + var(--fog-tile));
  height: calc(100% + var(--fog-tile));
  z-index: 6;
  background: rgb(var(--hw-fog-a) / 0.28);
  -webkit-mask-image: url("./assets/fog-2.png");
  mask-image: url("./assets/fog-2.png");
  animation: hw-fog-slide-diag 46s linear infinite;
}

.atmosphere > .halloween-fog-ground {
  inset: auto 0 0 0;
  height: 42%;
  z-index: 5;
  background:
    radial-gradient(ellipse 60% 55% at 22% 100%, rgb(var(--hw-fog-a) / 0.34), transparent 70%),
    radial-gradient(ellipse 55% 50% at 78% 100%, rgb(var(--hw-fog-b) / 0.26), transparent 70%),
    linear-gradient(0deg, rgb(var(--hw-fog-a) / 0.2), transparent 75%);
  animation: hw-fog-breathe 11s ease-in-out infinite alternate;
}

.atmosphere > .halloween-moon {
  z-index: 5;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 55% 45% at 14% -8%, rgb(var(--hw-moon) / 0.26), transparent 70%),
    linear-gradient(112deg, transparent 18%, rgb(var(--hw-moon) / 0.1) 27%, transparent 36%),
    linear-gradient(112deg, transparent 38%, rgb(var(--hw-moon) / 0.07) 45%, transparent 53%),
    linear-gradient(112deg, transparent 60%, rgb(var(--hw-moon) / 0.06) 66%, transparent 73%);
  animation: hw-rays-sway 14s ease-in-out infinite alternate;
}

.atmosphere > .halloween-flash {
  z-index: 7;
  background: radial-gradient(ellipse at 30% 0%, rgb(235 225 255 / 0.55), rgb(150 110 255 / 0.2) 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hw-lightning 31s linear 9s infinite;
}

.atmosphere > .halloween-extras {
  z-index: 6;
  overflow: hidden;
}

.hw-bat {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--size);
  height: calc(var(--size) * 0.5);
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgb(190 110 255 / 0.65));
  animation: hw-bat-fly var(--dur) linear var(--delay) infinite;
}

.hw-bat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%2308040e' d='M32 9c2 0 3 2 4 4 3-4 9-9 17-9-3 3-4 6-4 9 4 0 8 2 11 7-5-2-8-1-11 1-1-3-3-4-6-4 1 3 0 6-3 8l-4 5-3-5c-3-2-4-5-3-8-3 0-5 1-6 4-3-2-6-3-11-1 3-5 7-7 11-7 0-3-1-6-4-9 8 0 14 5 17 9 1-2 2-4 4-4z'/%3E%3Ccircle cx='29.5' cy='12' r='1' fill='%23ff4040'/%3E%3Ccircle cx='34.5' cy='12' r='1' fill='%23ff4040'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 60%;
  animation: hw-bat-flap var(--flap) ease-in-out infinite alternate;
}

.hw-wisp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--wisp) / 0.95), rgb(var(--wisp) / 0.35) 45%, transparent 72%);
  box-shadow: 0 0 10px rgb(var(--wisp) / 0.7), 0 0 22px rgb(var(--wisp) / 0.35);
  animation: hw-wisp-float var(--dur) ease-in-out var(--delay) infinite alternate, hw-wisp-glow calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate;
}

@keyframes hw-fog-slide-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--fog-tile), 0, 0); }
}

@keyframes hw-fog-slide-y {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--fog-tile), 0); }
}

@keyframes hw-fog-slide-diag {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--fog-tile), var(--fog-tile), 0); }
}

@keyframes hw-fog-breathe {
  from { opacity: 0.55; transform: translate3d(-2%, 0, 0); }
  to { opacity: 1; transform: translate3d(2%, -3%, 0); }
}

@keyframes hw-rays-sway {
  from { opacity: 0.6; transform: translate3d(-2%, 0, 0); }
  to { opacity: 1; transform: translate3d(3%, 0, 0); }
}

@keyframes hw-lightning {
  0%, 94%, 100% { opacity: 0; }
  95% { opacity: 0.85; }
  96% { opacity: 0.1; }
  97% { opacity: 0.6; }
  99% { opacity: 0; }
}

@keyframes hw-bat-fly {
  0% { translate: -12vw 0; }
  25% { translate: 22vw calc(var(--sway) * -1); }
  50% { translate: 55vw var(--sway); }
  75% { translate: 85vw calc(var(--sway) * -0.6); }
  100% { translate: 118vw 0; }
}

@keyframes hw-bat-flap {
  from { transform: scaleY(1) rotate(-3deg); }
  to { transform: scaleY(0.45) rotate(3deg); }
}

@keyframes hw-wisp-float {
  from { translate: 0 0; }
  to { translate: var(--dx) var(--dy); }
}

@keyframes hw-wisp-glow {
  from { opacity: 0.35; scale: 0.8; }
  to { opacity: 1; scale: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere > .halloween-fog,
  .atmosphere > .halloween-fog-ground,
  .atmosphere > .halloween-moon,
  .atmosphere > .halloween-flash,
  .hw-wisp {
    animation: none;
  }

  .hw-bat,
  .atmosphere > .halloween-flash {
    display: none;
  }
}

/* ===== Ramassables cartoon (pièces, XP, soin) ===== */
.loot-pickup.loot-coin,
.loot-pickup.loot-health,
.loot-pickup.loot-xp {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent center / contain no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}
.loot-pickup.loot-coin { background-image: url("./assets/icons/coin.png?v=1"); filter: drop-shadow(0 2px 0 #1a0e08) drop-shadow(0 0 6px #ffd24acc); }
.loot-pickup.loot-health { width: 32px; height: 32px; background-image: url("./assets/icons/heal.png?v=1"); filter: drop-shadow(0 2px 0 #1a0e08) drop-shadow(0 0 7px #ff5a5acc); }
.loot-pickup.loot-xp { width: 24px; height: 24px; background-image: url("./assets/icons/xp.png?v=1"); filter: drop-shadow(0 2px 0 #08201a) drop-shadow(0 0 7px #3dffb0cc); }
.loot-pickup.loot-xp.is-large { width: 34px; height: 34px; }
.loot-pickup.loot-xp.is-magnet { filter: drop-shadow(0 0 9px #9dffd8) drop-shadow(0 0 3px #fff); }
.loot-pickup.loot-coin::before,
.loot-pickup.loot-coin::after,
.loot-pickup.loot-health::before,
.loot-pickup.loot-health::after,
.loot-pickup.loot-xp::before,
.loot-pickup.loot-xp::after { content: none; display: none; }
.collect-xp .collect-spark { background: #b8ffe4; box-shadow: 0 0 6px #3dffb0; }
.potion-icon-img { width: 1.4em; height: 1.4em; vertical-align: -0.3em; object-fit: contain; }

/* ===== Monde 2 : Le Cauchemar de Noël ===== */
.restart-button-world {
  border-color: #cfeeff;
  background: linear-gradient(#e24a4a, #8a1620);
  box-shadow: 0 4px 0 #2a0a10, 0 0 18px #6fd0ff99;
  color: #fff;
}
.restart-button-world:hover { background: linear-gradient(#ff6a6a, #a82230); }
.restart-button[hidden] { display: none; }

/* Cartes du monde 2 */
html:not([data-look="toon"]) .arena[data-wave="w2-1"] { --map-image: url("./assets/map-w2-1-2d.jpg?v=1"); }
html:not([data-look="toon"]) .arena[data-wave="w2-2"] { --map-image: url("./assets/map-w2-2-2d.jpg?v=1"); }
html:not([data-look="toon"]) .arena[data-wave="w2-3"] { --map-image: url("./assets/map-w2-3-2d.jpg?v=1"); }
html:not([data-look="toon"]) .arena[data-wave="w2-4"] { --map-image: url("./assets/map-w2-4-2d.jpg?v=1"); }
html:not([data-look="toon"]) .arena[data-wave="w2-5"] { --map-image: url("./assets/map-w2-5-2d.jpg?v=1"); }

/* Brouillard et lune : bleu glacé, rouge pour le manoir et l'usine. */
.arena[data-wave="w2-1"] { --hw-fog-a: 190 205 255; --hw-fog-b: 255 150 120; --hw-moon: 210 225 255; }
.arena[data-wave="w2-2"] { --hw-fog-a: 150 220 255; --hw-fog-b: 200 170 255; --hw-moon: 200 240 255; }
.arena[data-wave="w2-3"] { --hw-fog-a: 120 230 190; --hw-fog-b: 160 200 255; --hw-moon: 190 255 220; }
.arena[data-wave="w2-4"] { --hw-fog-a: 255 120 190; --hw-fog-b: 190 110 255; --hw-moon: 255 180 220; }
.arena[data-wave="w2-5"] { --hw-fog-a: 255 90 100; --hw-fog-b: 120 150 255; --hw-moon: 255 140 150; }

/* Neige qui tombe à la place des feuilles. */
.arena[data-world="2"] .atmosphere-particle {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 35%, #dff1ff 60%, rgb(200 230 255 / 0) 72%);
  box-shadow: 0 0 6px #cfeaffcc;
  opacity: 0.9;
}
.arena[data-world="2"] .atmosphere-particle:nth-child(3n) { background: radial-gradient(circle at 40% 35%, #fff 0 30%, #bfe4ff 62%, rgb(190 225 255 / 0) 72%); }
.arena[data-world="2"] .atmosphere-particle:nth-child(4n) { width: calc(var(--size) * 0.6); height: calc(var(--size) * 0.6); }
.arena[data-world="2"] .hw-bat { display: none; }
.arena[data-world="2"] .hw-wisp { --wisp: 190 230 255 !important; }
.arena[data-world="2"] .hw-wisp:nth-child(3n) { --wisp: 255 120 120 !important; }

/* Apparition des boss du monde 2. */
.boss-spawn-fx-snow { --fx-color: #e8f4ff; --fx-glow: rgb(130 200 255 / 0.55); }
.boss-spawn-fx-ice { --fx-color: #9fe3ff; --fx-glow: rgb(120 210 255 / 0.55); }
.boss-spawn-fx-gift { --fx-color: #6dff9a; --fx-glow: rgb(80 255 150 / 0.5); }
.boss-spawn-fx-candy { --fx-color: #ff7ab8; --fx-glow: rgb(255 120 190 / 0.5); }
.boss-spawn-fx-mansion { --fx-color: #ff4040; --fx-glow: rgb(255 60 60 / 0.55); }
.enemy-realistic.boss-spawning.boss-spawn-snow .enemy-boss-art,
.enemy-realistic.boss-spawning.boss-spawn-candy .enemy-boss-art { animation: boss-spawn-scarecrow 1.6s cubic-bezier(0.25, 0.9, 0.3, 1.1) both; }
.enemy-realistic.boss-spawning.boss-spawn-ice .enemy-boss-art,
.enemy-realistic.boss-spawning.boss-spawn-mansion .enemy-boss-art { animation: boss-spawn-throne 1.6s ease-out both; }
.enemy-realistic.boss-spawning.boss-spawn-gift .enemy-boss-art { animation: boss-spawn-stage 1.6s cubic-bezier(0.35, 0.1, 0.4, 1) both; }

/* Lueurs des boss et sbires du monde 2. */
.enemy-boss-pere-noel-tordu .enemy-boss-art { filter: drop-shadow(0 3px 0 #1a0a0a) drop-shadow(0 0 8px #ff4a4acc); }
.enemy-boss-mere-froide .enemy-boss-art { filter: drop-shadow(0 3px 0 #0a1a2a) drop-shadow(0 0 10px #8fe0ffcc); }
.enemy-boss-grinch-demoniaque .enemy-boss-art { filter: drop-shadow(0 3px 0 #0a1a0a) drop-shadow(0 0 8px #5aff7acc); }
.enemy-boss-homme-pain-epices .enemy-boss-art { filter: drop-shadow(0 3px 0 #2a1408) drop-shadow(0 0 8px #ff9a4acc); }
.enemy-boss-maitre-cadeaux-noirs .enemy-boss-art { width: 140%; height: 140%; filter: drop-shadow(0 4px 0 #0a0510) drop-shadow(0 0 12px #ff3a4acc); }
.enemy-minion-art-lutin-possede, .enemy-minion-art-lutin-voleur, .enemy-minion-art-lutin-kamikaze { filter: drop-shadow(0 2px 0 #140a0a) drop-shadow(0 0 4px #ff5a5a88); }
.enemy-minion-art-renne-squelette, .enemy-minion-art-bonhomme-neige, .enemy-minion-art-chien-neiges, .enemy-minion-art-loup-noel { filter: drop-shadow(0 2px 0 #0a1020) drop-shadow(0 0 4px #9fdcff88); }
.enemy-minion-art-flocon-vivant, .enemy-minion-art-esprit-gele, .enemy-minion-art-gardien-glace { filter: drop-shadow(0 2px 0 #0a1a2a) drop-shadow(0 0 6px #8fe8ffcc); }
.enemy-minion-art-bonhomme-pain-epices, .enemy-minion-art-sucette-vivante, .enemy-minion-art-ours-sucre { filter: drop-shadow(0 2px 0 #2a1008) drop-shadow(0 0 4px #ff8ac888); }
.enemy-minion-art-ombre-noel, .enemy-minion-art-cadeau-maudit { filter: drop-shadow(0 2px 0 #100510) drop-shadow(0 0 5px #ff3a4a99); }

/* Tirs des boss et sbires du monde 2. */
.enemy-aim-ice, .enemy-charge-ice, .enemy-muzzle-ice, .enemy-impact-ice { --shot-color: #e6f8ff; --shot-glow: #5ac8ff; }
.enemy-aim-candy, .enemy-charge-candy, .enemy-muzzle-candy, .enemy-impact-candy { --shot-color: #ffe0ee; --shot-glow: #ff4f9a; }
.enemy-aim-gift, .enemy-charge-gift, .enemy-muzzle-gift, .enemy-impact-gift { --shot-color: #ffd0d0; --shot-glow: #ff2a3a; }
.boss-projectile.enemy-shot-ice {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, #fff 0 14%, #d6f4ff 30%, #52c4ff 56%, #1a6fb0 72%, transparent 76%);
  box-shadow: 0 0 14px #7fd8ff, 0 0 28px #3a9cf0aa;
  animation: enemy-orb-pulse 0.22s ease-in-out infinite alternate;
}
.boss-projectile.enemy-shot-candy {
  width: 20px; height: 20px; border-radius: 50%;
  background: repeating-conic-gradient(#ff3b7a 0 30deg, #fff 30deg 60deg);
  border: 2px solid #5a0e2a;
  box-shadow: 0 0 10px #ff6aa8;
  animation: enemy-orb-pulse 0.2s ease-in-out infinite alternate;
}
.boss-projectile.enemy-shot-gift {
  width: 24px; height: 24px; border-radius: 4px;
  background: linear-gradient(90deg, transparent 0 40%, #ff2a3a 40% 60%, transparent 60%), linear-gradient(0deg, transparent 0 40%, #ff2a3a 40% 60%, transparent 60%), #1a1020;
  border: 2px solid #ff4a5a;
  box-shadow: 0 0 14px #ff2a3a, 0 0 28px #8a0a1aaa;
  animation: enemy-orb-pulse 0.18s ease-in-out infinite alternate;
}

/* ===== Caisses « Noël cauchemar » ===== */
.crate-style-noel {
  --crate-lid: repeating-linear-gradient(90deg, #b3202a 0 14px, #f5efe6 14px 28px);
  --crate-body: linear-gradient(90deg, #1f5a35 0 44%, #c9a227 44% 56%, #1f5a35 56%);
  --crate-trim: #e8c24a;
  --crate-badge: radial-gradient(circle, #b3202a, #4a0d12);
  --crate-glow: rgb(120 220 255 / 0.6);
}

.crate-style-noel-royale {
  --crate-lid: conic-gradient(from 45deg, #1a1030, #8fe9ff, #b3202a, #e8c24a, #1a1030);
  --crate-body: linear-gradient(180deg, #151a3a, #07091c);
  --crate-trim: #8fe9ff;
  --crate-badge: radial-gradient(circle, #e8c24a, #5a1018);
  --crate-glow: rgb(143 233 255 / 0.8);
}

.crate-card-noel .crate-preview,
.crate-card-noel-royale .crate-preview {
  background: radial-gradient(circle at 50% 30%, rgb(143 233 255 / 0.28), transparent 70%);
}

/* ===== Bulle du boss à l'apparition ===== */
.boss-bubble {
  position: absolute;
  z-index: 8;
  translate: -50% -100%;
  padding: 4px 8px 5px;
  border: 3px solid #1a0610;
  border-radius: 14px 14px 14px 4px;
  background: #fff6ea;
  box-shadow: 0 3px 0 #1a0610, 0 0 12px #ff6a0044;
  color: #1a0610;
  font-family: Creepster, "Arial Black", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: boss-bubble-pop 2.4s ease-out forwards;
}

.boss-bubble::after {
  position: absolute;
  bottom: -8px;
  left: 18px;
  width: 12px;
  height: 12px;
  border-right: 3px solid #1a0610;
  border-bottom: 3px solid #1a0610;
  background: #fff6ea;
  content: "";
  rotate: 45deg;
}

.boss-bubble-scream {
  border-color: #6b0d16;
  background: #ffe4dc;
  color: #6b0d16;
  box-shadow: 0 3px 0 #6b0d16, 0 0 14px #ff2a1866;
}

.boss-bubble-scream::after {
  border-color: #6b0d16;
  background: #ffe4dc;
}

.boss-bubble-laugh {
  border-radius: 16px;
  rotate: -6deg;
}

.arena[data-world="2"] .boss-bubble {
  border-color: #12324a;
  background: #f3fbff;
  color: #12324a;
  box-shadow: 0 3px 0 #12324a, 0 0 14px #8fe9ff66;
}

.arena[data-world="2"] .boss-bubble::after {
  border-color: #12324a;
  background: #f3fbff;
}

@keyframes boss-bubble-pop {
  0% { opacity: 0; scale: 0.35; }
  14% { opacity: 1; scale: 1.08; }
  24% { scale: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; scale: 0.9; }
}

/* ===== Récompenses : niveaux de roue ===== */
.reward-node.is-wheel {
  border-color: #8fe9ff;
  box-shadow: 0 0 14px rgb(143 233 255 / 0.45);
}

/* ===== Roue exclusive (niveau 250 et plus) ===== */
.wheel-overlay {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgb(20 40 80 / 0.82), rgb(3 4 12 / 0.95));
  animation: crate-fade 0.25s ease-out;
}

.wheel-overlay[hidden] {
  display: none;
}

.wheel-panel {
  width: min(560px, 94vw);
  box-sizing: border-box;
  padding: 18px 22px 20px;
  border: 2px solid #e8c24a;
  border-radius: 18px;
  background: linear-gradient(160deg, #1b2a48, #0b1020);
  box-shadow: 0 0 46px rgb(143 233 255 / 0.4), 0 20px 50px rgb(0 0 0 / 0.65);
  color: #fff6e6;
  text-align: center;
}

.wheel-kicker {
  margin: 0;
  color: #8fe9ff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.wheel-title {
  margin: 4px 0 2px;
  color: #ffd86b;
  font-size: 1.6rem;
}

.wheel-sub {
  margin: 0 0 8px;
  color: #cfe3ff;
  font-size: 0.92rem;
}

.wheel-stage {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  margin: 6px auto 12px;
}

.wheel-disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 6px solid #e8c24a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #5a1018, 0 0 34px rgb(255 216 107 / 0.45), inset 0 0 40px rgb(0 0 0 / 0.5);
  will-change: transform;
}

.wheel-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a));
}

.wheel-slot span {
  position: absolute;
  top: calc(min(360px, 78vw) * -0.42);
  left: -34px;
  display: grid;
  width: 68px;
  justify-items: center;
  gap: 1px;
  text-shadow: 0 2px 3px #000;
}

.wheel-slot b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
}

.wheel-slot b img {
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #000);
  transform: rotate(0deg);
}

.wheel-slot i {
  color: #fff;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
}

.wheel-slot-weapon i {
  color: #ffd86b;
}

.wheel-pointer {
  position: absolute;
  z-index: 3;
  top: -14px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 30px solid #ff4a4a;
  filter: drop-shadow(0 3px 2px #000);
  transform: translateX(-50%);
}

.wheel-hub {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 4px solid #e8c24a;
  border-radius: 50%;
  background: radial-gradient(circle, #b3202a, #4a0d12);
  box-shadow: 0 0 14px rgb(0 0 0 / 0.6);
  font-size: 1.7rem;
  transform: translate(-50%, -50%);
}

.wheel-result {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgb(255 216 107 / 0.6);
  border-radius: 10px;
  background: rgb(255 216 107 / 0.1);
}

.wheel-result[hidden] {
  display: none;
}

.wheel-result-name {
  color: #ffd86b;
  font-size: 1.25rem;
}

.wheel-result-note {
  color: #dff1ff;
  font-size: 0.9rem;
}

.wheel-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wheel-spin {
  min-width: 220px;
  font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
  .boss-bubble {
    animation: none;
    opacity: 1;
  }
}

/* ===== Portails embellis : plus grands, halo lumineux, ondes au sol, orbes et thème de Noël ===== */
.boss-portal {
  --portal-zoom: 1.45;
}

.portal-ground {
  transform: scale(calc(var(--world-scale, 1) * var(--portal-zoom)));
}

.portal-gate {
  transform: scale(calc(var(--world-scale, 1) * var(--portal-zoom)));
}

/* ondes d'énergie qui s'étalent depuis le pied du portail */
.portal-ground::before,
.portal-ground::after {
  position: absolute;
  inset: 24px;
  border: 2px solid color-mix(in srgb, var(--pa) 80%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--pb), inset 0 0 14px var(--pb);
  content: "";
  opacity: 0;
  animation: portal-ripple 2.8s ease-out infinite;
}

.portal-ground::after {
  animation-delay: 1.4s;
}

/* colonne de lumière qui monte au-dessus de l'arche */
.portal-gate::after {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 90px;
  height: 200px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--pb) 75%, transparent), color-mix(in srgb, var(--pb) 28%, transparent) 45%, transparent);
  content: "";
  filter: blur(5px);
  mask: linear-gradient(90deg, transparent, #000 35% 65%, transparent);
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
  translate: -50% 0;
  animation: portal-beam 2.2s ease-in-out infinite alternate;
}

.portal-vortex {
  box-shadow: inset 0 0 22px var(--pb), inset 0 0 6px var(--pa), inset 0 -10px 16px #0009;
}

.portal-arch {
  filter: drop-shadow(0 0 7px var(--pb)) drop-shadow(0 0 16px color-mix(in srgb, var(--pb) 60%, transparent));
}

/* orbes lumineux en orbite autour de la porte */
.portal-orbit {
  position: absolute;
  inset: -8px -20px;
  pointer-events: none;
  animation: portal-orbit-angle 5.5s linear infinite;
}

.portal-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, var(--pa) 55%, var(--pb));
  box-shadow: 0 0 8px 3px var(--pb);
  translate: calc(cos(var(--oa) + var(--i) * 120deg) * 82px - 50%) calc(sin(var(--oa) + var(--i) * 120deg) * 26px - 50% - 4px);
  animation: portal-orb-pulse 1.1s ease-in-out calc(var(--i) * -0.35s) infinite alternate;
}

.portal-caption {
  top: -44px;
  padding: 4px 14px;
  border-width: 2px;
  background: linear-gradient(180deg, rgb(26 18 40 / 0.92), rgb(8 6 14 / 0.92));
  font-size: 0.62rem;
  animation: portal-caption-float 2s ease-in-out infinite alternate;
}

/* Monde 2 : portail de glace et de givre, avec des cristaux et un flocon pour clé de voûte */
.arena[data-world="2"] .boss-portal-next-wave {
  --pa: #f2fbff;
  --pb: #6fd2ff;
  --pc: #12407a;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-runes {
  border-color: color-mix(in srgb, #ff5d6c 70%, transparent);
  box-shadow: 0 0 12px #ff5d6c, inset 0 0 12px var(--pb);
}

.arena[data-world="2"] .boss-portal-next-wave .portal-orb:nth-child(2) {
  background: radial-gradient(circle, #fff 0 30%, #ffd0d4 55%, #ff5d6c);
  box-shadow: 0 0 8px 3px #ff5d6c;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-orb:nth-child(3) {
  background: radial-gradient(circle, #fff 0 30%, #d2ffd8 55%, #3fd96a);
  box-shadow: 0 0 8px 3px #3fd96a;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-arch {
  background:
    radial-gradient(circle at 20% 70%, #ffffffd0 0 3px, transparent 4px),
    radial-gradient(circle at 82% 30%, #ffffffc0 0 2px, transparent 3px),
    radial-gradient(ellipse 62% 56% at 50% 56%, color-mix(in srgb, var(--pb) 55%, transparent), transparent 74%),
    linear-gradient(90deg, rgb(10 30 60 / 0.5), transparent 28% 72%, rgb(10 30 60 / 0.55)),
    repeating-conic-gradient(from -90deg at 50% 100%, rgb(20 50 90 / 0.6) 0 1.4deg, transparent 1.4deg 15deg) top / 100% 38% no-repeat border-box,
    repeating-linear-gradient(135deg, #ffffff 0 7px, #e5384f 7px 14px) bottom / 100% 62% no-repeat border-box,
    linear-gradient(180deg, #f2fbff, #a9d6f2 46%, #5d86ad);
  background-origin: border-box;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-arch::after {
  background: linear-gradient(180deg, #ffffff, #8cc9ee);
  content: "❄";
  color: #2a6fa8;
  text-shadow: 0 0 6px #fff, 0 0 10px var(--pb);
}

.arena[data-world="2"] .boss-portal-next-wave .portal-plinth {
  background: linear-gradient(180deg, #ffffff, #8fb8d6);
}

.arena[data-world="2"] .boss-portal-next-wave .portal-spark {
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 6px 2px var(--pb);
}

@keyframes portal-ripple {
  0% { opacity: 0.9; scale: 0.35; }
  100% { opacity: 0; scale: 1.15; }
}

@keyframes portal-beam {
  from { opacity: 0.45; scale: 0.9 1; }
  to { opacity: 0.85; scale: 1.1 1.08; }
}

@property --oa {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes portal-orbit-angle {
  from { --oa: 0deg; }
  to { --oa: 360deg; }
}

@keyframes portal-orb-pulse {
  from { scale: 0.7; opacity: 0.7; }
  to { scale: 1.2; opacity: 1; }
}

@keyframes portal-caption-float {
  from { translate: -50% 0; }
  to { translate: -50% -4px; }
}

/* Packs royaux (5 000 pièces et plus) et longues listes */
.pack-items.is-long {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.pack-card.pack-royal {
  box-shadow: 0 0 0 2px #ffd54a, 0 0 28px rgba(255, 213, 74, 0.45), 0 12px 30px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(160deg, rgba(255, 213, 74, 0.16), transparent 55%);
}

.pack-card.pack-royal .store-price strong {
  color: #ffd54a;
  font-size: 1.35em;
  text-shadow: 0 0 12px rgba(255, 213, 74, 0.7);
}

/* ===== Portails version dessin animé : gros contours, couleurs vives, étoiles et petits rebonds ===== */
.boss-portal {
  --po: #1b1030;
  --st1: #d9d0f2;
  --st2: #8f83bb;
  --pa: #effff6;
  --pb: #3df0a4;
  --pc: #0d7c63;
  --portal-zoom: 1.5;
}

.boss-portal-throne {
  --pa: #fff2ff;
  --pb: #d070ff;
  --pc: #5a1d9a;
  --st1: #ecd2ff;
  --st2: #a06bd9;
}

.arena[data-world="2"] .boss-portal-next-wave {
  --pa: #ffffff;
  --pb: #7fdcff;
  --pc: #2a78c8;
  --st1: #ffffff;
  --st2: #9fcdee;
}

.portal-ground {
  background: radial-gradient(circle, color-mix(in srgb, var(--pb) 30%, transparent) 0 58%, transparent 59%);
}

.portal-ground::before,
.portal-ground::after {
  inset: 22px;
  border: 4px solid var(--pa);
  box-shadow: 0 0 0 3px var(--po), inset 0 0 0 3px var(--po);
}

/* cercle magique : anneau de bonbons qui tourne */
.portal-runes {
  inset: 24px;
  border: 0;
  background:
    radial-gradient(circle, transparent 0 77%, var(--po) 77% 80.5%, transparent 81% 96%, var(--po) 96.5%),
    repeating-conic-gradient(var(--pa) 0 11.25deg, var(--pb) 11.25deg 22.5deg);
  box-shadow: none;
  mask: radial-gradient(circle, transparent 0 77%, #000 77.5% 100%);
}

.portal-runes-inner {
  inset: 54px;
  border: 4px dashed color-mix(in srgb, var(--pa) 90%, transparent);
  background: none;
  mask: none;
  opacity: 0.9;
}

.portal-gate {
  animation: portal-gate-rise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) both, portal-hop 2.6s ease-in-out 0.9s infinite;
}

.portal-gate::before {
  filter: none;
  background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--pb) 45%, transparent) 0 58%, transparent 60%);
}

/* rayons de soleil qui tournent derrière la porte */
.portal-gate::after {
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--pa) 60%, transparent) 0 7deg, transparent 7deg 22.5deg);
  filter: none;
  mask: radial-gradient(circle, #000 0 28%, transparent 68%);
  mix-blend-mode: normal;
  opacity: 0.65;
  translate: -50% -50%;
  animation: portal-sunburst 14s linear infinite;
}

.portal-vortex {
  inset: 20px 18px 10px;
  background: radial-gradient(ellipse at 50% 57%, #fff 0 9%, var(--pa) 10% 19%, var(--pb) 20% 38%, color-mix(in srgb, var(--pb) 55%, var(--pc)) 39% 54%, var(--pc) 55% 76%, #1a0b33 77%);
  box-shadow: inset 0 0 0 4px var(--po), inset 0 -8px 0 rgb(0 0 0 / 0.22);
}

.portal-depth {
  background: radial-gradient(ellipse 24% 18% at 50% 57%, #1a0b33 0 72%, transparent 74%);
}

.portal-depth::after {
  background: repeating-radial-gradient(
    ellipse 100% 86% at 50% 57%,
    transparent var(--portal-ring),
    rgb(255 255 255 / 0.5) var(--portal-ring),
    rgb(255 255 255 / 0.5) calc(var(--portal-ring) + 4px),
    transparent calc(var(--portal-ring) + 4px),
    transparent calc(var(--portal-ring) + 14px)
  );
}

.portal-swirl {
  background: repeating-conic-gradient(from 0deg at 50% 52%, transparent 0 20deg, rgb(255 255 255 / 0.78) 20deg 29deg, transparent 29deg 60deg);
  mask: radial-gradient(circle at 50% 52%, transparent 0 9%, #000 16% 44%, transparent 62%);
  filter: none;
  mix-blend-mode: normal;
  opacity: 0.85;
}

.portal-swirl-reverse {
  background: repeating-conic-gradient(from 10deg at 50% 52%, transparent 0 40deg, color-mix(in srgb, var(--pa) 75%, transparent) 40deg 52deg, transparent 52deg 90deg);
  opacity: 0.6;
}

.portal-core {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, #fff 0 44%, #ffe65c 46% 70%, transparent 72%);
  filter: none;
  opacity: 1;
  animation: portal-core-bounce 1s ease-in-out infinite alternate;
}

/* arche en grosses pierres dessinées, avec un contour épais */
.portal-arch {
  border-width: 20px 18px 10px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 3px, transparent 3px) border-box,
    linear-gradient(90deg, rgb(40 20 80 / 0.28), transparent 26% 74%, rgb(40 20 80 / 0.32)),
    repeating-conic-gradient(from -90deg at 50% 100%, var(--po) 0 2.4deg, transparent 2.4deg 16deg) top / 100% 38% no-repeat border-box,
    repeating-linear-gradient(180deg, transparent 0 17px, var(--po) 17px 19.5px) bottom / 100% 62% no-repeat border-box,
    linear-gradient(180deg, var(--st1), var(--st2));
  background-origin: border-box;
  filter: drop-shadow(3px 0 0 var(--po)) drop-shadow(-3px 0 0 var(--po)) drop-shadow(0 3px 0 var(--po)) drop-shadow(0 -3px 0 var(--po));
}

/* gemme de clé de voûte */
.portal-arch::after {
  top: -20px;
  width: 22px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, var(--pa) 17% 32%, var(--pb) 33%);
  clip-path: none;
  content: "";
  text-shadow: none;
}

.portal-plinth {
  bottom: -6px;
  width: 30px;
  height: 16px;
  border: 3px solid var(--po);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--st1), var(--st2));
  box-shadow: 0 3px 0 var(--po);
}

.portal-spark {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--po);
  rotate: 45deg;
}

/* étoiles qui tournent autour du portail */
.portal-orb {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  background: none;
  box-shadow: none;
  color: #ffe45e;
  font-size: 22px;
  line-height: 1;
  text-shadow: 2px 0 var(--po), -2px 0 var(--po), 0 2px var(--po), 0 -2px var(--po), 2px 2px var(--po), -2px -2px var(--po), 2px -2px var(--po), -2px 2px var(--po);
}

.portal-orb::before {
  content: "★";
}

.portal-orb:nth-child(2) { color: #ff7bb3; }
.portal-orb:nth-child(3) { color: #62e2ff; }

.arena[data-world="2"] .boss-portal-next-wave .portal-orb:nth-child(1) {
  background: none;
  box-shadow: none;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-orb:nth-child(2) {
  background: none;
  box-shadow: none;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-orb:nth-child(3) {
  background: none;
  box-shadow: none;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-runes {
  border: 0;
  box-shadow: none;
  background:
    radial-gradient(circle, transparent 0 77%, var(--po) 77% 80.5%, transparent 81% 96%, var(--po) 96.5%),
    repeating-conic-gradient(#ffffff 0 11.25deg, #ff5d6c 11.25deg 22.5deg);
}

.arena[data-world="2"] .boss-portal-next-wave .portal-arch {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.55) 0 3px, transparent 3px) border-box,
    linear-gradient(90deg, rgb(10 30 60 / 0.25), transparent 26% 74%, rgb(10 30 60 / 0.3)),
    repeating-conic-gradient(from -90deg at 50% 100%, var(--po) 0 2.4deg, transparent 2.4deg 16deg) top / 100% 38% no-repeat border-box,
    repeating-linear-gradient(135deg, #ffffff 0 7px, #e5384f 7px 14px) bottom / 100% 62% no-repeat border-box,
    linear-gradient(180deg, #ffffff, #a9d6f2 60%, #6a9cc8);
  background-origin: border-box;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-arch::after {
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, #bfe8ff 21% 50%, #6fd2ff 51%);
  text-shadow: none;
}

.arena[data-world="2"] .boss-portal-next-wave .portal-plinth {
  background: linear-gradient(180deg, #ffffff, #9fcdee);
}

.arena[data-world="2"] .boss-portal-next-wave .portal-spark {
  width: 9px;
  height: 9px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--po);
}

/* étiquette autocollant */
.portal-caption {
  top: -52px;
  padding: 5px 14px;
  border: 3px solid var(--po);
  background: linear-gradient(180deg, #fff, var(--pa) 40%, var(--pb));
  box-shadow: 0 4px 0 var(--po);
  color: var(--po);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-shadow: none;
}

@keyframes portal-hop {
  0%, 100% { rotate: -1.2deg; translate: 0 0; }
  50% { rotate: 1.2deg; translate: 0 -3px; }
}

@keyframes portal-sunburst {
  to { rotate: 360deg; }
}

@keyframes portal-core-bounce {
  from { scale: 0.88; }
  to { scale: 1.18; }
}

.restart-button-world[hidden] {
  display: none !important;
}

/* ===== Menu d'accueil : nuit d'horreur cartoon ===== */
.front-menu[data-screen="home"] .menu-panel {
  border-color: #1a0610;
  background:
    radial-gradient(ellipse at 50% 0, #ff3b1f33 0, transparent 42%),
    radial-gradient(ellipse at 0 80%, #39ff6a14 0, transparent 36%),
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #2a1038 0, #160818 48%, #09040e 100%);
  box-shadow:
    0 0 0 3px #ff7a1a55,
    0 8px 0 #07030a,
    0 18px 40px #000e,
    inset 0 0 40px #4a082866;
}

.front-menu[data-screen="home"] .sio-profile {
  border-color: #2a0a14;
  background:
    linear-gradient(180deg, #ffffff14, transparent 28%),
    linear-gradient(180deg, #4a1848, #220816);
  box-shadow: 0 4px 0 #12040a, inset 0 0 16px #ff4d1a22;
}

.front-menu[data-screen="home"] .sio-avatar {
  border-color: #2a0a14;
  background:
    radial-gradient(circle at 50% 42%, #ffd27a 0 18%, transparent 19%),
    radial-gradient(circle at 50% 62%, #1a0808 0 28%, transparent 29%),
    radial-gradient(circle at 50% 38%, #ffb35c, #c2410c 68%, #4a1208);
  box-shadow: 0 0 14px #ff6a0088, 0 3px 0 #2a0a14;
}

.front-menu[data-screen="home"] .sio-level-badge {
  background: linear-gradient(#ffe14a, #ff6a00);
  box-shadow: 0 0 10px #ff6a00aa, 0 2px 0 #2a0a14;
}

.front-menu[data-screen="home"] .sio-profile .player-name-field input,
.front-menu[data-screen="home"] .sio-currency {
  border-color: #3a1020;
  background: #14060f;
}

.front-menu[data-screen="home"] .sio-xp-fill {
  background:
    linear-gradient(#ffffff55, transparent 55%),
    linear-gradient(90deg, #7a1028, #ff3b1f 55%, #ffb347);
}

.front-menu[data-screen="home"] .sio-chapter {
  border-color: #1a0610;
  box-shadow:
    0 0 0 2px #ff7a1a44,
    0 6px 0 #07030a,
    0 0 28px #ff2a0055,
    inset 0 0 30px #0008;
}

.front-menu[data-screen="home"] .sio-scene {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #ffe 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 46%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 78% 18%, #ff2a1844 0, transparent 28%),
    linear-gradient(180deg, #07010c 0, #1a0630 38%, #4a1028 68%, #8a1c12 100%);
}

.front-menu[data-screen="home"] .sio-moon {
  background:
    radial-gradient(circle at 34% 38%, #5a1020 0 8%, transparent 9%),
    radial-gradient(circle at 62% 58%, #5a1020 0 11%, transparent 12%),
    radial-gradient(circle at 40% 40%, #ffd0c2, #ff5a3c 58%, #c41616);
  box-shadow: 0 0 28px #ff2a18cc, 0 0 70px #8a001866;
}

.front-menu[data-screen="home"] .sio-chapter-kicker {
  background: linear-gradient(#ff5a2a, #8a1020);
  color: #fff8ee;
  letter-spacing: 0.16em;
}

.front-menu[data-screen="home"] .sio-chapter-title {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff4e4;
  text-shadow:
    -3px -3px 0 #1a0610, 3px -3px 0 #1a0610, -3px 3px 0 #1a0610, 3px 3px 0 #1a0610,
    0 6px 0 #6b0d16, 0 10px 16px #ff2a1866;
}

.front-menu[data-screen="home"] .sio-chapter-sub {
  color: #ffd0b0;
}

.front-menu[data-screen="home"] .sio-fog {
  height: 46%;
  background:
    radial-gradient(ellipse at 18% 70%, #9dffb233 0, transparent 46%),
    radial-gradient(ellipse at 55% 50%, #d8c8ff2e 0, transparent 42%),
    radial-gradient(ellipse at 88% 74%, #ff6a3c22 0, transparent 40%);
}

.sio-flash {
  position: absolute;
  inset: 0;
  background: #f4f0ff;
  opacity: 0;
  pointer-events: none;
  animation: sio-lightning 7.5s linear infinite;
}

.sio-eyes {
  position: absolute;
  bottom: 28%;
  width: 16px;
  height: 6px;
  background:
    radial-gradient(circle at 3px 50%, #b6ff3a 0 2px, transparent 3px),
    radial-gradient(circle at 13px 50%, #b6ff3a 0 2px, transparent 3px);
  filter: drop-shadow(0 0 4px #7dff2a);
  opacity: 0;
  animation: sio-eyes-blink 4.2s ease-in-out infinite;
}

.sio-eyes-1 { left: 38%; }
.sio-eyes-2 { right: 30%; bottom: 34%; animation-delay: -2.1s; }

.sio-candle {
  position: absolute;
  bottom: 16%;
  width: 8px;
  height: 16px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(#f3e2c4, #c9a06a);
  box-shadow: 0 0 10px #ffb34788;
}

.sio-candle::before {
  position: absolute;
  top: -8px;
  left: 1px;
  width: 6px;
  height: 8px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c8, #ffb347 40%, #ff4d00 72%, transparent 74%);
  content: "";
  animation: sio-flame 0.35s ease-in-out infinite alternate;
}

.sio-candle-a { left: 20%; }
.sio-candle-b { right: 18%; bottom: 12%; animation-delay: -0.2s; }

.front-menu[data-screen="home"] .sio-next-reward {
  border-color: #2a0a14;
  background: linear-gradient(90deg, #2a0c22, #4a1028 55%, #6a2410);
  box-shadow: 0 3px 0 #12040a, inset 0 0 12px #ff3b1f22;
}

.front-menu[data-screen="home"] .menu-primary.sio-play {
  border-color: #1a0610;
  background:
    linear-gradient(#ffffff40, transparent 42%),
    radial-gradient(circle at 18% 55%, #1a0808 0 7%, transparent 8%),
    radial-gradient(circle at 82% 55%, #1a0808 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 78%, #1a0808 0 10%, transparent 11%),
    linear-gradient(#ffb347, #ff6a00 55%, #c2410c);
  box-shadow: 0 0 18px #ff4d0088, 0 7px 0 #6b2408, 0 12px 20px #000a;
  color: #fff8ee;
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-shadow:
    -2px -2px 0 #1a0610, 2px -2px 0 #1a0610, -2px 2px 0 #1a0610, 2px 2px 0 #1a0610,
    0 4px 0 #6b0d16;
}

.front-menu[data-screen="home"] .menu-primary.sio-play span::before,
.front-menu[data-screen="home"] .menu-primary.sio-play span::after {
  margin: 0 10px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 0.7em;
  letter-spacing: 0;
  vertical-align: 2px;
}

.front-menu[data-screen="home"] .menu-primary.sio-play span::before { content: "🎃"; }
.front-menu[data-screen="home"] .menu-primary.sio-play span::after { content: "💀"; }

.front-menu[data-screen="home"] .menu-nav {
  border-top-color: #2a0a14;
  background:
    linear-gradient(180deg, #2a1020, #10060e);
  box-shadow: 0 -6px 16px #000a, inset 0 1px 0 #ff7a1a33;
}

.front-menu[data-screen="home"] .menu-nav-button {
  color: #e7c2b0;
}

.front-menu[data-screen="home"] .menu-nav-button.is-active {
  border-color: #1a0610;
  background: linear-gradient(#ffb347, #ff6a00);
  box-shadow: 0 0 12px #ff6a0088, 0 3px 0 #6b2408;
  color: #2a0d00;
}

.front-menu[data-screen="home"] .progression-feedback {
  color: #ffb4a2;
}

@keyframes sio-lightning {
  0%, 86%, 100% { opacity: 0; }
  87% { opacity: 0.28; }
  88% { opacity: 0; }
  90% { opacity: 0.16; }
  91% { opacity: 0; }
}

@keyframes sio-eyes-blink {
  0%, 70%, 100% { opacity: 0; }
  76%, 88% { opacity: 1; }
  80% { opacity: 0.15; }
}

@keyframes sio-flame {
  from { scale: 1 1; }
  to { scale: 0.8 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .sio-flash,
  .sio-eyes,
  .sio-candle::before {
    animation: none;
  }
}

/* ===== Boutique : échoppe de la nuit maudite ===== */
.front-menu[data-screen="shop"] .menu-panel {
  border: 4px solid #1a0610;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 0, #ff3b1f33 0, transparent 36%),
    radial-gradient(ellipse at 100% 80%, #39ff6a12 0, transparent 28%),
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #2a1038 0, #160818 46%, #09040e 100%);
  box-shadow:
    0 0 0 3px #ff7a1a55,
    0 8px 0 #07030a,
    0 18px 40px #000e,
    inset 0 0 40px #4a082866;
}

.front-menu[data-screen="shop"] .menu-heading {
  border-bottom-color: #ff7a1a55;
}

.front-menu[data-screen="shop"] .menu-kicker {
  color: #ffb347;
}

.front-menu[data-screen="shop"] .menu-heading h1 {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff4e4;
  text-shadow:
    -2px -2px 0 #1a0610, 2px -2px 0 #1a0610, -2px 2px 0 #1a0610, 2px 2px 0 #1a0610,
    0 5px 0 #6b0d16;
}

.front-menu[data-screen="shop"] .menu-description,
.front-menu[data-screen="shop"] .shop-rotation-note,
.front-menu[data-screen="shop"] .shop-category-note {
  color: #ffd0b0;
}

.front-menu[data-screen="shop"] .shop-ornament {
  filter: drop-shadow(0 0 8px #ff6a0088);
}

.front-menu[data-screen="shop"] .store-countdown {
  padding: 4px 10px;
  border: 2px solid #1a0610;
  border-radius: 999px;
  background: #2a0c18;
  color: #ffb347;
  box-shadow: 0 2px 0 #1a0610;
}

.front-menu[data-screen="shop"] .store-featured {
  position: relative;
  overflow: hidden;
  border: 3px solid #1a0610;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 8% 0, #ff3b1f44, transparent 42%),
    radial-gradient(ellipse at 92% 100%, #7dff2a18, transparent 36%),
    linear-gradient(160deg, #3a1028, #14060f 70%);
  box-shadow: 0 5px 0 #07030a, inset 0 0 24px #0008, 0 0 22px #ff2a0033;
}

.front-menu[data-screen="shop"] .store-featured::before,
.front-menu[data-screen="shop"] .store-featured::after {
  position: absolute;
  top: -6px;
  font-size: 1.8rem;
  opacity: 0.7;
  pointer-events: none;
}

.front-menu[data-screen="shop"] .store-featured::before { content: "🕸️"; left: -4px; }
.front-menu[data-screen="shop"] .store-featured::after { content: "🕸️"; right: -4px; scale: -1 1; }

.front-menu[data-screen="shop"] .store-title {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-weight: 400;
  color: #fff4e4;
  letter-spacing: 0.04em;
  text-shadow: 0 3px 0 #6b0d16;
}

.front-menu[data-screen="shop"] .store-tabs {
  border: 3px solid #1a0610;
  border-radius: 16px;
  background: linear-gradient(180deg, #2a1020, #10060e);
  box-shadow: 0 4px 0 #07030a;
}

.front-menu[data-screen="shop"] .store-tab {
  border: 2px solid #3a1020;
  background: #1a0812;
  color: #ffd0b0;
}

.front-menu[data-screen="shop"] .store-tab:hover {
  background: #3a1424;
  color: #fff4e4;
}

.front-menu[data-screen="shop"] .store-tab[aria-selected="true"],
.front-menu[data-screen="shop"] .store-tab-packs[aria-selected="true"] {
  border-color: #1a0610;
  background: linear-gradient(#ffb347, #ff6a00);
  color: #2a0d00;
  box-shadow: 0 0 12px #ff6a0088, 0 3px 0 #6b2408;
}

.front-menu[data-screen="shop"] .store-filter,
.front-menu[data-screen="shop"] .store-filter select {
  color: #ffd0b0;
}

.front-menu[data-screen="shop"] .store-filter select {
  border: 2px solid #3a1020;
  background: #14060f;
  color: #fff4e4;
}

.front-menu[data-screen="shop"] .store-card {
  border: 3px solid #2a0a14;
  border-radius: 16px;
  background:
    linear-gradient(#ffffff10, transparent 28%),
    linear-gradient(165deg, #3a1840, #160814);
  box-shadow: 0 4px 0 #07030a, inset 0 0 0 1px #ff7a1a33;
}

.front-menu[data-screen="shop"] .store-card:hover {
  box-shadow: 0 0 16px #ff6a0055, 0 8px 0 #07030a;
}

.front-menu[data-screen="shop"] .store-card-featured {
  border-color: #ff6a00;
  background:
    radial-gradient(circle at 50% 0, #ff3b1f33, transparent 46%),
    linear-gradient(165deg, #4a1828, #1a0812);
}

.front-menu[data-screen="shop"] .store-preview {
  border: 2px solid #1a0610;
  background:
    radial-gradient(ellipse at 50% 88%, #ff6a0044 0 36%, transparent 40%),
    linear-gradient(180deg, #0c0410, #2a1020);
}

.front-menu[data-screen="shop"] .store-card h3 {
  color: #ffd0a0;
}

.front-menu[data-screen="shop"] .store-card p,
.front-menu[data-screen="shop"] .store-stats dt {
  color: #e7c2b0;
}

.front-menu[data-screen="shop"] .store-stats {
  background: #0006;
}

.front-menu[data-screen="shop"] .store-price,
.front-menu[data-screen="shop"] .store-price strong {
  color: #ffd54a;
}

.front-menu[data-screen="shop"] .shop-buy-button {
  border: 2px solid #1a0610;
  border-radius: 10px;
  background: linear-gradient(#ffb347, #ff6a00);
  box-shadow: 0 3px 0 #6b2408;
  color: #2a0d00;
}

.front-menu[data-screen="shop"] .shop-buy-free {
  border-color: #0d2a12;
  background: linear-gradient(#c8f18b, #3fbf5f);
  box-shadow: 0 3px 0 #1d5a28;
  color: #08200f;
}

.front-menu[data-screen="shop"] .store-badge-halloween,
.front-menu[data-screen="shop"] .store-badge-promo {
  border: 2px solid #1a0610;
}

.front-menu[data-screen="shop"] .pack-card {
  border-width: 3px;
  box-shadow: 0 5px 0 #07030a, 0 0 16px color-mix(in srgb, var(--pack-trim) 35%, transparent);
}

.front-menu[data-screen="shop"] .menu-nav {
  border-top-color: #2a0a14;
  background: linear-gradient(180deg, #2a1020, #10060e);
  box-shadow: 0 -6px 16px #000a, inset 0 1px 0 #ff7a1a33;
}

.front-menu[data-screen="shop"] .menu-nav-button {
  color: #e7c2b0;
}

.front-menu[data-screen="shop"] .menu-nav-button.is-active {
  border-color: #1a0610;
  background: linear-gradient(#ffb347, #ff6a00);
  box-shadow: 0 0 12px #ff6a0088, 0 3px 0 #6b2408;
  color: #2a0d00;
}

.front-menu[data-screen="shop"] .menu-secondary {
  border-color: #1a0610;
  background: linear-gradient(#4a1848, #220816);
  color: #fff4e4;
}

/* ===== Casier : vestiaire de la nuit maudite ===== */
.front-menu[data-screen="locker"] .menu-panel {
  border: 4px solid #1a0610;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 80% 20%, #ff3b1f28 0, transparent 34%),
    radial-gradient(ellipse at 8% 90%, #39ff6a12 0, transparent 28%),
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #2a1038 0, #160818 48%, #09040e 100%);
  box-shadow:
    0 0 0 3px #ff7a1a55,
    0 8px 0 #07030a,
    0 18px 40px #000e,
    inset 0 0 40px #4a082866;
}

.front-menu[data-screen="locker"] .menu-heading {
  border-bottom-color: #ff7a1a55;
}

.front-menu[data-screen="locker"] .menu-kicker {
  color: #ffb347;
}

.front-menu[data-screen="locker"] .menu-heading h1,
.front-menu[data-screen="locker"] .locker-title {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff4e4;
  text-shadow:
    -2px -2px 0 #1a0610, 2px -2px 0 #1a0610, -2px 2px 0 #1a0610, 2px 2px 0 #1a0610,
    0 5px 0 #6b0d16;
}

.front-menu[data-screen="locker"] .locker-screen {
  --locker-yellow: #ff8a1e;
}

.front-menu[data-screen="locker"] .locker-top {
  border-bottom-color: #ff7a1a44;
}

.front-menu[data-screen="locker"] .locker-tab {
  color: #e7c2b0;
}

.front-menu[data-screen="locker"] .locker-tab.is-active {
  border-bottom-color: #ff6a00;
  color: #fff4e4;
  text-shadow: 0 0 10px #ff6a0088;
}

.front-menu[data-screen="locker"] .locker-tile {
  border: 2px solid #1a0610;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px #ffffff22,
    inset 0 -5px 0 var(--rarity-edge),
    0 4px 0 #07030a;
}

.front-menu[data-screen="locker"] .locker-tile.is-selected,
.front-menu[data-screen="locker"] .locker-tile.is-equipped {
  box-shadow:
    inset 0 0 0 2px #ffffff44,
    inset 0 -5px 0 var(--rarity-edge),
    0 0 0 3px #ff6a00,
    0 0 16px #ff6a0066,
    0 4px 0 #07030a;
}

.front-menu[data-screen="locker"] .locker-tile-check {
  background: #ff6a00;
  color: #2a0d00;
}

.front-menu[data-screen="locker"] .locker-picker {
  border: 3px solid #1a0610;
  border-radius: 16px;
  background: linear-gradient(180deg, #2a1020cc, #10060ecc);
  box-shadow: inset 0 0 18px #0008;
}

.front-menu[data-screen="locker"] .locker-picker-head h3,
.front-menu[data-screen="locker"] .locker-details strong,
.front-menu[data-screen="locker"] .locker-workshop .shop-category-title {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #fff4e4;
  letter-spacing: 0.03em;
}

.front-menu[data-screen="locker"] .locker-picker-head span,
.front-menu[data-screen="locker"] .locker-details p,
.front-menu[data-screen="locker"] .locker-workshop .shop-category-note,
.front-menu[data-screen="locker"] .locker-stage-info span {
  color: #e7c2b0;
}

.front-menu[data-screen="locker"] .locker-details {
  border-left-color: #ff6a00;
  background: linear-gradient(90deg, #ff3b1f22, transparent);
}

.front-menu[data-screen="locker"] .locker-stage {
  border: 3px solid #1a0610;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 78% 12%, #ff2a1844 0, transparent 26%),
    radial-gradient(ellipse at 50% 100%, #ff6a0033 0, transparent 55%),
    linear-gradient(180deg, #07010c 0, #1a0630 42%, #4a1028 100%);
  box-shadow: 0 0 22px #ff2a0033, inset 0 0 30px #0008;
}

.front-menu[data-screen="locker"] .locker-stage::before,
.front-menu[data-screen="locker"] .locker-stage::after {
  position: absolute;
  top: -4px;
  z-index: 2;
  font-size: 1.6rem;
  opacity: 0.75;
  pointer-events: none;
}

.front-menu[data-screen="locker"] .locker-stage::before { content: "🕸️"; left: -2px; }
.front-menu[data-screen="locker"] .locker-stage::after { content: "🕸️"; right: -2px; scale: -1 1; }

.front-menu[data-screen="locker"] .locker-stage-light {
  background: linear-gradient(180deg, #ffb34755, #ff3b1f14 70%, transparent);
}

.front-menu[data-screen="locker"] .locker-stage-pedestal {
  background:
    radial-gradient(ellipse at 50% 35%, #ffd27a 0, #ff6a00 36%, #6b2408 68%, transparent 72%);
  box-shadow: 0 0 28px #ff6a0088;
}

.front-menu[data-screen="locker"] .locker-stage-info {
  background: linear-gradient(transparent, #10060ef2 34%);
}

.front-menu[data-screen="locker"] .menu-nav {
  border-top-color: #2a0a14;
  background: linear-gradient(180deg, #2a1020, #10060e);
  box-shadow: 0 -6px 16px #000a, inset 0 1px 0 #ff7a1a33;
}

.front-menu[data-screen="locker"] .menu-nav-button {
  color: #e7c2b0;
}

.front-menu[data-screen="locker"] .menu-nav-button.is-active {
  border-color: #1a0610;
  background: linear-gradient(#ffb347, #ff6a00);
  box-shadow: 0 0 12px #ff6a0088, 0 3px 0 #6b2408;
  color: #2a0d00;
}

.front-menu[data-screen="locker"] .menu-secondary,
.front-menu[data-screen="locker"] #back-from-locker-button {
  border: 3px solid #1a0610;
  border-radius: 14px;
  background: linear-gradient(#4a1848, #220816);
  color: #fff4e4;
}

/* ===== Récompenses : crypte de la nuit maudite ===== */
.front-menu[data-screen="rewards"] .menu-panel {
  border: 4px solid #1a0610;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 0, #ff3b1f33 0, transparent 36%),
    radial-gradient(ellipse at 0 100%, #39ff6a14 0, transparent 32%),
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #2a1038 0, #160818 46%, #09040e 100%);
  box-shadow:
    0 0 0 3px #ff7a1a55,
    0 8px 0 #07030a,
    0 18px 40px #000e,
    inset 0 0 40px #4a082866;
}

.front-menu[data-screen="rewards"] .menu-panel::before,
.front-menu[data-screen="rewards"] .menu-panel::after {
  position: absolute;
  z-index: 2;
  top: -4px;
  bottom: auto;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  content: "🕸️";
  font-size: 2.4rem;
  opacity: 0.8;
  pointer-events: none;
  transform: none;
}

.front-menu[data-screen="rewards"] .menu-panel::before { right: auto; left: -6px; rotate: -18deg; }
.front-menu[data-screen="rewards"] .menu-panel::after { left: auto; right: -6px; scale: -1 1; }

.front-menu[data-screen="rewards"] .menu-heading {
  border-bottom-color: #ff7a1a55;
}

.front-menu[data-screen="rewards"] .menu-kicker {
  color: #ffb347;
  letter-spacing: 0.14em;
}

.front-menu[data-screen="rewards"] .menu-heading h1 {
  font-family: Creepster, "Arial Black", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff4e4;
  text-shadow:
    -2px -2px 0 #1a0610, 2px -2px 0 #1a0610, -2px 2px 0 #1a0610, 2px 2px 0 #1a0610,
    0 5px 0 #6b0d16, 0 0 16px #ff2a1866;
}

.rewards-ornament {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 2px 8px;
  border: 2px dashed #ff7a1a66;
  border-radius: 999px;
  background: #10060ecc;
  font-size: 1.15rem;
  line-height: 1;
}

.rewards-web {
  font-size: 1.35rem;
  opacity: 0.85;
}

.front-menu[data-screen="rewards"] .rewards-summary {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 2px solid #3a1020;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #2a1020ee, #14060ef2);
  color: #ffd0b0;
  box-shadow: inset 0 0 16px #ff3b1f22;
}

.front-menu[data-screen="rewards"] .rewards-track {
  position: relative;
  max-height: min(42cqh, 420px);
  padding: 6px 4px 6px 8px;
  border: 2px solid #2a0a14;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0, #ff7a1a18, transparent 40%),
    linear-gradient(180deg, #12060f, #09040c);
  scrollbar-color: #ff7a1a #14060f;
}

.front-menu[data-screen="rewards"] .rewards-track::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 30px;
  width: 3px;
  background: repeating-linear-gradient(#ff7a1a 0 7px, transparent 7px 13px);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.front-menu[data-screen="rewards"] .reward-node {
  position: relative;
  overflow: hidden;
  border-color: #2a0a14;
  background:
    linear-gradient(180deg, #3a1848, #1a0a22);
  box-shadow: 0 3px 0 #12040a, inset 0 0 0 1px #ff7a1a22;
  opacity: 0.9;
}

.front-menu[data-screen="rewards"] .reward-node.is-milestone:not(.is-claimed) {
  background: linear-gradient(180deg, #5a2068, #2a0c38);
}

.front-menu[data-screen="rewards"] .reward-node.is-major:not(.is-claimed) {
  background: linear-gradient(180deg, #8a2410, #3a0c08);
}

.front-menu[data-screen="rewards"] .reward-node.is-next {
  border-color: #ff9a3c;
  background:
    radial-gradient(circle at 8% 50%, #ffb34744, transparent 28%),
    linear-gradient(180deg, #5a2418, #2a0c18);
  box-shadow: 0 3px 0 #12040a, 0 0 16px #ff7a1a88;
  opacity: 1;
}

.front-menu[data-screen="rewards"] .reward-node.is-next .reward-level::before {
  position: absolute;
  top: -8px;
  left: 50%;
  content: "🕯️";
  font-size: 0.7rem;
  pointer-events: none;
  translate: -50% 0;
}

.front-menu[data-screen="rewards"] .reward-node.is-claimed,
.front-menu[data-screen="rewards"] .reward-node.is-milestone.is-claimed,
.front-menu[data-screen="rewards"] .reward-node.is-major.is-claimed {
  border-color: #1c4a12;
  background:
    radial-gradient(circle at 88% 120%, #b6ff3a33, transparent 42%),
    repeating-linear-gradient(-45deg, #ffffff14 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #3d8f2c 0, #1d5a16 58%, #0e320c 100%);
  box-shadow:
    0 3px 0 #0a2408,
    inset 0 0 0 2px #9dff6a55,
    0 0 14px #39ff6a33;
  opacity: 1;
}

.front-menu[data-screen="rewards"] .reward-node.is-claimed::before {
  position: absolute;
  bottom: -14px;
  left: -4px;
  z-index: 0;
  content: "🎃";
  font-size: 2rem;
  opacity: 0.5;
  pointer-events: none;
  rotate: -16deg;
}

.front-menu[data-screen="rewards"] .reward-node.is-claimed::after {
  position: absolute;
  top: -8px;
  left: 28px;
  z-index: 2;
  content: "🕸️";
  font-size: 1.35rem;
  opacity: 0.95;
  pointer-events: none;
}

.front-menu[data-screen="rewards"] .reward-node.is-wheel.is-claimed {
  box-shadow:
    0 3px 0 #0a2408,
    inset 0 0 0 2px #9dff6a55,
    0 0 0 2px #8fe9ff,
    0 0 16px #39ff6a55;
}

.front-menu[data-screen="rewards"] .reward-level {
  position: relative;
  z-index: 1;
  border-color: #1a0610;
  background: linear-gradient(#6a2860, #3a1038);
}

.front-menu[data-screen="rewards"] .is-claimed .reward-level {
  background: radial-gradient(circle at 40% 32%, #eaffc4, #62c432 48%, #176612 80%);
  box-shadow: 0 0 12px #8cff3acc, inset 0 -6px 0 #0c2808, 0 0 0 2px #14320c;
  color: #062006;
  text-shadow: 0 1px 0 #e8ffc8;
}

.front-menu[data-screen="rewards"] .is-claimed .reward-level::before {
  position: absolute;
  top: -8px;
  right: -7px;
  content: "🦇";
  font-size: 0.68rem;
  line-height: 1;
  pointer-events: none;
  filter: none;
}

.front-menu[data-screen="rewards"] .is-milestone:not(.is-claimed) .reward-level {
  border-radius: 12px;
  background: linear-gradient(#ffb347, #ff6a00);
  color: #2a0d00;
}

.front-menu[data-screen="rewards"] .is-milestone.is-claimed .reward-level {
  border-radius: 12px;
}

.front-menu[data-screen="rewards"] .is-milestone.is-claimed .reward-level::after,
.front-menu[data-screen="rewards"] .is-major.is-claimed .reward-level::after {
  position: absolute;
  top: -7px;
  right: -8px;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
}

.front-menu[data-screen="rewards"] .is-milestone.is-claimed .reward-level::after { content: "⭐"; }
.front-menu[data-screen="rewards"] .is-major.is-claimed .reward-level::after { content: "👑"; }

.front-menu[data-screen="rewards"] .reward-chip {
  border: 1px solid #ffffff22;
  background: #10060ecc;
  color: #fff4e4;
}

.front-menu[data-screen="rewards"] .is-claimed .reward-chip {
  border-color: #14320c;
  background: #0c240ccc;
  color: #e8ffc8;
}

.front-menu[data-screen="rewards"] .reward-state {
  position: relative;
  z-index: 1;
  color: #c9a8b8;
}

.front-menu[data-screen="rewards"] .is-claimed .reward-state {
  padding: 3px 8px 3px 6px;
  border: 2px dashed #8cff3a;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 50%, #39ff6a55, transparent 36%),
    #0c280ee6;
  color: #d8ffb0;
  box-shadow: 0 0 8px #39ff6a66, inset 0 0 0 1px #14320c;
}

.front-menu[data-screen="rewards"] .is-claimed .reward-state::before {
  content: "💀 ";
}

.front-menu[data-screen="rewards"] .is-next .reward-state {
  padding: 3px 8px;
  border: 2px solid #ff9a3c;
  border-radius: 999px;
  background: #2a0c08cc;
  color: #ffd0a0;
}

.front-menu[data-screen="rewards"] .menu-nav {
  border-top-color: #2a0a14;
  background: linear-gradient(180deg, #2a1020, #10060e);
  box-shadow: 0 -6px 16px #000a, inset 0 1px 0 #ff7a1a33;
}

.front-menu[data-screen="rewards"] .menu-nav-button {
  color: #e7c2b0;
}

.front-menu[data-screen="rewards"] .menu-nav-button.is-active {
  border-color: #1a0610;
  background: linear-gradient(#ffb347, #ff6a00);
  box-shadow: 0 0 12px #ff6a0088, 0 3px 0 #6b2408;
  color: #2a0d00;
}

.front-menu[data-screen="rewards"] .menu-secondary,
.front-menu[data-screen="rewards"] #back-from-rewards-button {
  border: 3px solid #1a0610;
  border-radius: 14px;
  background: linear-gradient(#4a1848, #220816);
  color: #fff4e4;
}

@media (prefers-reduced-motion: reduce) {
  .front-menu[data-screen="rewards"] .reward-node.is-next {
    box-shadow: 0 3px 0 #12040a;
  }
}

/* ===== Barre du bas : crypte Halloween ===== */
.front-menu[data-screen] .menu-nav {
  overflow: visible;
  padding: 16px 6px 8px;
  border-top: 3px solid #5a1018;
  background:
    radial-gradient(ellipse at 50% 0, #ff2a1828, transparent 58%),
    linear-gradient(180deg, #241018 0, #0c0408 100%);
  box-shadow:
    inset 0 10px 16px #000c,
    inset 0 3px 0 #ff2a1833,
    0 -12px 28px #000e;
}

.front-menu[data-screen] .menu-nav::before {
  position: absolute;
  z-index: 5;
  top: -1px;
  right: 6%;
  left: 6%;
  height: 14px;
  background:
    radial-gradient(ellipse 7px 12px at 8% 100%, #9a1428 58%, transparent 60%),
    radial-gradient(ellipse 4px 8px at 22% 70%, #e02335 58%, transparent 60%),
    radial-gradient(ellipse 6px 13px at 41% 100%, #6e0c16 58%, transparent 60%),
    radial-gradient(ellipse 5px 9px at 63% 78%, #c41628 58%, transparent 60%),
    radial-gradient(ellipse 7px 11px at 84% 100%, #8a1020 58%, transparent 60%);
  content: "";
  pointer-events: none;
}

.menu-nav-web,
.menu-nav-spider {
  position: absolute;
  z-index: 6;
  line-height: 1;
  pointer-events: none;
}

.menu-nav-web {
  top: -10px;
  font-size: 1.65rem;
  opacity: 0.9;
  filter: drop-shadow(0 2px 0 #1a0610);
}

.menu-nav-web-left { left: 0; }
.menu-nav-web-right { right: 0; scale: -1 1; }

.menu-nav-spider {
  top: 1px;
  left: 31%;
  font-size: 0.8rem;
  animation: menu-nav-spider 3.4s ease-in-out infinite;
}

.menu-nav-spider::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 12px;
  background: linear-gradient(#ffffff22, #ffffffaa);
  content: "";
}

@keyframes menu-nav-spider {
  0%, 100% { translate: 0 -6px; }
  50% { translate: 0 3px; }
}

.front-menu[data-screen] .menu-nav-button {
  color: #e7c4b4;
  text-shadow: 0 2px 0 #1a0610, 0 0 8px #ff2a1822;
}

.front-menu[data-screen] .menu-nav-icon {
  filter: drop-shadow(0 2px 0 #1a0610) drop-shadow(0 0 6px #ff2a1855);
}

.front-menu[data-screen] .menu-nav-button:hover {
  background: #ff2a181c;
  color: #ffd8c8;
}

.front-menu[data-screen] .menu-nav-button.is-active {
  border-color: #1a0608;
  border-radius: 18px;
  background:
    radial-gradient(circle at 32% 16%, #1a0808 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 68% 16%, #1a0808 0 3.5px, transparent 4.5px),
    radial-gradient(ellipse at 50% 28%, #1a0808 0 8px 3px, transparent 9px),
    radial-gradient(circle at 50% 30%, #ffe0a8, #ff6a1a 46%, #9a1608 82%);
  box-shadow:
    0 0 18px #ff2a18cc,
    0 4px 0 #4a0c08,
    inset 0 -8px 0 #4a080844;
  color: #2a0604;
  text-shadow: none;
}

.front-menu[data-screen] .menu-nav-button.is-active .menu-nav-icon {
  filter: drop-shadow(0 2px 0 #4a0c08) drop-shadow(0 0 8px #ffd27a);
}

@media (prefers-reduced-motion: reduce) {
  .menu-nav-spider {
    animation: none;
  }
}