:root {
  color-scheme: dark;
  background: #0b1020;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #0b1020;
}

button,
input {
  font: inherit;
}

:root {
  --ink: #fff7df;
  --muted: #b8c7dc;
  --panel: #17243d;
  --panel-deep: #0b1426;
  --line: #7d91b2;
  --gold: #ffd35a;
  --green: #75e28f;
  --red: #ff7777;
}

#quest-test-root {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(77, 111, 170, 0.34), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 4px),
    #080f1e;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.app-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
}

.pixel-panel {
  background: linear-gradient(180deg, #1c2c4a 0%, var(--panel) 100%);
  border: 3px solid #070c17;
  box-shadow: 0 0 0 2px var(--line), 0 7px 0 #050812;
}

.game-header {
  min-height: 78px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-rune {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #18162b;
  background: var(--gold);
  border: 4px double #855f18;
  font-family: Georgia, serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 900;
  transform: rotate(45deg);
}

.brand-rune i {
  display: inline-block;
  transform: rotate(-45deg);
  font-style: italic;
}

.brand h1 {
  margin: 0;
  font-size: clamp(1.18rem, 4vw, 1.75rem);
  letter-spacing: 0.035em;
}

.brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.header-stats {
  display: flex;
  gap: 8px;
}

.header-stats span {
  min-height: 38px;
  padding: 6px 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #0e192c;
  border: 1px solid #52698d;
  font-size: 0.66rem;
}

.header-stats b {
  color: var(--gold);
  font-size: 0.86rem;
}

.sound-button,
.small-button,
.role-card,
.key,
.hint-button,
.attack-button {
  cursor: pointer;
  touch-action: manipulation;
}

.sound-button {
  min-width: 48px;
  min-height: 48px;
  color: var(--gold);
  background: #0d1729;
  border: 2px solid #6f83a6;
  border-radius: 3px;
  font-size: 1rem;
  font-weight: 900;
}

.role-select,
.battle-panel {
  margin-top: 16px;
  padding: clamp(16px, 4vw, 24px);
}

.chapter {
  margin: 0 0 3px;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.role-select > h2 {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 5vw, 2rem);
  text-align: center;
}

.role-select > .chapter {
  text-align: center;
}

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

.role-card {
  min-height: 215px;
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  background: #0d182b;
  border: 3px solid #334b70;
  border-radius: 3px;
  box-shadow: inset 0 -5px 0 #080e1b;
}

.role-card strong {
  font-size: 1.08rem;
}

.role-card:active,
.role-card:focus-visible {
  transform: translateY(2px);
  border-color: var(--gold);
  outline: none;
}

@media (hover: hover) {
  .role-card:hover {
    border-color: var(--gold);
    background: #142644;
  }
}

.select-word {
  margin-top: auto;
  padding: 4px 12px;
  color: var(--gold);
  border: 1px solid #806521;
  font-size: 0.7rem;
}

.opening-line {
  margin: 19px 0 0;
  color: var(--muted);
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 0.86rem;
  text-align: center;
}

.role-stage {
  width: 94px;
  height: 128px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    linear-gradient(transparent 72%, #243b3d 72%),
    repeating-linear-gradient(90deg, #111c33 0 8px, #15233e 8px 16px);
  border: 2px solid #38547c;
}

.pixel-sprite {
  --scale: 4;
  width: calc(20px * var(--scale));
  height: calc(28px * var(--scale));
  display: block;
  background-image: var(--sprite-url);
  background-size: calc(120px * var(--scale)) calc(112px * var(--scale));
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: sprite-walk 0.78s steps(6) infinite;
}

@keyframes sprite-walk {
  from { background-position: 0 0; }
  to { background-position: calc(-120px * var(--scale)) 0; }
}

.stage-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-line h2 {
  margin: 0;
  font-size: clamp(1.15rem, 4vw, 1.55rem);
}

.small-button {
  min-height: 42px;
  padding: 7px 12px;
  color: #dce7fb;
  background: #101c31;
  border: 1px solid #6780a7;
  border-radius: 3px;
}

.battlefield {
  position: relative;
  height: 270px;
  margin: 14px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 22px 24px 19px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 34%, rgba(88, 115, 168, 0.25), transparent 23%),
    linear-gradient(transparent 68%, rgba(22, 52, 46, 0.98) 68%),
    linear-gradient(180deg, #0c1528 0%, #273d64 68%, #17352f 68%);
  border: 2px solid #5a739b;
}

.battlefield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.05) 47% 49%, transparent 50%) 0 0 / 46px 46px,
    radial-gradient(circle at 20% 24%, #50688d 0 3px, transparent 4px),
    radial-gradient(circle at 45% 18%, #50688d 0 2px, transparent 3px);
}

.scene-aqua {
  background:
    radial-gradient(circle at 73% 35%, rgba(92, 226, 255, 0.34), transparent 26%),
    linear-gradient(transparent 68%, rgba(18, 57, 67, 0.98) 68%),
    linear-gradient(180deg, #071928 0%, #174968 68%, #113d42 68%);
  border-color: #62b8d2;
}

.scene-aqua::before {
  background:
    radial-gradient(ellipse at 70% 58%, rgba(194, 248, 255, 0.18), transparent 37%),
    radial-gradient(ellipse at 25% 42%, rgba(116, 222, 242, 0.13), transparent 33%),
    repeating-linear-gradient(165deg, transparent 0 24px, rgba(148, 230, 245, 0.055) 25px 27px, transparent 28px 52px);
  animation: mist-drift 5s ease-in-out infinite alternate;
}

.scene-violet {
  background:
    radial-gradient(circle at 73% 38%, rgba(226, 84, 255, 0.3), transparent 28%),
    linear-gradient(transparent 68%, rgba(48, 22, 59, 0.98) 68%),
    linear-gradient(180deg, #10091d 0%, #39215d 68%, #28142f 68%);
  border-color: #b573d7;
  box-shadow: inset 0 0 38px rgba(194, 61, 255, 0.22);
}

.scene-violet::before {
  background:
    radial-gradient(circle at 16% 22%, #efb1ff 0 2px, transparent 3px),
    radial-gradient(circle at 39% 37%, #9e73ff 0 2px, transparent 3px),
    radial-gradient(circle at 62% 18%, #f06dff 0 3px, transparent 4px),
    linear-gradient(145deg, transparent 43%, rgba(241, 127, 255, 0.07) 44% 46%, transparent 47%) 0 0 / 54px 54px;
  animation: labyrinth-pulse 2.4s ease-in-out infinite alternate;
}

.battlefield::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 13px;
  z-index: 6;
  background: repeating-linear-gradient(90deg, #1b4237 0 12px, #245144 12px 24px);
}

.fighter {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-items: end;
}

.player-zone {
  justify-self: start;
  min-width: 132px;
}

.enemy-zone {
  justify-self: end;
  width: 190px;
  min-width: 190px;
  isolation: isolate;
  animation: enemy-arrive 0.5s cubic-bezier(0.18, 0.8, 0.25, 1) both;
}

.enemy-zone::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  z-index: -1;
  width: 158px;
  height: 42px;
  border: 2px solid rgba(255, 179, 76, 0.72);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 131, 35, 0.45), transparent 68%);
  box-shadow: 0 0 18px rgba(255, 126, 39, 0.58), inset 0 0 14px rgba(255, 204, 94, 0.34);
  transform: translateX(-50%);
  animation: enemy-aura 1.45s ease-in-out infinite;
}

.enemy-zone.aqua::before {
  border-color: rgba(99, 226, 255, 0.74);
  background: radial-gradient(ellipse, rgba(40, 181, 255, 0.45), transparent 68%);
  box-shadow: 0 0 20px rgba(64, 213, 255, 0.64), inset 0 0 14px rgba(180, 250, 255, 0.38);
}

.enemy-zone.violet::before {
  width: 176px;
  border-color: rgba(230, 107, 255, 0.78);
  background: radial-gradient(ellipse, rgba(183, 48, 255, 0.5), transparent 70%);
  box-shadow: 0 0 26px rgba(215, 65, 255, 0.72), inset 0 0 18px rgba(249, 155, 255, 0.42);
}

.unit-label,
.enemy-hud {
  min-width: 126px;
  margin-bottom: 7px;
  padding: 5px 7px;
  display: grid;
  gap: 4px;
  color: #edf4ff;
  background: rgba(5, 10, 21, 0.86);
  border: 1px solid #647fa9;
  font-size: 0.68rem;
  text-align: center;
}

.floating-enemy-hud {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 8;
  width: min(205px, 43%);
  min-width: 150px;
  margin: 0;
  padding: 7px 9px 9px;
  background: rgba(5, 10, 21, 0.96);
  border: 2px solid #8da5ca;
  box-shadow: 0 4px 0 rgba(3, 7, 15, 0.78), 0 0 15px rgba(121, 156, 209, 0.22);
  text-align: left;
}

.floating-enemy-hud > span:first-child {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-enemy-hud .hp-track {
  height: 10px;
  margin-top: 2px;
  border-color: #95a9c7;
}

.floating-enemy-hud .hp-track i {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32);
}

.hearts {
  display: flex;
  justify-content: center;
  gap: 3px;
  font-style: normal;
}

.hearts i {
  font-style: normal;
}

.hearts .full { color: #ff666f; }
.hearts .empty { color: #43516a; }

.hp-track {
  width: 100%;
  height: 7px;
  display: block;
  overflow: hidden;
  background: #2a3140;
  border: 1px solid #070a11;
}

.hp-track i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #ef5454, #ffb35e);
  transition: width 0.3s steps(5);
}

.battle-sprite {
  --scale: 5;
}

.enemy-sprite {
  position: relative;
  z-index: 1;
  width: 168px;
  height: 168px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 8px rgba(255, 153, 49, 0.48));
  animation: enemy-float 1.7s ease-in-out infinite;
}

.enemy-zone.aqua .enemy-sprite {
  width: 174px;
  height: 174px;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 11px rgba(69, 218, 255, 0.62));
}

.boss-sprite {
  width: 186px;
  height: 186px;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.66)) drop-shadow(0 0 14px rgba(222, 78, 255, 0.72));
  animation-duration: 1.15s;
}

@keyframes enemy-arrive {
  0% { opacity: 0; translate: 56px -18px; scale: 0.55; filter: brightness(2.2); }
  72% { opacity: 1; translate: -4px 0; scale: 1.06; }
  100% { translate: 0 0; scale: 1; filter: none; }
}

@keyframes enemy-aura {
  0%, 100% { opacity: 0.55; scale: 0.88; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes mist-drift {
  from { translate: -10px 0; opacity: 0.62; }
  to { translate: 12px -4px; opacity: 1; }
}

@keyframes labyrinth-pulse {
  from { opacity: 0.55; filter: brightness(0.85); }
  to { opacity: 1; filter: brightness(1.22); }
}

@keyframes enemy-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

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

.fx,
.impact {
  position: absolute;
  display: none;
}

.fx > *,
.impact > * {
  position: absolute;
  display: block;
}

.attack-slash { --impact-color: #baffc7; --impact-glow: #52f675; }
.attack-grass { --impact-color: #d9ff9c; --impact-glow: #53dc6d; }
.attack-magic { --impact-color: #ffc2ff; --impact-glow: #c05cff; }
.attack-water { --impact-color: #c4f8ff; --impact-glow: #3bc8ff; }
.attack-wind { --impact-color: #e8fff9; --impact-glow: #7ef0d4; }
.attack-ice { --impact-color: #e8fdff; --impact-glow: #67d9ff; }
.attack-thunder { --impact-color: #fffbd0; --impact-glow: #ffe03d; }

.attack-slash .fx-slash,
.attack-grass .fx-grass,
.attack-magic .fx-magic,
.attack-water .fx-water,
.attack-wind .fx-wind,
.attack-ice .fx-ice,
.attack-thunder .fx-thunder,
.attacking .impact {
  display: block;
}

.attack-slash .fx-slash {
  left: 27%;
  top: 29%;
  width: 52%;
  height: 112px;
  transform: rotate(-19deg);
  animation: slash-sweep 0.68s cubic-bezier(0.12, 0.74, 0.2, 1) forwards;
  mix-blend-mode: screen;
}

.attacking .player-zone {
  animation: player-cast 0.72s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.attacking .enemy-sprite {
  animation: enemy-hit 0.72s steps(4);
}

.attacking::before {
  animation: scene-glint 0.72s ease-out;
}

.attack-thunder {
  animation: thunder-shake 0.5s 0.12s steps(4);
}

.fx-slash i {
  left: 0;
  width: 100%;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #7aff9e 18%, #fff 54% 78%, transparent);
  box-shadow: 0 0 7px #fff, 0 0 17px #4eff80;
}

.fx-slash i:nth-of-type(1) { top: 24px; transform: rotate(-8deg); }
.fx-slash i:nth-of-type(2) { top: 51px; height: 12px; }
.fx-slash i:nth-of-type(3) { top: 78px; transform: rotate(8deg); opacity: 0.75; }

.fx-slash b {
  right: 1%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #f6fff3;
  box-shadow: 0 0 8px #7bff96;
  transform: rotate(45deg);
  animation: slash-spark 0.58s ease-out forwards;
}

.fx-slash b:nth-of-type(1) { --spark-x: 32px; --spark-y: -44px; }
.fx-slash b:nth-of-type(2) { --spark-x: 47px; --spark-y: 4px; animation-delay: 0.05s; }
.fx-slash b:nth-of-type(3) { --spark-x: 24px; --spark-y: 40px; animation-delay: 0.09s; }

.attack-grass .fx-grass {
  right: 5%;
  bottom: 10%;
  width: 155px;
  height: 150px;
  filter: drop-shadow(0 0 8px rgba(97, 255, 130, 0.8));
}

.fx-grass i {
  left: 68px;
  bottom: 3px;
  width: 34px;
  height: 132px;
  border-left: 8px solid #8aff9a;
  border-radius: 50%;
  transform-origin: 50% 100%;
  animation: vine-grow 0.68s cubic-bezier(0.15, 0.9, 0.22, 1) forwards;
}

.fx-grass i:nth-of-type(1) { transform: rotate(-26deg); }
.fx-grass i:nth-of-type(2) { left: 79px; height: 145px; border-color: #d4ff82; transform: rotate(3deg); animation-delay: 0.04s; }
.fx-grass i:nth-of-type(3) { left: 88px; height: 125px; border-color: #55dc76; transform: rotate(30deg); animation-delay: 0.08s; }

.fx-grass b {
  left: 72px;
  bottom: 42px;
  width: 24px;
  height: 13px;
  background: linear-gradient(135deg, #e5ff8c, #45d66b);
  border-radius: 100% 0 100% 0;
  transform-origin: 0 50%;
  animation: leaf-burst 0.64s ease-out forwards;
}

.fx-grass b:nth-of-type(1) { --leaf-x: -48px; --leaf-y: -58px; transform: rotate(-35deg); }
.fx-grass b:nth-of-type(2) { --leaf-x: 42px; --leaf-y: -73px; transform: rotate(35deg); animation-delay: 0.04s; }
.fx-grass b:nth-of-type(3) { --leaf-x: -30px; --leaf-y: -105px; transform: rotate(-70deg); animation-delay: 0.07s; }
.fx-grass b:nth-of-type(4) { --leaf-x: 50px; --leaf-y: -112px; transform: rotate(72deg); animation-delay: 0.1s; }

.attack-magic .fx-magic,
.attack-water .fx-water {
  left: 27%;
  top: 35%;
  width: 84px;
  height: 84px;
  animation: projectile-flight 0.7s cubic-bezier(0.18, 0.75, 0.18, 1) forwards;
  mix-blend-mode: screen;
}

.magic-orb {
  inset: 14px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0 10%, #ffcdfa 12% 24%, #f25dea 30% 48%, #6435d5 67%, transparent 70%);
  box-shadow: 0 0 10px #fff, 0 0 28px #e657ff, 0 0 45px rgba(121, 55, 255, 0.78);
  animation: magic-pulse 0.22s ease-in-out infinite alternate;
}

.magic-ring {
  inset: 4px;
  border: 4px double rgba(255, 207, 255, 0.9);
  border-left-color: transparent;
  border-right-color: #9758ff;
  border-radius: 50%;
  animation: magic-spin 0.46s linear infinite;
}

.fx-magic b,
.fx-water b {
  left: 7px;
  top: 38px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffdbff;
  box-shadow: 0 0 10px #db71ff;
  animation: mote-trail 0.56s ease-out forwards;
}

.fx-magic b:nth-of-type(1) { --mote-x: -34px; --mote-y: -22px; }
.fx-magic b:nth-of-type(2) { --mote-x: -48px; --mote-y: 14px; animation-delay: 0.05s; }
.fx-magic b:nth-of-type(3) { --mote-x: -18px; --mote-y: 34px; animation-delay: 0.1s; }
.fx-magic b:nth-of-type(4) { --mote-x: 4px; --mote-y: -38px; animation-delay: 0.14s; }

.bubble-main {
  inset: 7px;
  z-index: 2;
  overflow: hidden;
  border: 3px solid rgba(222, 255, 255, 0.95);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.96) 0 7%, transparent 9%),
    radial-gradient(circle at 68% 70%, rgba(42, 150, 255, 0.72), transparent 38%),
    linear-gradient(145deg, rgba(211, 255, 255, 0.72), rgba(64, 204, 255, 0.35) 48%, rgba(53, 105, 228, 0.68));
  box-shadow: inset 8px 7px 16px rgba(255, 255, 255, 0.36), inset -9px -10px 18px rgba(30, 85, 207, 0.58), 0 0 15px #9ef6ff, 0 0 34px #2ebcff;
  animation: bubble-wobble 0.3s ease-in-out infinite alternate;
}

.bubble-ring {
  inset: -5px;
  border: 3px solid rgba(181, 250, 255, 0.8);
  border-right-color: transparent;
  border-bottom-color: rgba(44, 191, 255, 0.46);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(82, 217, 255, 0.76);
  animation: bubble-ring 0.48s linear infinite;
}

.fx-water b {
  width: var(--bubble-size, 10px);
  height: var(--bubble-size, 10px);
  background: rgba(118, 225, 255, 0.24);
  border: 2px solid rgba(222, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.7), 0 0 8px #52d9ff;
  animation-name: bubble-trail;
}

.fx-water b:nth-of-type(1) { --mote-x: -38px; --mote-y: -30px; --bubble-size: 12px; }
.fx-water b:nth-of-type(2) { --mote-x: -58px; --mote-y: 4px; --bubble-size: 8px; animation-delay: 0.04s; }
.fx-water b:nth-of-type(3) { --mote-x: -29px; --mote-y: 37px; --bubble-size: 15px; animation-delay: 0.08s; }
.fx-water b:nth-of-type(4) { --mote-x: 4px; --mote-y: -45px; --bubble-size: 9px; animation-delay: 0.11s; }
.fx-water b:nth-of-type(5) { --mote-x: -70px; --mote-y: -19px; --bubble-size: 6px; animation-delay: 0.14s; }
.fx-water b:nth-of-type(6) { --mote-x: -11px; --mote-y: 51px; --bubble-size: 7px; animation-delay: 0.17s; }

.attack-wind .fx-wind {
  left: 27%;
  top: 26%;
  width: 195px;
  height: 120px;
  animation: wind-rush 0.7s cubic-bezier(0.2, 0.7, 0.15, 1) forwards;
  filter: drop-shadow(0 0 7px #9effea);
}

.fx-wind i {
  left: 0;
  width: 176px;
  height: 44px;
  border-top: 6px solid rgba(227, 255, 248, 0.95);
  border-radius: 50%;
  transform: rotate(-5deg);
  transform-origin: center;
  animation: wind-ribbon 0.34s ease-in-out infinite alternate;
}

.fx-wind i:nth-of-type(1) { top: 17px; }
.fx-wind i:nth-of-type(2) { top: 48px; left: 22px; width: 160px; border-color: #7df0d4; transform: rotate(6deg); animation-delay: 0.06s; animation-direction: alternate-reverse; }
.fx-wind i:nth-of-type(3) { top: 76px; left: 5px; width: 135px; border-color: #e9fff7; transform: rotate(-2deg); animation-delay: 0.12s; }

.fx-wind b {
  right: 8px;
  top: 46px;
  width: 9px;
  height: 9px;
  background: #ecfff7;
  box-shadow: 0 0 9px #85f6d9;
  transform: rotate(45deg);
  animation: wind-spark 0.56s ease-out forwards;
}

.fx-wind b:nth-of-type(1) { --wind-x: 34px; --wind-y: -47px; }
.fx-wind b:nth-of-type(2) { --wind-x: 50px; --wind-y: 5px; animation-delay: 0.05s; }
.fx-wind b:nth-of-type(3) { --wind-x: 23px; --wind-y: 48px; animation-delay: 0.1s; }

.attack-ice .fx-ice {
  right: 3%;
  top: 16%;
  width: 175px;
  height: 165px;
  filter: drop-shadow(0 0 9px rgba(125, 231, 255, 0.9));
  mix-blend-mode: screen;
  animation: frost-bloom 0.72s ease-out forwards;
}

.frost-ring {
  left: 24px;
  top: 24px;
  width: 126px;
  height: 126px;
  border: 5px double rgba(213, 251, 255, 0.95);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(71, 198, 255, 0.5), 0 0 20px #8feaff;
  animation: frost-ring 0.68s ease-out forwards;
}

.ice-shard {
  left: 74px;
  bottom: 17px;
  width: 29px;
  height: 104px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.96), rgba(103, 218, 255, 0.72) 45%, rgba(60, 101, 211, 0.86));
  clip-path: polygon(50% 0, 100% 72%, 68% 100%, 27% 92%, 0 70%);
  transform-origin: 50% 100%;
  animation: shard-grow 0.6s cubic-bezier(0.12, 0.85, 0.22, 1) forwards;
}

.ice-shard.s1 { transform: rotate(-48deg) scale(0.72); }
.ice-shard.s2 { transform: rotate(-25deg) scale(0.9); animation-delay: 0.04s; }
.ice-shard.s3 { transform: rotate(0deg) scale(1.05); animation-delay: 0.08s; }
.ice-shard.s4 { transform: rotate(25deg) scale(0.88); animation-delay: 0.12s; }
.ice-shard.s5 { transform: rotate(48deg) scale(0.7); animation-delay: 0.16s; }

.fx-ice b {
  left: 82px;
  top: 76px;
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 0 9px #83e8ff;
  transform: rotate(45deg);
  animation: snow-burst 0.68s ease-out forwards;
}

.fx-ice b:nth-of-type(1) { --snow-x: -63px; --snow-y: -48px; }
.fx-ice b:nth-of-type(2) { --snow-x: 3px; --snow-y: -72px; animation-delay: 0.03s; }
.fx-ice b:nth-of-type(3) { --snow-x: 66px; --snow-y: -42px; animation-delay: 0.06s; }
.fx-ice b:nth-of-type(4) { --snow-x: -58px; --snow-y: 34px; animation-delay: 0.09s; }
.fx-ice b:nth-of-type(5) { --snow-x: 63px; --snow-y: 37px; animation-delay: 0.12s; }

.attack-thunder .fx-thunder {
  right: 5%;
  top: -25px;
  width: 150px;
  height: 215px;
  mix-blend-mode: screen;
  animation: thunder-flash 0.7s steps(2) forwards;
}

.bolt-main {
  left: 55px;
  top: 0;
  width: 46px;
  height: 190px;
  background: linear-gradient(90deg, #fff 0 25%, #fff77e 28% 62%, #ffca26 66% 100%);
  clip-path: polygon(45% 0, 100% 0, 62% 33%, 91% 33%, 35% 100%, 48% 54%, 13% 54%);
  filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px #ffe132);
  animation: bolt-drop 0.42s steps(3) forwards;
}

.bolt-branch {
  top: 76px;
  width: 19px;
  height: 92px;
  background: #fff58b;
  clip-path: polygon(42% 0, 100% 0, 58% 43%, 92% 43%, 27% 100%, 42% 58%, 0 58%);
  filter: drop-shadow(0 0 8px #ffde39);
}

.bolt-branch.b1 { left: 31px; transform: rotate(-27deg); animation: branch-strike 0.45s 0.08s steps(3) both; }
.bolt-branch.b2 { right: 27px; transform: rotate(31deg); animation: branch-strike 0.45s 0.13s steps(3) both; }

.fx-thunder b {
  left: 74px;
  top: 167px;
  width: 8px;
  height: 8px;
  background: #fffbd0;
  box-shadow: 0 0 11px #ffe950;
  transform: rotate(45deg);
  animation: thunder-spark 0.5s ease-out forwards;
}

.fx-thunder b:nth-of-type(1) { --bolt-x: -59px; --bolt-y: -27px; }
.fx-thunder b:nth-of-type(2) { --bolt-x: 58px; --bolt-y: -39px; animation-delay: 0.04s; }
.fx-thunder b:nth-of-type(3) { --bolt-x: -42px; --bolt-y: 28px; animation-delay: 0.08s; }
.fx-thunder b:nth-of-type(4) { --bolt-x: 45px; --bolt-y: 30px; animation-delay: 0.12s; }

.attacking .impact {
  right: 4%;
  top: 45%;
  width: 138px;
  height: 138px;
  border: 5px solid var(--impact-color);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--impact-color), inset 0 0 22px var(--impact-glow), 0 0 45px var(--impact-glow);
  animation: impact-burst 0.68s ease-out forwards;
  mix-blend-mode: screen;
}

.impact i {
  left: 64px;
  top: -26px;
  width: 5px;
  height: 190px;
  background: linear-gradient(transparent, var(--impact-color) 35% 65%, transparent);
  box-shadow: 0 0 9px var(--impact-glow);
}

.impact i:nth-child(2) { transform: rotate(45deg); }
.impact i:nth-child(3) { transform: rotate(90deg); }
.impact i:nth-child(4) { transform: rotate(135deg); }

@keyframes slash-sweep {
  0% { opacity: 0; translate: -120px 72px; scale: 0.28; }
  24% { opacity: 1; }
  70% { opacity: 1; translate: 24px -6px; scale: 1; }
  100% { opacity: 0; translate: 48px -14px; scale: 1.18; }
}

@keyframes slash-spark {
  0%, 42% { opacity: 0; translate: 0 0; scale: 0.3; }
  65% { opacity: 1; }
  100% { opacity: 0; translate: var(--spark-x) var(--spark-y); scale: 1.3; }
}

@keyframes vine-grow {
  0% { opacity: 0; scale: 0 0; }
  56% { opacity: 1; scale: 1 1.08; }
  100% { opacity: 0; scale: 1.08 0.9; }
}

@keyframes leaf-burst {
  0%, 32% { opacity: 0; translate: 0 18px; scale: 0.2; }
  55% { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: var(--leaf-x) var(--leaf-y); rotate: 160deg; scale: 0.75; }
}

@keyframes projectile-flight {
  0% { opacity: 0; translate: -58px 34px; scale: 0.25; }
  25% { opacity: 1; scale: 1; }
  78% { opacity: 1; translate: 215px -4px; scale: 1.14; }
  100% { opacity: 0; translate: 240px -8px; scale: 1.55; }
}

@keyframes magic-pulse {
  from { scale: 0.88; filter: hue-rotate(-8deg); }
  to { scale: 1.08; filter: hue-rotate(12deg); }
}

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

@keyframes bubble-wobble {
  from { transform: scale(0.9, 1.04) rotate(-4deg); }
  to { transform: scale(1.05, 0.92) rotate(5deg); }
}

@keyframes bubble-ring {
  0% { rotate: 0deg; scale: 0.86; opacity: 0.65; }
  50% { scale: 1.08; opacity: 1; }
  100% { rotate: 360deg; scale: 0.86; opacity: 0.65; }
}

@keyframes mote-trail {
  0% { opacity: 0; translate: 0 0; scale: 1; }
  28% { opacity: 1; }
  100% { opacity: 0; translate: var(--mote-x) var(--mote-y); scale: 0.2; }
}

@keyframes bubble-trail {
  0% { opacity: 0; translate: 0 0; scale: 0.35; }
  28% { opacity: 1; }
  72% { opacity: 0.85; }
  100% { opacity: 0; translate: var(--mote-x) var(--mote-y); scale: 1.35; }
}

@keyframes wind-rush {
  0% { opacity: 0; translate: -80px 38px; scale: 0.45 0.8; }
  34% { opacity: 1; }
  78% { opacity: 1; translate: 176px -8px; scale: 1.08; }
  100% { opacity: 0; translate: 212px -12px; scale: 1.28 0.9; }
}

@keyframes wind-ribbon {
  from { opacity: 0.52; scale: 0.78 0.72; translate: -15px 3px; }
  to { opacity: 1; scale: 1.08 1; translate: 12px -3px; }
}

@keyframes wind-spark {
  0%, 35% { opacity: 0; translate: 0 0; }
  58% { opacity: 1; }
  100% { opacity: 0; translate: var(--wind-x) var(--wind-y); rotate: 200deg; }
}

@keyframes frost-bloom {
  0% { opacity: 0; scale: 0.35; filter: brightness(2); }
  42% { opacity: 1; scale: 1; }
  78% { opacity: 1; scale: 1.06; }
  100% { opacity: 0; scale: 1.16; filter: brightness(1.35); }
}

@keyframes frost-ring {
  0% { opacity: 0; scale: 0.15; rotate: -35deg; }
  48% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.4; rotate: 35deg; }
}

@keyframes shard-grow {
  0% { opacity: 0; scale: 0 0; }
  52% { opacity: 1; scale: 1 1.05; }
  100% { opacity: 0.35; scale: 1 0.92; }
}

@keyframes snow-burst {
  0%, 24% { opacity: 0; translate: 0 0; scale: 0.2; }
  48% { opacity: 1; }
  100% { opacity: 0; translate: var(--snow-x) var(--snow-y); rotate: 180deg; scale: 1.2; }
}

@keyframes thunder-flash {
  0% { opacity: 0; filter: brightness(2.4); }
  18% { opacity: 1; }
  46% { opacity: 0.45; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes bolt-drop {
  0% { opacity: 0; translate: 0 -120px; scale: 0.75 1.4; }
  36% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0.8; }
}

@keyframes branch-strike {
  0% { opacity: 0; scale: 0.2 0; }
  42% { opacity: 1; scale: 1; }
  100% { opacity: 0; }
}

@keyframes thunder-spark {
  0%, 35% { opacity: 0; translate: 0 0; scale: 0.2; }
  58% { opacity: 1; }
  100% { opacity: 0; translate: var(--bolt-x) var(--bolt-y); scale: 1.3; }
}

@keyframes impact-burst {
  0%, 22% { opacity: 0; transform: scale(0.12) rotate(-18deg); }
  42% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1.45) rotate(18deg); }
}

@keyframes player-cast {
  0%, 100% { translate: 0 0; }
  24% { translate: -7px 2px; }
  52% { translate: 18px -5px; }
  72% { translate: 12px -2px; }
}

@keyframes enemy-hit {
  0%, 100% { translate: 0 0; filter: none; }
  42% { translate: 7px -2px; filter: brightness(2.8) saturate(0); }
  57% { translate: -8px 3px; filter: brightness(0.8) saturate(2); }
  72% { translate: 5px 0; filter: brightness(2); }
}

@keyframes scene-glint {
  0%, 24%, 100% { filter: none; }
  48% { filter: brightness(1.28) saturate(1.25); }
}

@keyframes thunder-shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(4px, -2px); }
  75% { transform: translate(-2px, -1px); }
}

.enemy-attacking .enemy-zone {
  animation: enemy-lunge 0.55s ease-in-out;
}

.enemy-attacking .player-zone {
  animation: player-hit 0.55s steps(3);
}

@keyframes enemy-lunge {
  0%, 100% { translate: 0 0; }
  50% { translate: -95px 18px; scale: 1.12; }
}

@keyframes player-hit {
  0%, 100% { translate: 0 0; filter: none; }
  30% { translate: -10px 0; filter: brightness(2) sepia(1) saturate(4); }
  60% { translate: 12px 0; filter: brightness(0.7); }
}

.battle-info {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  margin-bottom: 10px;
}

.combo {
  min-width: 80px;
  padding: 9px;
  display: grid;
  place-items: center;
  color: #8393ad;
  background: #0a1222;
  border: 2px solid #354966;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.combo.hot {
  color: var(--gold);
  border-color: #a77d22;
  text-shadow: 0 0 9px rgba(255, 211, 90, 0.7);
}

.message {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  color: #dbe7fa;
  background: #0e192c;
  border: 2px solid #354966;
  border-left: 0;
  font-size: 0.82rem;
}

.message.success { color: #c8fbd3; }
.message.error { color: #ffd2d2; }

.problem-card {
  padding: 12px 14px;
  background: #f7f0dc;
  color: #192131;
  border: 5px double #8a7141;
}

.equation {
  padding: 1px 0 10px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.34em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 8vw, 2.7rem);
  font-weight: 800;
  text-align: center;
}

.fraction {
  min-width: 1.45em;
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  line-height: 1.02;
  vertical-align: middle;
}

.fraction > span {
  min-height: 1.05em;
  display: grid;
  place-items: center;
  padding-inline: 0.18em;
}

.fraction > span:first-child {
  border-bottom: 3px solid currentColor;
}

.equation-equals {
  margin-inline: 0.08em;
}

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

.answer-row label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 900;
}

.answer-input {
  width: 100%;
  min-height: 52px;
  padding: 5px 12px;
  color: #10213c;
  background: #fff;
  border: 3px solid #263c5d;
  border-radius: 2px;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.answer-input:focus {
  border-color: #2c73bd;
  outline: 3px solid rgba(62, 145, 226, 0.3);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.key {
  min-height: 48px;
  color: var(--ink);
  background: #23395d;
  border: 2px solid #6e87ae;
  border-radius: 3px;
  box-shadow: inset 0 -4px 0 #13243f;
  font-size: 1rem;
  font-weight: 900;
}

.key:active {
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 #13243f;
}

.action-row {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.hint-button,
.attack-button {
  min-height: 52px;
  border-radius: 3px;
  font-weight: 900;
}

.hint-button {
  color: #dce9ff;
  background: #152946;
  border: 2px solid #627fa9;
}

.attack-button {
  color: #171d30;
  background: var(--gold);
  border: 3px solid #fff2ac;
  box-shadow: inset 0 -5px 0 #b7831e;
  font-size: 1rem;
}

.attack-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
}

.attack-button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: inset 0 -3px 0 #b7831e;
}

.hint-text {
  margin: 9px 0 0;
  padding: 10px 12px;
  color: #162131;
  background: #dceeff;
  border: 2px solid #76a9da;
  font-size: 0.83rem;
}

.result-card {
  padding: 18px;
  color: #1b2130;
  background: #f7f0dc;
  border: 5px double #8a7141;
  text-align: center;
}

.result-kicker {
  margin: 0 0 4px;
  color: #a06e11;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.result-card h3 {
  margin: 0 0 13px;
  font-size: 1.3rem;
}

.result-card > p:not(.result-kicker) {
  color: #5c5a59;
  font-size: 0.86rem;
}

.reward {
  margin: 0 auto 14px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
}

.reward span { color: #6d634d; font-size: 0.75rem; }
.reward strong { color: #9b6613; font-size: 1.35rem; }

.result-card .attack-button {
  width: min(100%, 360px);
}

@media (max-width: 620px) {
  .game-header {
    grid-template-columns: 1fr auto;
  }

  .header-stats {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sound-button {
    grid-column: 2;
    grid-row: 1;
  }

  .role-grid {
    grid-template-columns: 1fr;
  }

  .role-card {
    min-height: 128px;
    display: grid;
    grid-template-columns: 102px 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: start;
    text-align: left;
  }

  .role-stage {
    grid-row: 1 / 3;
  }

  .select-word {
    margin-top: 0;
  }

  .battlefield {
    height: 230px;
    padding-inline: 10px;
  }

  .battle-sprite {
    --scale: 4;
  }

  .enemy-zone {
    width: 155px;
    min-width: 155px;
  }

  .enemy-sprite,
  .enemy-zone.aqua .enemy-sprite {
    width: 145px;
    height: 145px;
  }

  .boss-sprite {
    width: 156px;
    height: 156px;
  }

  .enemy-zone::before {
    width: 132px;
  }

  .unit-label,
  .enemy-hud {
    min-width: 112px;
  }

  .floating-enemy-hud {
    top: 9px;
    right: 9px;
    width: 48%;
    min-width: 132px;
    padding: 6px 7px 8px;
  }

  .keypad {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 390px) {
  .app-shell {
    padding-inline: 8px;
  }

  .brand-rune {
    width: 36px;
    height: 36px;
  }

  .header-stats span {
    min-height: 32px;
  }

  .battle-panel,
  .role-select {
    padding: 13px;
  }

  .battlefield {
    height: 215px;
  }

  .player-zone,
  .enemy-zone {
    min-width: 108px;
  }

  .enemy-zone {
    width: 140px;
  }

  .enemy-sprite,
  .enemy-zone.aqua .enemy-sprite {
    width: 132px;
    height: 132px;
  }

  .boss-sprite {
    width: 142px;
    height: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-sprite,
  .enemy-zone,
  .enemy-zone::before,
  .enemy-sprite,
  .scene-aqua::before,
  .scene-violet::before,
  .attacking .fx,
  .attacking .impact,
  .enemy-attacking .enemy-zone,
  .enemy-attacking .player-zone,
  .attacking .player-zone,
  .attacking .enemy-sprite,
  .attacking::before,
  .attack-thunder {
    animation: none;
  }
}

/* Play-test expansion: navigation, map, exchange, and limit breaks */
.brand-button {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.brand-button > span:last-child {
  display: grid;
  gap: 3px;
}

.brand-button strong {
  font-size: clamp(1.05rem, 3.5vw, 1.55rem);
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.brand-button small {
  color: var(--muted);
  font-size: 0.68rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-button {
  min-height: 44px;
  padding: 7px 10px;
  color: #dce8fb;
  background: #101c31;
  border: 2px solid #536c92;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.menu-button.active {
  color: #171d30;
  background: var(--gold);
  border-color: #fff0a2;
}

.map-panel,
.shop-panel {
  margin-top: 16px;
  padding: clamp(16px, 4vw, 24px);
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-title-row h2 {
  margin: 0;
  font-size: clamp(1.4rem, 5vw, 2rem);
}

.boss-distance,
.wallet {
  padding: 8px 11px;
  color: var(--gold);
  background: #0a1324;
  border: 2px solid #806728;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.wallet b {
  font-size: 1.15rem;
}

.map-summary {
  margin-top: 15px;
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #dce9fa;
  background: #0c172a;
  border: 2px solid #435c82;
  font-size: 0.82rem;
}

.map-summary strong {
  color: var(--gold);
}

.stage-map {
  margin: 12px 0 0;
  padding: 10px 8px 8px;
  list-style: none;
  background:
    radial-gradient(circle at 72% 14%, rgba(255, 219, 111, 0.1), transparent 23%),
    linear-gradient(155deg, #0a1322, #111f36);
  border: 2px solid #506a91;
}

.map-node {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 60px;
  align-items: center;
  gap: 10px;
  color: #73849e;
}

.map-node .path-line {
  position: absolute;
  left: 23px;
  top: 50%;
  width: 3px;
  height: 100%;
  z-index: 0;
  background: #334761;
}

.map-node:last-child .path-line {
  display: none;
}

.node-mark {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #111c2d;
  border: 3px solid #3c4d65;
  box-shadow: inset 0 -4px 0 #080e18;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 900;
}

.map-node.cleared {
  color: #a7dcb3;
}

.map-node.cleared .node-mark {
  color: #122319;
  background: #74d68d;
  border-color: #c5f7d0;
}

.map-node.cleared .path-line {
  background: #5cbd76;
}

.map-node.current {
  color: var(--ink);
}

.map-node.current .node-mark {
  color: #171c2d;
  background: var(--gold);
  border-color: #fff1a5;
  animation: current-node 0.9s steps(2) infinite;
}

.map-node.boss-node .node-mark {
  border-radius: 50%;
  color: #ffdcff;
  background: #54236a;
  border-color: #d484f1;
  box-shadow: inset 0 0 13px #a545cc, 0 0 12px rgba(221, 115, 255, 0.55);
}

.map-node.boss-node.current .node-mark {
  color: #21102a;
  background: #f08cff;
  border-color: #ffe3ff;
}

.node-copy {
  display: grid;
  gap: 4px;
}

.node-copy strong {
  font-size: 0.9rem;
}

.node-copy small {
  font-size: 0.7rem;
}

.map-party {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: end center;
  overflow: hidden;
}

.map-party::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 211, 90, 0.28);
  box-shadow: 0 0 12px var(--gold);
}

.map-sprite {
  --scale: 2;
  position: relative;
  z-index: 1;
}

.map-actions {
  margin-top: 12px;
  display: grid;
}

.test-menu {
  margin-top: 16px;
  padding: 10px 12px;
  color: #9fb0c8;
  background: #091120;
  border: 1px dashed #4b6384;
  font-size: 0.72rem;
}

.test-menu summary {
  color: #b9cae2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}

.test-menu p {
  margin: 8px 0;
}

.test-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.test-buttons button {
  min-height: 42px;
  padding: 6px;
  color: #dbe8f8;
  background: #172640;
  border: 1px solid #60799e;
  font-size: 0.7rem;
  cursor: pointer;
}

.test-buttons button:last-child {
  color: #ffc1c1;
  border-color: #915c65;
}

.test-buttons button:disabled {
  opacity: 0.38;
}

@keyframes current-node {
  50% { filter: brightness(1.3); box-shadow: 0 0 14px rgba(255, 220, 92, 0.8); }
}

.shop-lead,
.shop-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.shop-item {
  position: relative;
  min-height: 156px;
  padding: 10px;
  display: grid;
  grid-template-columns: 82px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 8px 10px;
  color: var(--ink);
  background: #0d1728;
  border: 2px solid #405677;
  box-shadow: inset 0 -5px 0 #070d18;
}

.shop-item.equipped {
  border-color: var(--gold);
  box-shadow: inset 0 -5px 0 #070d18, 0 0 13px rgba(255, 211, 90, 0.34);
}

.style-preview {
  position: relative;
  grid-row: 1 / 4;
  width: 82px;
  height: 118px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background: linear-gradient(transparent 68%, rgba(71, 100, 92, 0.55) 68%);
  border: 1px solid #486083;
}

.preview-aura {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 24px;
  border-radius: 50%;
  background: rgba(135, 160, 196, 0.2);
  box-shadow: 0 0 10px #6c87ae;
  animation: enemy-aura 1.3s ease-in-out infinite;
}

.shop-sprite {
  --scale: 3;
  position: relative;
  z-index: 1;
}

.shop-copy h3 {
  margin: 0;
  font-size: 0.95rem;
}

.shop-copy p {
  margin: 5px 0 0;
  color: #a8b8cf;
  font-size: 0.69rem;
  line-height: 1.55;
}

.shop-price {
  align-self: end;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 900;
}

.shop-item button {
  min-height: 38px;
  color: #1a2132;
  background: var(--gold);
  border: 2px solid #fff1a2;
  font-weight: 900;
  cursor: pointer;
}

.shop-item button:disabled {
  color: #96a2b7;
  background: #24334b;
  border-color: #4d607e;
  cursor: default;
}

.theme-forest .preview-aura,
.player-zone.theme-forest .player-aura {
  background: radial-gradient(ellipse, rgba(199, 255, 126, 0.72), rgba(54, 185, 83, 0.28) 55%, transparent 72%);
  box-shadow: 0 0 18px #63e676, 0 0 34px rgba(162, 255, 93, 0.45);
}

.theme-aqua .preview-aura,
.player-zone.theme-aqua .player-aura {
  background: radial-gradient(ellipse, rgba(210, 255, 255, 0.76), rgba(49, 187, 255, 0.3) 58%, transparent 73%);
  box-shadow: 0 0 18px #57d9ff, 0 0 34px rgba(82, 226, 255, 0.5);
}

.theme-lunar .preview-aura,
.player-zone.theme-lunar .player-aura {
  background: radial-gradient(ellipse, rgba(255, 213, 255, 0.78), rgba(194, 76, 255, 0.32) 58%, transparent 73%);
  box-shadow: 0 0 18px #f074ff, 0 0 35px rgba(122, 89, 255, 0.54);
}

.theme-gold .preview-aura,
.player-zone.theme-gold .player-aura {
  background: radial-gradient(ellipse, #fff6bd, rgba(255, 184, 39, 0.42) 55%, transparent 73%);
  box-shadow: 0 0 18px #ffd24d, 0 0 38px rgba(255, 143, 28, 0.56);
}

.shop-item.theme-forest { border-color: #4e9a5c; }
.shop-item.theme-aqua { border-color: #4f9fb9; }
.shop-item.theme-lunar { border-color: #9b58b7; }
.shop-item.theme-gold { border-color: #ad812c; }

.player-zone .player-aura {
  position: absolute;
  left: 50%;
  bottom: -3px;
  z-index: -1;
  width: 112px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(176, 199, 230, 0.32), transparent 72%);
  box-shadow: 0 0 12px rgba(152, 184, 227, 0.55);
  transform: translateX(-50%);
  animation: enemy-aura 1.4s ease-in-out infinite;
}

.player-zone.theme-forest .unit-label { border-color: #78dc86; box-shadow: inset 0 0 9px rgba(67, 211, 92, 0.25); }
.player-zone.theme-aqua .unit-label { border-color: #70dcf2; box-shadow: inset 0 0 9px rgba(60, 193, 255, 0.27); }
.player-zone.theme-lunar .unit-label { border-color: #e27bf0; box-shadow: inset 0 0 10px rgba(209, 80, 255, 0.3); }
.player-zone.theme-gold .unit-label { color: #fff4c1; border-color: #ffd35a; box-shadow: inset 0 0 11px rgba(255, 193, 54, 0.3); }

.scene-forest {
  background:
    radial-gradient(circle at 74% 34%, rgba(123, 237, 116, 0.28), transparent 27%),
    linear-gradient(transparent 68%, rgba(26, 67, 38, 0.98) 68%),
    linear-gradient(180deg, #091a1b 0%, #21492f 68%, #183923 68%);
  border-color: #5fa66a;
}

.scene-forest::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(145, 236, 116, 0.13), transparent 28%),
    repeating-linear-gradient(112deg, transparent 0 35px, rgba(114, 215, 105, 0.05) 36px 39px, transparent 40px 68px);
}

.scene-starlight {
  background:
    radial-gradient(circle at 74% 35%, rgba(134, 224, 255, 0.3), transparent 27%),
    linear-gradient(transparent 68%, rgba(34, 47, 75, 0.98) 68%),
    linear-gradient(180deg, #100f29 0%, #304871 68%, #202c4b 68%);
  border-color: #849bd9;
}

.scene-starlight::before {
  background:
    radial-gradient(circle at 14% 23%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 38% 12%, #a8eaff 0 2px, transparent 3px),
    radial-gradient(circle at 58% 32%, #e6c9ff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, #fff 0 1px, transparent 2px);
}

.enemy-zone.forest::before {
  border-color: rgba(128, 240, 119, 0.76);
  background: radial-gradient(ellipse, rgba(74, 198, 80, 0.43), transparent 68%);
  box-shadow: 0 0 20px rgba(85, 230, 92, 0.6);
}

.enemy-zone.starlight::before {
  border-color: rgba(145, 214, 255, 0.78);
  background: radial-gradient(ellipse, rgba(103, 139, 255, 0.45), transparent 68%);
  box-shadow: 0 0 22px rgba(128, 195, 255, 0.66);
}

.stage-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-tools > span {
  color: #9fb0c8;
  font-size: 0.66rem;
  white-space: nowrap;
}

.hp-track {
  position: relative;
}

.hp-track > b {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.48rem;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.ultimate-gauge {
  min-height: 34px;
  margin: -2px 0 8px;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: auto repeat(3, 1fr) auto;
  align-items: center;
  gap: 5px;
  color: #b7c6dc;
  background: #080f1e;
  border: 2px solid #354967;
  font-size: 0.66rem;
  font-weight: 900;
}

.ultimate-gauge i {
  height: 13px;
  display: block;
  background: #1c2a41;
  border: 1px solid #3f5371;
}

.ultimate-gauge i.filled {
  background: linear-gradient(90deg, #ffbe3d, #fff17b);
  border-color: #fff0a0;
  box-shadow: 0 0 8px rgba(255, 208, 66, 0.72);
}

.ultimate-gauge b {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ultimate-select {
  position: relative;
  padding: 16px;
  overflow: hidden;
  color: #fff5db;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 207, 68, 0.25), transparent 38%),
    linear-gradient(135deg, #251838, #10192c 58%, #35202d);
  border: 4px double #ffcf4a;
  box-shadow: inset 0 0 28px rgba(255, 191, 52, 0.14), 0 0 14px rgba(255, 200, 62, 0.26);
  text-align: center;
}

.ultimate-select::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: conic-gradient(transparent 0 9%, rgba(255, 236, 144, 0.08) 10% 12%, transparent 13% 21%, rgba(255, 192, 93, 0.06) 22% 25%, transparent 26%);
  animation: ultimate-rays 7s linear infinite;
  pointer-events: none;
}

.ultimate-kicker,
.ultimate-select h3,
.ultimate-select > p,
.ultimate-grid {
  position: relative;
  z-index: 1;
}

.ultimate-kicker {
  margin: 0;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.ultimate-select h3 {
  margin: 4px 0 2px;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}

.ultimate-select > p:not(.ultimate-kicker) {
  margin: 0 0 12px;
  color: #d1c6d8;
  font-size: 0.73rem;
}

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

.ultimate-grid:has(.ultimate-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ultimate-card {
  min-height: 116px;
  padding: 9px 7px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  place-items: center;
  gap: 6px;
  color: #fff6dd;
  background: rgba(12, 19, 35, 0.92);
  border: 2px solid #936e2a;
  box-shadow: inset 0 -5px 0 #070c16;
  cursor: pointer;
  touch-action: manipulation;
}

.ultimate-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #25182d;
  background: radial-gradient(circle, #fff5a8, #ffb53b);
  border: 2px solid #fff3b3;
  border-radius: 50%;
  font-weight: 900;
  box-shadow: 0 0 13px rgba(255, 202, 72, 0.72);
}

.ultimate-card strong {
  color: var(--gold);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ultimate-card small {
  color: #b9c5d7;
  font-size: 0.62rem;
  line-height: 1.45;
}

.ultimate-card:active,
.ultimate-card:focus-visible {
  transform: translateY(2px);
  border-color: #fff1a0;
  outline: none;
}

@keyframes ultimate-rays { to { rotate: 360deg; } }

/* Ultimate effect choreography */
.attack-ultimate-freedom .fx-freedom,
.attack-ultimate-forest .fx-forest,
.attack-ultimate-finisher .fx-finisher,
.attack-ultimate-abyss .fx-abyss,
.attack-ultimate-absolute .fx-absolute,
.attack-ultimate-typhoon .fx-typhoon,
.attack-ultimate-luna .fx-luna {
  display: block;
}

.attack-ultimate-freedom .impact,
.attack-ultimate-forest .impact,
.attack-ultimate-finisher .impact,
.attack-ultimate-abyss .impact,
.attack-ultimate-absolute .impact,
.attack-ultimate-typhoon .impact,
.attack-ultimate-luna .impact {
  display: none;
}

.attack-ultimate-freedom .player-zone {
  animation: freedom-jump 1.95s cubic-bezier(0.25, 0.72, 0.2, 1) both;
}

.attack-ultimate-forest .player-zone,
.attack-ultimate-finisher .player-zone,
.attack-ultimate-abyss .player-zone,
.attack-ultimate-absolute .player-zone,
.attack-ultimate-typhoon .player-zone,
.attack-ultimate-luna .player-zone {
  animation: ultimate-cast 1.9s ease-in-out both;
}

.attack-ultimate-freedom .enemy-sprite,
.attack-ultimate-forest .enemy-sprite,
.attack-ultimate-finisher .enemy-sprite,
.attack-ultimate-abyss .enemy-sprite,
.attack-ultimate-absolute .enemy-sprite,
.attack-ultimate-typhoon .enemy-sprite,
.attack-ultimate-luna .enemy-sprite {
  animation: ultimate-enemy-hit 2s steps(5) both;
}

.attack-ultimate-freedom,
.attack-ultimate-forest,
.attack-ultimate-finisher,
.attack-ultimate-abyss,
.attack-ultimate-absolute,
.attack-ultimate-typhoon,
.attack-ultimate-luna {
  animation: ultimate-scene 2.05s ease-out both;
}

.fx-freedom {
  inset: 0;
  mix-blend-mode: screen;
}

.freedom-arc {
  right: -10px;
  top: 25px;
  width: 330px;
  height: 205px;
  border-bottom: 15px solid #f3fff1;
  border-radius: 0 0 62% 55%;
  box-shadow: 0 8px 0 #71ef82, 0 14px 25px #5bff73;
  transform: rotate(-52deg);
  transform-origin: 55% 62%;
  animation: freedom-cut 1.22s 0.48s cubic-bezier(0.13, 0.78, 0.18, 1) both;
}

.freedom-arc.a2 {
  top: 3px;
  border-width: 5px;
  opacity: 0.7;
  transform: rotate(-42deg) scale(0.86);
  animation-delay: 0.58s;
}

.freedom-crater {
  right: 12px;
  bottom: 4px;
  width: 245px;
  height: 58px;
  border: 8px solid #caff8c;
  border-radius: 50%;
  box-shadow: 0 0 18px #efffc2, inset 0 0 18px #65ee72;
  animation: crater-burst 0.82s 0.92s ease-out both;
}

.fx-freedom b {
  right: 128px;
  bottom: 42px;
  width: 9px;
  height: 9px;
  background: #fff;
  box-shadow: 0 0 9px #95ff8f;
  transform: rotate(45deg);
  animation: ultimate-spark 0.9s 0.86s ease-out both;
}

.fx-freedom b:nth-of-type(1) { --ux: -110px; --uy: -55px; }
.fx-freedom b:nth-of-type(2) { --ux: 85px; --uy: -72px; animation-delay: 0.94s; }
.fx-freedom b:nth-of-type(3) { --ux: -75px; --uy: 20px; animation-delay: 1.02s; }
.fx-freedom b:nth-of-type(4) { --ux: 102px; --uy: 16px; animation-delay: 1.08s; }

.fx-forest {
  right: 0;
  bottom: 0;
  width: 55%;
  height: 100%;
  filter: drop-shadow(0 0 9px rgba(114, 255, 99, 0.82));
  mix-blend-mode: screen;
}

.forest-root {
  left: 50%;
  bottom: -10px;
  width: 18px;
  height: 225px;
  border-radius: 65% 30% 45% 30%;
  background: linear-gradient(90deg, #386c37, #d9ff8b 48%, #4bd262);
  transform-origin: 50% 100%;
  animation: forest-rise 0.92s 0.32s cubic-bezier(0.12, 0.9, 0.2, 1) both;
}

.forest-root.r1 { transform: rotate(-32deg); }
.forest-root.r2 { left: 43%; transform: rotate(2deg); animation-delay: 0.4s; }
.forest-root.r3 { left: 47%; transform: rotate(34deg); animation-delay: 0.48s; }

.forest-trunk {
  left: 42%;
  bottom: 0;
  width: 58px;
  height: 205px;
  border-radius: 48% 44% 18% 20%;
  background: linear-gradient(90deg, #4a4123, #d6f26c 48%, #46793d);
  box-shadow: inset 8px 0 0 rgba(40, 70, 28, 0.5), 0 0 18px #84ef70;
  transform-origin: 50% 100%;
  animation: forest-trunk 1.1s 0.48s cubic-bezier(0.1, 0.85, 0.18, 1) both;
}

.forest-crown {
  left: 17%;
  top: 3px;
  width: 245px;
  height: 142px;
  border-radius: 48%;
  background:
    radial-gradient(circle at 26% 55%, #efff9b 0 11%, #62d95e 12% 26%, transparent 27%),
    radial-gradient(circle at 50% 34%, #f0ffad 0 13%, #4bd565 14% 30%, transparent 31%),
    radial-gradient(circle at 73% 56%, #dfff85 0 12%, #3fc65f 13% 28%, transparent 29%),
    radial-gradient(ellipse, rgba(88, 220, 86, 0.86), transparent 72%);
  box-shadow: 0 0 28px rgba(111, 255, 99, 0.85);
  animation: forest-crown 1s 0.82s ease-out both;
}

.fx-forest b {
  left: 50%;
  top: 44%;
  width: 15px;
  height: 8px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #f1ff9b, #45d464);
  animation: forest-leaf 1.05s 0.95s ease-out both;
}

.fx-forest b:nth-of-type(1) { --ux:-118px; --uy:-72px; }
.fx-forest b:nth-of-type(2) { --ux:-80px; --uy:-114px; animation-delay:1.02s; }
.fx-forest b:nth-of-type(3) { --ux:-35px; --uy:-132px; animation-delay:1.08s; }
.fx-forest b:nth-of-type(4) { --ux:22px; --uy:-128px; animation-delay:1.12s; }
.fx-forest b:nth-of-type(5) { --ux:83px; --uy:-96px; animation-delay:1.16s; }
.fx-forest b:nth-of-type(6) { --ux:121px; --uy:-53px; animation-delay:1.2s; }
.fx-forest b:nth-of-type(7) { --ux:-108px; --uy:16px; animation-delay:1.24s; }
.fx-forest b:nth-of-type(8) { --ux:-51px; --uy:38px; animation-delay:1.28s; }
.fx-forest b:nth-of-type(9) { --ux:54px; --uy:32px; animation-delay:1.32s; }
.fx-forest b:nth-of-type(10) { --ux:112px; --uy:7px; animation-delay:1.36s; }

.fx-finisher,
.fx-luna {
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  mix-blend-mode: screen;
}

.finisher-core,
.luna-core {
  left: 50%;
  top: 50%;
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, #ffe0ff 9% 18%, #fa65ff 25% 40%, #7135dc 58%, transparent 72%);
  box-shadow: 0 0 24px #fff, 0 0 52px #f455ff, 0 0 90px #763eff;
  transform: translate(-50%, -50%);
  animation: finisher-core 1.62s 0.3s ease-in-out both;
}

.finisher-ring,
.luna-ring {
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  border: 6px double #ffcaff;
  border-radius: 50%;
  box-shadow: 0 0 17px #df62ff;
  animation: finisher-ring 1.25s 0.45s ease-out both;
}

.finisher-ring.f2,
.luna-ring.l2 { animation-delay: 0.68s; }
.finisher-ring.f3,
.luna-ring.l3 { animation-delay: 0.9s; }

.fx-finisher b,
.fx-luna b {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff0ff;
  box-shadow: 0 0 10px #ff68f2;
  animation: ultimate-spark 1.1s 0.65s ease-out both;
}

.fx-finisher b:nth-of-type(1), .fx-luna b:nth-of-type(1) { --ux:-125px; --uy:-82px; }
.fx-finisher b:nth-of-type(2), .fx-luna b:nth-of-type(2) { --ux:-48px; --uy:-132px; animation-delay:.72s; }
.fx-finisher b:nth-of-type(3), .fx-luna b:nth-of-type(3) { --ux:49px; --uy:-128px; animation-delay:.78s; }
.fx-finisher b:nth-of-type(4), .fx-luna b:nth-of-type(4) { --ux:126px; --uy:-73px; animation-delay:.84s; }
.fx-finisher b:nth-of-type(5), .fx-luna b:nth-of-type(5) { --ux:-137px; --uy:34px; animation-delay:.9s; }
.fx-finisher b:nth-of-type(6), .fx-luna b:nth-of-type(6) { --ux:-54px; --uy:105px; animation-delay:.96s; }
.fx-finisher b:nth-of-type(7), .fx-luna b:nth-of-type(7) { --ux:58px; --uy:101px; animation-delay:1.02s; }
.fx-finisher b:nth-of-type(8), .fx-luna b:nth-of-type(8) { --ux:137px; --uy:27px; animation-delay:1.08s; }

.fx-abyss {
  right: 1%;
  top: 2%;
  width: 52%;
  height: 95%;
  mix-blend-mode: screen;
}

.abyss-bubble {
  left: 50%;
  top: 50%;
  width: 215px;
  height: 215px;
  border: 7px solid rgba(215, 255, 255, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 23%, rgba(255,255,255,.95) 0 5%, transparent 7%),
    radial-gradient(circle at 68% 70%, rgba(34,121,255,.6), transparent 40%),
    rgba(63, 201, 255, 0.2);
  box-shadow: inset 20px 18px 35px rgba(255,255,255,.26), inset -22px -23px 35px rgba(21,72,218,.62), 0 0 28px #8af4ff, 0 0 70px #2aa6ff;
  animation: abyss-collapse 1.55s 0.25s ease-in-out both;
}

.abyss-ring {
  left: 50%;
  top: 50%;
  width: 235px;
  height: 235px;
  border: 5px double #d8ffff;
  border-radius: 50%;
  animation: abyss-ring 1.75s 0.22s linear both;
}

.abyss-wave {
  left: 50%;
  top: 50%;
  width: 280px;
  height: 70px;
  border: 8px solid #c9ffff;
  border-radius: 50%;
  box-shadow: 0 0 18px #41c9ff;
  animation: abyss-wave 0.8s 1.08s ease-out both;
}

.abyss-wave.w2 { animation-delay: 1.22s; }

.fx-abyss b {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #e4ffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #5edaff;
  animation: ultimate-spark 1.05s 0.9s ease-out both;
}

.fx-abyss b:nth-of-type(1) { --ux:-128px; --uy:-75px; }
.fx-abyss b:nth-of-type(2) { --ux:-48px; --uy:-130px; animation-delay:.96s; }
.fx-abyss b:nth-of-type(3) { --ux:52px; --uy:-126px; animation-delay:1.02s; }
.fx-abyss b:nth-of-type(4) { --ux:132px; --uy:-66px; animation-delay:1.08s; }
.fx-abyss b:nth-of-type(5) { --ux:-135px; --uy:35px; animation-delay:1.14s; }
.fx-abyss b:nth-of-type(6) { --ux:-50px; --uy:104px; animation-delay:1.2s; }
.fx-abyss b:nth-of-type(7) { --ux:57px; --uy:98px; animation-delay:1.26s; }
.fx-abyss b:nth-of-type(8) { --ux:137px; --uy:26px; animation-delay:1.32s; }

.fx-absolute {
  inset: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 72% 70%, rgba(125, 230, 255, 0.34), transparent 44%);
  animation: absolute-frost 2s ease-out both;
}

.fx-absolute i {
  bottom: -8px;
  width: 52px;
  height: var(--ice-height, 175px);
  background: linear-gradient(100deg, #fff, #9eecff 38%, #4796ea 70%, #624cc8);
  clip-path: polygon(50% 0, 100% 78%, 70% 100%, 25% 94%, 0 78%);
  transform-origin: 50% 100%;
  animation: absolute-spire 1.15s var(--ice-delay, .35s) cubic-bezier(.12,.88,.18,1) both;
}

.fx-absolute i:nth-of-type(1) { left:2%; --ice-height:120px; --ice-delay:.25s; transform:rotate(-13deg); }
.fx-absolute i:nth-of-type(2) { left:13%; --ice-height:178px; --ice-delay:.31s; transform:rotate(-8deg); }
.fx-absolute i:nth-of-type(3) { left:25%; --ice-height:142px; --ice-delay:.37s; transform:rotate(7deg); }
.fx-absolute i:nth-of-type(4) { left:38%; --ice-height:210px; --ice-delay:.43s; transform:rotate(-5deg); }
.fx-absolute i:nth-of-type(5) { left:51%; --ice-height:160px; --ice-delay:.49s; transform:rotate(9deg); }
.fx-absolute i:nth-of-type(6) { left:63%; --ice-height:225px; --ice-delay:.55s; transform:rotate(-4deg); }
.fx-absolute i:nth-of-type(7) { left:75%; --ice-height:170px; --ice-delay:.61s; transform:rotate(8deg); }
.fx-absolute i:nth-of-type(8) { left:85%; --ice-height:205px; --ice-delay:.67s; transform:rotate(-8deg); }
.fx-absolute i:nth-of-type(9) { left:94%; --ice-height:130px; --ice-delay:.73s; transform:rotate(12deg); }

.fx-absolute b {
  left: 68%;
  top: 42%;
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 0 10px #71ddff;
  transform: rotate(45deg);
  animation: ultimate-spark 1.1s .72s ease-out both;
}

.fx-absolute b:nth-of-type(1) { --ux:-220px; --uy:-100px; }
.fx-absolute b:nth-of-type(2) { --ux:-145px; --uy:-135px; animation-delay:.78s; }
.fx-absolute b:nth-of-type(3) { --ux:-65px; --uy:-118px; animation-delay:.84s; }
.fx-absolute b:nth-of-type(4) { --ux:12px; --uy:-150px; animation-delay:.9s; }
.fx-absolute b:nth-of-type(5) { --ux:90px; --uy:-105px; animation-delay:.96s; }
.fx-absolute b:nth-of-type(6) { --ux:-205px; --uy:42px; animation-delay:1.02s; }
.fx-absolute b:nth-of-type(7) { --ux:-110px; --uy:71px; animation-delay:1.08s; }
.fx-absolute b:nth-of-type(8) { --ux:-20px; --uy:64px; animation-delay:1.14s; }
.fx-absolute b:nth-of-type(9) { --ux:75px; --uy:52px; animation-delay:1.2s; }
.fx-absolute b:nth-of-type(10) { --ux:125px; --uy:5px; animation-delay:1.26s; }

.fx-typhoon {
  inset: 0;
  mix-blend-mode: screen;
  overflow: hidden;
}

.cyclone {
  top: 4%;
  width: 43%;
  height: 92%;
  animation: cyclone-crash 1.55s .25s cubic-bezier(.18,.78,.18,1) both;
}

.cyclone.left { left: -5%; --cyclone-start: -150px; --cyclone-x: 150px; }
.cyclone.right { right: -5%; --cyclone-start: 150px; --cyclone-x: -150px; animation-delay: .34s; }

.cyclone b {
  left: 50%;
  top: var(--wind-top, 10%);
  width: var(--wind-width, 190px);
  height: 38px;
  border-top: 11px solid rgba(225,255,247,.96);
  border-radius: 50%;
  box-shadow: 0 -5px 12px #65efcf;
  transform: translateX(-50%) rotate(var(--wind-rotate, 0deg));
  animation: cyclone-band .34s linear infinite alternate;
}

.cyclone b:nth-child(1) { --wind-top: 8%; --wind-width: 80px; --wind-rotate:-8deg; }
.cyclone b:nth-child(2) { --wind-top: 25%; --wind-width: 120px; --wind-rotate:6deg; }
.cyclone b:nth-child(3) { --wind-top: 43%; --wind-width: 155px; --wind-rotate:-5deg; }
.cyclone b:nth-child(4) { --wind-top: 61%; --wind-width: 188px; --wind-rotate:7deg; }
.cyclone b:nth-child(5) { --wind-top: 79%; --wind-width: 220px; --wind-rotate:-6deg; }

.typhoon-core {
  left: 72%;
  top: 50%;
  width: 215px;
  height: 215px;
  border: 12px double #e9fff7;
  border-radius: 50%;
  box-shadow: 0 0 25px #6ef5d2, inset 0 0 38px #9fffe6;
  animation: typhoon-core 1s 1s ease-out both;
}

.fx-luna {
  width: 60%;
  background:
    radial-gradient(circle at 48% 22%, rgba(255,199,246,.22) 0 2%, transparent 3%),
    radial-gradient(circle at 66% 34%, rgba(255,224,140,.24) 0 2%, transparent 3%),
    radial-gradient(circle at 31% 50%, rgba(255,153,224,.2) 0 3%, transparent 4%);
}

.fx-luna .luna-core {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #fff 0 8%, #fff1d0 9% 15%, #ffb5ef 18% 30%, #ff5bc4 38% 52%, #9c4ee7 62%, transparent 73%);
  box-shadow: 0 0 22px #fff, 0 0 55px #ff6bd4, 0 0 95px #b854ff;
  animation-duration: 1.8s;
}

.fx-luna .luna-ring {
  border-color: #ffd5f3;
  box-shadow: 0 0 16px #ff72d5;
}

.fx-luna b:nth-of-type(9) { --ux:-105px; --uy:-154px; animation-delay:.62s; }
.fx-luna b:nth-of-type(10) { --ux:8px; --uy:-176px; animation-delay:.68s; }
.fx-luna b:nth-of-type(11) { --ux:112px; --uy:-143px; animation-delay:.74s; }
.fx-luna b:nth-of-type(12) { --ux:158px; --uy:-42px; animation-delay:.8s; }

@keyframes freedom-jump {
  0%, 100% { translate: 0 0; scale: 1; opacity: 1; }
  24% { translate: 32px -170px; scale: .82; opacity: .88; }
  44% { translate: 172px -205px; scale: .72; opacity: .6; }
  68% { translate: 318px -30px; scale: 1.1; opacity: 1; filter: brightness(2); }
  78% { translate: 250px 0; }
}

@keyframes freedom-cut {
  0%, 28% { opacity: 0; scale: .28; translate: -90px -120px; }
  45% { opacity: 1; }
  78% { opacity: 1; scale: 1; translate: 0 0; }
  100% { opacity: 0; scale: 1.25; translate: 40px 55px; }
}

@keyframes crater-burst {
  0% { opacity: 0; scale: .12; }
  45% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.65 .9; }
}

@keyframes ultimate-spark {
  0%, 22% { opacity: 0; translate: 0 0; scale: .2; }
  48% { opacity: 1; }
  100% { opacity: 0; translate: var(--ux) var(--uy); rotate: 220deg; scale: 1.3; }
}

@keyframes forest-rise {
  0% { opacity: 0; scale: 0 0; }
  58% { opacity: 1; scale: 1 1.08; }
  100% { opacity: .85; scale: 1; }
}

@keyframes forest-trunk {
  0% { opacity: 0; scale: .2 0; }
  62% { opacity: 1; scale: 1.08; }
  100% { opacity: .92; scale: 1; }
}

@keyframes forest-crown {
  0% { opacity: 0; scale: .15; filter: brightness(2.5); }
  56% { opacity: 1; scale: 1.08; }
  100% { opacity: 0; scale: 1.38; filter: brightness(1.4); }
}

@keyframes forest-leaf {
  0%, 18% { opacity: 0; scale: .2; }
  45% { opacity: 1; }
  100% { opacity: 0; translate: var(--ux) var(--uy); rotate: 260deg; scale: 1.4; }
}

@keyframes finisher-core {
  0% { opacity: 0; scale: .08; translate: -50% -50%; }
  38% { opacity: 1; scale: .36; translate: -50% -50%; }
  66% { opacity: 1; scale: 1.2; translate: -50% -50%; filter: brightness(2); }
  100% { opacity: 0; scale: 1.75; translate: -50% -50%; }
}

@keyframes finisher-ring {
  0% { opacity: 0; scale: .12; translate: -50% -50%; rotate: -35deg; }
  50% { opacity: 1; }
  100% { opacity: 0; scale: 2.15; translate: -50% -50%; rotate: 55deg; }
}

@keyframes abyss-collapse {
  0% { opacity: 0; scale: .12; translate: -50% -50%; }
  38% { opacity: 1; scale: 1.08; translate: -50% -50%; }
  70% { opacity: 1; scale: .78; translate: -50% -50%; filter: brightness(1.5); }
  82% { opacity: 1; scale: .16; translate: -50% -50%; filter: brightness(3); }
  100% { opacity: 0; scale: 1.55; translate: -50% -50%; }
}

@keyframes abyss-ring {
  0% { opacity: 0; scale: .2; translate:-50% -50%; rotate:0; }
  35% { opacity: 1; scale: 1; }
  78% { opacity: .7; scale: .72; }
  100% { opacity: 0; scale: 1.7; translate:-50% -50%; rotate:360deg; }
}

@keyframes abyss-wave {
  0% { opacity: 0; scale: .1 .4; translate:-50% -50%; }
  45% { opacity: 1; }
  100% { opacity: 0; scale: 1.35 .8; translate:-50% -50%; }
}

@keyframes absolute-frost {
  0% { opacity: 0; backdrop-filter: brightness(1); }
  35% { opacity: 1; }
  75% { opacity: 1; backdrop-filter: brightness(1.4) saturate(.5); }
  100% { opacity: 0; }
}

@keyframes absolute-spire {
  0% { opacity: 0; scale: 0 0; }
  52% { opacity: 1; scale: 1 1.08; filter: brightness(1.9); }
  100% { opacity: .65; scale: 1; }
}

@keyframes cyclone-crash {
  0% { opacity: 0; translate: var(--cyclone-start) 0; scale: .35 .8; }
  35% { opacity: 1; }
  75% { opacity: 1; translate: var(--cyclone-x) 0; scale: 1; }
  100% { opacity: 0; translate: var(--cyclone-x) 0; scale: 1.25 .85; }
}

@keyframes cyclone-band {
  from { scale: .75 .82; translate:-50% 4px; opacity:.62; }
  to { scale: 1.08 1; translate:-50% -4px; opacity:1; }
}

@keyframes typhoon-core {
  0% { opacity: 0; scale: .1; translate:-50% -50%; rotate:0; }
  45% { opacity: 1; }
  100% { opacity: 0; scale: 1.7; translate:-50% -50%; rotate:220deg; }
}

@keyframes ultimate-cast {
  0%, 100% { translate:0 0; filter:none; }
  18% { translate:-8px 0; }
  38% { translate:8px -5px; filter:brightness(1.7); }
  68% { translate:12px -8px; filter:brightness(2); }
}

@keyframes ultimate-enemy-hit {
  0%, 42%, 100% { translate:0 0; filter:none; }
  52% { translate:8px -4px; filter:brightness(3) saturate(0); }
  61% { translate:-10px 3px; filter:brightness(.7) saturate(2); }
  72% { translate:7px -2px; filter:brightness(2.4); }
  82% { translate:-5px 1px; filter:brightness(.8); }
}

@keyframes ultimate-scene {
  0%, 100% { filter:none; }
  25% { filter:brightness(.78) saturate(.9); }
  55% { filter:brightness(1.35) saturate(1.35); }
  72% { filter:brightness(1.9) saturate(.8); }
}

@media (max-width: 700px) {
  .game-header {
    grid-template-columns: 1fr auto;
  }

  .header-stats {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .header-actions .sound-button {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .brand-button strong { font-size: 1rem; }
  .brand-button small { display: none; }
  .brand-rune { width: 34px; height: 34px; font-size: 1.25rem; }
  .menu-button { min-height: 40px; padding-inline: 7px; font-size: .66rem; }
  .header-actions .sound-button { min-width: 40px; min-height: 40px; }
  .shop-grid { grid-template-columns: 1fr; }
  .test-buttons { grid-template-columns: repeat(2, 1fr); }
  .map-node { grid-template-columns: 44px minmax(0,1fr) 52px; }
  .ultimate-grid,
  .ultimate-grid:has(.ultimate-card:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .ultimate-card { min-height: 78px; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; justify-items: start; text-align:left; }
  .ultimate-card > span { grid-row:1 / 3; }
  .stage-tools > span { display:none; }
  .fx-forest,
  .fx-finisher,
  .fx-abyss,
  .fx-luna { width:68%; }
  .typhoon-core { left:70%; }
}

@media (max-width: 390px) {
  .header-actions { gap:3px; }
  .menu-button { padding-inline:5px; }
  .header-actions .sound-button { min-width:36px; }
  .map-summary { display:grid; }
  .section-title-row { align-items:flex-start; }
  .boss-distance, .wallet { padding:6px 8px; font-size:.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ultimate-select::before,
  .map-node.current .node-mark,
  .preview-aura,
  .player-aura,
  .attack-ultimate-freedom .player-zone,
  .attack-ultimate-forest .player-zone,
  .attack-ultimate-finisher .player-zone,
  .attack-ultimate-abyss .player-zone,
  .attack-ultimate-absolute .player-zone,
  .attack-ultimate-typhoon .player-zone,
  .attack-ultimate-luna .player-zone,
  .attack-ultimate-freedom .enemy-sprite,
  .attack-ultimate-forest .enemy-sprite,
  .attack-ultimate-finisher .enemy-sprite,
  .attack-ultimate-abyss .enemy-sprite,
  .attack-ultimate-absolute .enemy-sprite,
  .attack-ultimate-typhoon .enemy-sprite,
  .attack-ultimate-luna .enemy-sprite,
  .fx-freedom *, .fx-forest *, .fx-finisher *, .fx-abyss *, .fx-absolute *, .fx-typhoon *, .fx-luna * {
    animation: none !important;
  }
}
/* Final choreography overrides: keep these after the legacy effect definitions. */
.fx-finisher {
  inset: 0;
  width: 100%;
  height: 100%;
}
.finisher-core {
  left: 74%;
  top: 58%;
  background: radial-gradient(circle,#fff 0 7%,#e8c7ff 9% 17%,#9b48ff 25% 42%,#35117a 57%,transparent 72%);
  box-shadow: 0 0 25px #fff,0 0 54px #a24fff,0 0 86px #4620c0;
  animation: finisher-lock 1.65s .28s ease-in-out both;
}
.finisher-ring {
  left: 74%;
  top: 58%;
  border: 6px double #ddc7ff;
  box-shadow: 0 0 18px #8d52ff;
  animation: finisher-seal 1.25s .44s ease-out both;
}
.finisher-ring.f2 { animation-delay:.62s; }
.finisher-ring.f3 { animation-delay:.8s; }
.fx-finisher b {
  left: 74%;
  top: 58%;
  background: #f5e7ff;
  box-shadow: 0 0 11px #984dff;
  animation: finisher-converge 1.05s .2s ease-in both;
}
.fx-finisher b:nth-of-type(1) { --ux:-190px; --uy:-105px; }
.fx-finisher b:nth-of-type(2) { --ux:-78px; --uy:-145px; animation-delay:.26s; }
.fx-finisher b:nth-of-type(3) { --ux:55px; --uy:-132px; animation-delay:.32s; }
.fx-finisher b:nth-of-type(4) { --ux:172px; --uy:-80px; animation-delay:.38s; }
.fx-finisher b:nth-of-type(5) { --ux:-185px; --uy:72px; animation-delay:.44s; }
.fx-finisher b:nth-of-type(6) { --ux:-61px; --uy:116px; animation-delay:.5s; }
.fx-finisher b:nth-of-type(7) { --ux:69px; --uy:108px; animation-delay:.56s; }
.fx-finisher b:nth-of-type(8) { --ux:177px; --uy:54px; animation-delay:.62s; }

.fx-typhoon { inset:0; width:auto; height:auto; }
.cyclone {
  left: 52%;
  right: auto;
  top: 4%;
  width: 43%;
  height: 92%;
  animation: gust-collision 1.55s .22s cubic-bezier(.18,.78,.18,1) both;
}
.cyclone.left { left:52%; --gust-start:-190%; --gust-tilt:-7deg; }
.cyclone.right { left:52%; right:auto; --gust-start:190%; --gust-tilt:7deg; animation-delay:.3s; }
.cyclone b {
  left: 50%;
  height: 34px;
  border-top-width: 12px;
  box-shadow: 0 -5px 13px #5ef0d1,0 -10px 24px rgba(120,255,230,.52);
  transform: translateX(-50%) rotate(var(--gust-tilt));
}
.cyclone b:nth-child(1) { --wind-top:3%; --wind-width:90px; }
.cyclone b:nth-child(2) { --wind-top:19%; --wind-width:130px; }
.cyclone b:nth-child(3) { --wind-top:35%; --wind-width:170px; }
.cyclone b:nth-child(4) { --wind-top:51%; --wind-width:205px; }
.cyclone b:nth-child(5) { --wind-top:67%; --wind-width:235px; }
.cyclone b:nth-child(6) { --wind-top:83%; --wind-width:265px; }
.typhoon-core {
  left: 74%;
  top: 52%;
  width: 72px;
  height: 220px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg,transparent,#9fffe8 24%,#fff 48% 55%,#7ef5d7 76%,transparent);
  clip-path: polygon(42% 0,61% 0,55% 35%,100% 45%,58% 54%,64% 100%,40% 100%,46% 58%,0 48%,45% 39%);
  box-shadow: 0 0 24px #aaffed,0 0 55px #5de8cb;
  animation: gust-flare .9s 1s ease-out both;
}

.fx-luna {
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 74% 58%,rgba(255,126,218,.2),transparent 31%);
}
.luna-orb {
  left: 74%;
  top: -30px;
  width: var(--orb-size,13px);
  height: var(--orb-size,13px);
  border-radius: 50%;
  background: radial-gradient(circle,#fff 0 22%,#ffd4ef 27% 50%,#ff74c8 60%);
  box-shadow: 0 0 12px #ff8bd5;
  animation: luna-fall 1.2s var(--luna-delay,.08s) ease-in both;
}
.luna-orb:nth-of-type(1) { --luna-x:-105px; --luna-delay:.04s; --orb-size:10px; }
.luna-orb:nth-of-type(2) { --luna-x:-64px; --luna-delay:.14s; --orb-size:17px; }
.luna-orb:nth-of-type(3) { --luna-x:-26px; --luna-delay:.24s; --orb-size:12px; }
.luna-orb:nth-of-type(4) { --luna-x:8px; --luna-delay:.34s; --orb-size:20px; }
.luna-orb:nth-of-type(5) { --luna-x:45px; --luna-delay:.2s; --orb-size:14px; }
.luna-orb:nth-of-type(6) { --luna-x:82px; --luna-delay:.1s; --orb-size:11px; }
.luna-orb:nth-of-type(7) { --luna-x:116px; --luna-delay:.29s; --orb-size:16px; }
.luna-bloom {
  left: 74%;
  top: 60%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle,#fff 0 6%,#fff0a9 8% 14%,#ff9ed9 18% 29%,transparent 31%),repeating-conic-gradient(from 0deg,#ff7dcc 0 9deg,transparent 10deg 24deg);
  filter: drop-shadow(0 0 16px #ff64c4);
  animation: luna-bloom 1s 1s ease-out both;
}
.luna-bloom.l2 { width:145px; height:145px; animation-delay:1.16s; rotate:18deg; }
.luna-bloom.l3 { width:235px; height:235px; animation-delay:1.3s; rotate:-12deg; }
.fx-luna b {
  left: 74%;
  top: 60%;
  width: 8px;
  height: 8px;
  background: #fff2b9;
  box-shadow: 0 0 11px #ff70cb;
  animation: luna-twinkle .7s 1.08s ease-in-out both;
}
.fx-luna b:nth-of-type(odd) { translate:-86px -45px; }
.fx-luna b:nth-of-type(even) { translate:82px 38px; animation-delay:1.22s; }

@media (max-width:560px) {
  .fx-finisher,
  .fx-luna { width:100%; }
  .finisher-core,
  .finisher-ring,
  .luna-orb,
  .luna-bloom,
  .fx-luna b,
  .typhoon-core { left:72%; }
}

/* Party unlocks, animated cosmetics, and the second battle-effect pass */
.role-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.role-card.locked-role {
  border-color: #554f68;
  background: #111525;
}

.role-card.locked-role .pixel-sprite {
  filter: saturate(.25) brightness(.62);
}

.role-stage {
  position: relative;
}

.lock-mark {
  position: absolute;
  inset: auto 7px 7px;
  z-index: 4;
  padding: 3px 5px;
  color: #ffe586;
  background: rgba(8, 11, 20, .9);
  border: 1px solid #83723c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6rem;
  font-style: normal;
  letter-spacing: .1em;
}

.shop-subheading {
  margin-top: 22px;
  padding: 9px 11px;
  background: linear-gradient(90deg, rgba(255,211,90,.12), transparent);
  border-left: 4px solid var(--gold);
}

.shop-subheading h3 {
  margin: 0;
  font-size: 1.02rem;
}

.role-shop-item {
  border-color: #6d5b31;
}

.role-shop-item.owned {
  border-color: #4d8865;
}

.role-preview {
  background:
    radial-gradient(circle at 50% 72%, rgba(255,216,93,.22), transparent 38%),
    linear-gradient(transparent 68%, rgba(67,77,101,.7) 68%);
}

.cosmetic-fx {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 126px;
  height: 142px;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
}

.style-preview .cosmetic-fx {
  width: 78px;
  height: 112px;
}

.battle-sprite,
.shop-sprite {
  position: relative;
  z-index: 3;
}

.cosmetic-fx i {
  position: absolute;
  left: 50%;
  bottom: 16%;
  display: none;
}

.theme-forest .cosmetic-fx i,
.theme-aqua .cosmetic-fx i,
.theme-lunar .cosmetic-fx i,
.theme-gold .cosmetic-fx i {
  display: block;
  animation: aura-particle 1.7s var(--aura-delay, 0s) ease-in-out infinite;
}

.cosmetic-fx i:nth-child(1) { --aura-x:-47px; --aura-y:-82px; --aura-delay:-.1s; }
.cosmetic-fx i:nth-child(2) { --aura-x:42px; --aura-y:-96px; --aura-delay:-.32s; }
.cosmetic-fx i:nth-child(3) { --aura-x:-27px; --aura-y:-120px; --aura-delay:-.54s; }
.cosmetic-fx i:nth-child(4) { --aura-x:23px; --aura-y:-66px; --aura-delay:-.76s; }
.cosmetic-fx i:nth-child(5) { --aura-x:-57px; --aura-y:-43px; --aura-delay:-.98s; }
.cosmetic-fx i:nth-child(6) { --aura-x:55px; --aura-y:-48px; --aura-delay:-1.2s; }
.cosmetic-fx i:nth-child(7) { --aura-x:-8px; --aura-y:-103px; --aura-delay:-1.42s; }
.cosmetic-fx i:nth-child(8) { --aura-x:8px; --aura-y:-132px; --aura-delay:-1.62s; }

.theme-forest .cosmetic-fx i {
  width: 11px;
  height: 7px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #efff89, #44db63);
  box-shadow: 0 0 7px #63ee73;
}

.theme-aqua .cosmetic-fx i {
  width: 10px;
  height: 10px;
  border: 2px solid #d8ffff;
  border-radius: 50%;
  background: rgba(80,210,255,.22);
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.75), 0 0 8px #50d9ff;
}

.theme-lunar .cosmetic-fx i {
  width: 10px;
  height: 10px;
  background: #fff3c1;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  box-shadow: 0 0 9px #ff73dc;
}

.theme-gold .cosmetic-fx i {
  width: 8px;
  height: 18px;
  background: #fff7a8;
  box-shadow: 0 0 8px #ffd43d, 0 0 15px #ff9b2f;
  transform: rotate(45deg);
}

@keyframes aura-particle {
  0% { opacity:0; translate:0 12px; scale:.3; rotate:0deg; }
  25%, 68% { opacity:1; }
  100% { opacity:0; translate:var(--aura-x) var(--aura-y); scale:1.15; rotate:210deg; }
}

/* New normal attacks */
.attack-knight-slash { --impact-color:#ead8ff; --impact-glow:#925dff; }
.attack-psychic { --impact-color:#ffd6ff; --impact-glow:#be58ff; }
.attack-ground { --impact-color:#f2d3a0; --impact-glow:#a66d3b; }
.attack-flare { --impact-color:#fff0a1; --impact-glow:#ff5b23; }

.attack-knight-slash .fx-knight-slash,
.attack-psychic .fx-psychic,
.attack-ground .fx-ground,
.attack-flare .fx-flare {
  display: block;
}

.attack-knight-slash .fx-knight-slash {
  left: 29%;
  top: 24%;
  width: 50%;
  height: 135px;
  transform: rotate(-24deg);
  animation: slash-sweep .7s cubic-bezier(.12,.74,.2,1) both;
  mix-blend-mode: screen;
}

.fx-knight-slash i {
  left: 0;
  width: 100%;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #c689ff 20%, #fff 57% 76%, transparent);
  box-shadow: 0 0 8px #fff, 0 0 18px #8c55ff;
}
.fx-knight-slash i:nth-of-type(1) { top:25px; transform:rotate(-8deg); }
.fx-knight-slash i:nth-of-type(2) { top:59px; height:13px; }
.fx-knight-slash i:nth-of-type(3) { top:94px; transform:rotate(8deg); opacity:.74; }
.fx-knight-slash b { right:2%; top:52%; width:8px; height:8px; background:#fff; box-shadow:0 0 9px #ad69ff; transform:rotate(45deg); animation:slash-spark .6s both; }
.fx-knight-slash b:nth-of-type(1) { --spark-x:35px; --spark-y:-46px; }
.fx-knight-slash b:nth-of-type(2) { --spark-x:51px; --spark-y:5px; animation-delay:.05s; }
.fx-knight-slash b:nth-of-type(3) { --spark-x:25px; --spark-y:44px; animation-delay:.1s; }

.attack-psychic .fx-psychic,
.attack-flare .fx-flare {
  left: 28%;
  top: 34%;
  width: 92px;
  height: 92px;
  animation: projectile-flight .72s cubic-bezier(.18,.75,.18,1) both;
  mix-blend-mode: screen;
}

.psychic-shot {
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ff9df5 18% 34%, #8552ff 48% 66%, transparent 70%);
  box-shadow: 0 0 13px #fff, 0 0 30px #c050ff, 0 0 48px #563eff;
  animation: magic-pulse .18s ease-in-out infinite alternate;
}
.psychic-ring { inset:7px; border:4px solid #f2c4ff; border-left-color:transparent; border-radius:50%; animation:magic-spin .4s linear infinite; }
.psychic-ring.p2 { inset:0; border-color:#745cff transparent #ff85ec; animation-direction:reverse; }
.fx-psychic b { left:10px; top:44px; width:8px; height:8px; background:#ffe4ff; box-shadow:0 0 10px #b866ff; animation:mote-trail .56s ease-out both; }
.fx-psychic b:nth-of-type(1) { --mote-x:-38px; --mote-y:-25px; }
.fx-psychic b:nth-of-type(2) { --mote-x:-54px; --mote-y:12px; animation-delay:.05s; }
.fx-psychic b:nth-of-type(3) { --mote-x:-26px; --mote-y:39px; animation-delay:.1s; }
.fx-psychic b:nth-of-type(4) { --mote-x:5px; --mote-y:-43px; animation-delay:.14s; }
.fx-psychic b:nth-of-type(5) { --mote-x:-66px; --mote-y:-8px; animation-delay:.17s; }
.fx-psychic b:nth-of-type(6) { --mote-x:-4px; --mote-y:51px; animation-delay:.2s; }

.attack-ground .fx-ground {
  right:4%;
  bottom:3%;
  width:190px;
  height:150px;
  filter:drop-shadow(0 0 7px rgba(213,145,82,.85));
}
.ground-shot { left:-185px; bottom:19px; width:205px; height:13px; background:linear-gradient(90deg, transparent, #d9ad72 45%, #fff1bf); box-shadow:0 0 13px #b8733c; animation:ground-rush .58s ease-out both; }
.ground-spike { left:82px; bottom:4px; width:38px; height:112px; background:linear-gradient(100deg,#523625,#e4a765 52%,#5e3827); clip-path:polygon(50% 0,100% 100%,0 100%); transform-origin:50% 100%; animation:ground-rise .56s .24s cubic-bezier(.12,.9,.2,1) both; }
.ground-spike.g1 { left:34px; height:76px; transform:rotate(-13deg); }
.ground-spike.g3 { left:127px; height:89px; transform:rotate(12deg); animation-delay:.31s; }
.fx-ground b { left:96px; bottom:22px; width:10px; height:7px; background:#f4c489; animation:ground-debris .6s .3s ease-out both; }
.fx-ground b:nth-of-type(1) { --gx:-70px; --gy:-55px; }
.fx-ground b:nth-of-type(2) { --gx:-34px; --gy:-82px; animation-delay:.34s; }
.fx-ground b:nth-of-type(3) { --gx:12px; --gy:-93px; animation-delay:.38s; }
.fx-ground b:nth-of-type(4) { --gx:54px; --gy:-68px; animation-delay:.42s; }
.fx-ground b:nth-of-type(5) { --gx:77px; --gy:-32px; animation-delay:.46s; }

.flare-shot { inset:14px; border-radius:50%; background:radial-gradient(circle,#fff 0 9%,#fff070 14% 28%,#ff742a 36% 56%,#a81928 67%,transparent 72%); box-shadow:0 0 14px #fff,0 0 31px #ff6c23,0 0 49px #c5202a; }
.flare-core { inset:0; border:5px dotted #ffda62; border-radius:50%; animation:magic-spin .34s linear infinite; }
.fx-flare b { left:7px; top:44px; width:11px; height:7px; background:#ff8f37; box-shadow:0 0 9px #ff4d22; animation:mote-trail .55s ease-out both; }
.fx-flare b:nth-of-type(1) { --mote-x:-39px; --mote-y:-29px; }
.fx-flare b:nth-of-type(2) { --mote-x:-58px; --mote-y:4px; animation-delay:.04s; }
.fx-flare b:nth-of-type(3) { --mote-x:-31px; --mote-y:38px; animation-delay:.08s; }
.fx-flare b:nth-of-type(4) { --mote-x:3px; --mote-y:-47px; animation-delay:.12s; }
.fx-flare b:nth-of-type(5) { --mote-x:-68px; --mote-y:-18px; animation-delay:.15s; }
.fx-flare b:nth-of-type(6) { --mote-x:-8px; --mote-y:52px; animation-delay:.18s; }
.fx-flare b:nth-of-type(7) { --mote-x:-76px; --mote-y:25px; animation-delay:.21s; }

@keyframes ground-rush { 0%{opacity:0;scale:.2 1} 45%{opacity:1} 100%{opacity:0;translate:180px 0;scale:1} }
@keyframes ground-rise { 0%{opacity:0;scale:0 0} 65%{opacity:1;scale:1.08} 100%{opacity:0;scale:1} }
@keyframes ground-debris { 0%{opacity:0;scale:.2} 45%{opacity:1} 100%{opacity:0;translate:var(--gx) var(--gy);rotate:180deg} }

/* Ultimate effects shared choreography */
.attack-ultimate-dimension .fx-dimension,
.attack-ultimate-sky-thunder .fx-sky-thunder,
.attack-ultimate-dark-ground .fx-dark-ground,
.attack-ultimate-inferno .fx-inferno {
  display:block;
}

.attack-ultimate-dimension .impact,
.attack-ultimate-sky-thunder .impact,
.attack-ultimate-dark-ground .impact,
.attack-ultimate-inferno .impact { display:none; }

.attack-ultimate-dimension .player-zone,
.attack-ultimate-sky-thunder .player-zone,
.attack-ultimate-dark-ground .player-zone,
.attack-ultimate-inferno .player-zone { animation:ultimate-cast 1.9s ease-in-out both; }

.attack-ultimate-dimension .enemy-sprite,
.attack-ultimate-sky-thunder .enemy-sprite,
.attack-ultimate-dark-ground .enemy-sprite,
.attack-ultimate-inferno .enemy-sprite { animation:ultimate-enemy-hit 2s steps(5) both; }

.attack-ultimate-dimension,
.attack-ultimate-sky-thunder,
.attack-ultimate-dark-ground,
.attack-ultimate-inferno { animation:ultimate-scene 2.05s ease-out both; }

/* Fitches Finisher: magic implodes into the enemy, then detonates in place. */
.fx-finisher {
  inset:0;
  width:100%;
  height:100%;
}
.finisher-core { left:74%; top:58%; background:radial-gradient(circle,#fff 0 7%,#e8c7ff 9% 17%,#9b48ff 25% 42%,#35117a 57%,transparent 72%); box-shadow:0 0 25px #fff,0 0 54px #a24fff,0 0 86px #4620c0; animation:finisher-lock 1.65s .28s ease-in-out both; }
.finisher-ring { left:74%; top:58%; border:6px double #ddc7ff; box-shadow:0 0 18px #8d52ff; animation:finisher-seal 1.25s .44s ease-out both; }
.fx-finisher b { left:74%; top:58%; background:#f5e7ff; box-shadow:0 0 11px #984dff; animation:finisher-converge 1.05s .2s ease-in both; }
.fx-finisher b:nth-of-type(1) { --ux:-190px; --uy:-105px; }
.fx-finisher b:nth-of-type(2) { --ux:-78px; --uy:-145px; animation-delay:.26s; }
.fx-finisher b:nth-of-type(3) { --ux:55px; --uy:-132px; animation-delay:.32s; }
.fx-finisher b:nth-of-type(4) { --ux:172px; --uy:-80px; animation-delay:.38s; }
.fx-finisher b:nth-of-type(5) { --ux:-185px; --uy:72px; animation-delay:.44s; }
.fx-finisher b:nth-of-type(6) { --ux:-61px; --uy:116px; animation-delay:.5s; }
.fx-finisher b:nth-of-type(7) { --ux:69px; --uy:108px; animation-delay:.56s; }
.fx-finisher b:nth-of-type(8) { --ux:177px; --uy:54px; animation-delay:.62s; }

@keyframes finisher-converge { 0%{opacity:0;translate:var(--ux) var(--uy);scale:1.3} 35%{opacity:1} 82%{opacity:1;translate:0 0;scale:.55} 100%{opacity:0;translate:0 0;scale:0} }
@keyframes finisher-lock { 0%,35%{opacity:0;scale:.08;translate:-50% -50%} 58%{opacity:1;scale:.38} 78%{opacity:1;scale:1.25;filter:brightness(2.4)} 100%{opacity:0;scale:1.55;translate:-50% -50%} }
@keyframes finisher-seal { 0%{opacity:0;scale:1.8;translate:-50% -50%;rotate:-55deg} 55%{opacity:1;scale:.65} 78%{opacity:1;scale:.45} 100%{opacity:0;scale:1.35;translate:-50% -50%;rotate:80deg} }

/* Giga Typhoon: two visible gust columns collide over the enemy. */
.cyclone { left:52%; right:auto; top:4%; width:43%; height:92%; animation:gust-collision 1.55s .22s cubic-bezier(.18,.78,.18,1) both; }
.cyclone.left { left:52%; --gust-start:-190%; --gust-tilt:-7deg; }
.cyclone.right { left:52%; right:auto; --gust-start:190%; --gust-tilt:7deg; animation-delay:.3s; }
.cyclone b { left:50%; height:34px; border-top-width:12px; box-shadow:0 -5px 13px #5ef0d1,0 -10px 24px rgba(120,255,230,.52); transform:translateX(-50%) rotate(var(--gust-tilt)); }
.cyclone b:nth-child(1) { --wind-top:3%; --wind-width:90px; }
.cyclone b:nth-child(2) { --wind-top:19%; --wind-width:130px; }
.cyclone b:nth-child(3) { --wind-top:35%; --wind-width:170px; }
.cyclone b:nth-child(4) { --wind-top:51%; --wind-width:205px; }
.cyclone b:nth-child(5) { --wind-top:67%; --wind-width:235px; }
.cyclone b:nth-child(6) { --wind-top:83%; --wind-width:265px; }
.typhoon-core { left:74%; top:52%; width:72px; height:220px; border:0; border-radius:0; background:linear-gradient(90deg,transparent,#9fffe8 24%,#fff 48% 55%,#7ef5d7 76%,transparent); clip-path:polygon(42% 0,61% 0,55% 35%,100% 45%,58% 54%,64% 100%,40% 100%,46% 58%,0 48%,45% 39%); box-shadow:0 0 24px #aaffed,0 0 55px #5de8cb; animation:gust-flare .9s 1s ease-out both; }
@keyframes gust-collision { 0%{opacity:0;translate:var(--gust-start) 0;scale:.45 .8} 38%{opacity:1} 76%{opacity:1;translate:0 0;scale:1} 100%{opacity:0;translate:0 0;scale:.55 1.25} }
@keyframes gust-flare { 0%{opacity:0;scale:.1 .6;translate:-50% -50%} 46%{opacity:1;scale:1.3 1} 100%{opacity:0;scale:2 .85;translate:-50% -50%} }

/* Luna Cuore: falling lunar lights and layered blooms, fully distinct from Finisher. */
.fx-luna { inset:0; width:100%; height:100%; background:radial-gradient(circle at 74% 58%,rgba(255,126,218,.2),transparent 31%); }
.luna-orb { left:74%; top:-30px; width:var(--orb-size,13px); height:var(--orb-size,13px); border-radius:50%; background:radial-gradient(circle,#fff 0 22%,#ffd4ef 27% 50%,#ff74c8 60%); box-shadow:0 0 12px #ff8bd5; animation:luna-fall 1.2s var(--luna-delay,.08s) ease-in both; }
.luna-orb:nth-of-type(1) { --luna-x:-105px; --luna-delay:.04s; --orb-size:10px; }
.luna-orb:nth-of-type(2) { --luna-x:-64px; --luna-delay:.14s; --orb-size:17px; }
.luna-orb:nth-of-type(3) { --luna-x:-26px; --luna-delay:.24s; --orb-size:12px; }
.luna-orb:nth-of-type(4) { --luna-x:8px; --luna-delay:.34s; --orb-size:20px; }
.luna-orb:nth-of-type(5) { --luna-x:45px; --luna-delay:.2s; --orb-size:14px; }
.luna-orb:nth-of-type(6) { --luna-x:82px; --luna-delay:.1s; --orb-size:11px; }
.luna-orb:nth-of-type(7) { --luna-x:116px; --luna-delay:.29s; --orb-size:16px; }
.luna-bloom { left:74%; top:60%; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,#fff 0 6%,#fff0a9 8% 14%,#ff9ed9 18% 29%,transparent 31%),repeating-conic-gradient(from 0deg,#ff7dcc 0 9deg,transparent 10deg 24deg); filter:drop-shadow(0 0 16px #ff64c4); animation:luna-bloom 1s 1s ease-out both; }
.luna-bloom.l2 { width:145px; height:145px; animation-delay:1.16s; rotate:18deg; }
.luna-bloom.l3 { width:235px; height:235px; animation-delay:1.3s; rotate:-12deg; }
.fx-luna b { left:74%; top:60%; width:8px; height:8px; background:#fff2b9; box-shadow:0 0 11px #ff70cb; animation:luna-twinkle .7s 1.08s ease-in-out both; }
.fx-luna b:nth-of-type(odd) { translate:-86px -45px; }
.fx-luna b:nth-of-type(even) { translate:82px 38px; animation-delay:1.22s; }
@keyframes luna-fall { 0%{opacity:0;translate:var(--luna-x) -25px;scale:.2} 32%{opacity:1} 84%{opacity:1;translate:var(--luna-x) 170px;scale:1.25} 100%{opacity:0;translate:0 185px;scale:.2} }
@keyframes luna-bloom { 0%{opacity:0;scale:.08;translate:-50% -50%} 45%{opacity:1;scale:1} 100%{opacity:0;scale:1.42;translate:-50% -50%} }
@keyframes luna-twinkle { 0%,100%{opacity:0;scale:.2} 50%{opacity:1;scale:1.8;rotate:45deg} }

/* Knight ultimates */
.fx-dimension { inset:0; mix-blend-mode:screen; }
.dimension-cut { left:49%; top:50%; width:48%; height:13px; border-radius:50%; background:linear-gradient(90deg,transparent,#9d55ff 16%,#fff 47% 64%,#c05fff 78%,transparent); box-shadow:0 0 12px #fff,0 0 31px #8e43ff; animation:dimension-cut .78s var(--cut-delay,.42s) cubic-bezier(.15,.83,.18,1) both; }
.dimension-cut.d1 { rotate:-32deg; }
.dimension-cut.d2 { rotate:28deg; --cut-delay:.67s; }
.dimension-cut.d3 { rotate:-5deg; --cut-delay:.92s; height:18px; }
.fx-dimension b { left:74%; top:58%; width:9px; height:9px; background:#fff; box-shadow:0 0 10px #a456ff; animation:luna-twinkle .65s 1s both; }
.fx-dimension b:nth-of-type(odd) { translate:-92px -44px; }
.fx-dimension b:nth-of-type(even) { translate:86px 51px; }
@keyframes dimension-cut { 0%{opacity:0;scale:.1;translate:-120px 70px} 34%{opacity:1} 72%{opacity:1;scale:1;translate:0 0} 100%{opacity:0;scale:1.25;translate:35px -18px} }

.fx-sky-thunder { inset:0; mix-blend-mode:screen; }
.sky-bolt { top:-30px; left:var(--bolt-left,74%); width:38px; height:230px; background:linear-gradient(90deg,#fff,#fff771 42%,#ffbd1f); clip-path:polygon(43% 0,100% 0,60% 33%,90% 33%,32% 100%,47% 55%,9% 55%); filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 20px #ffe22e); animation:sky-bolt .45s var(--bolt-delay,.35s) steps(3) both; }
.sky-bolt:nth-of-type(1) { --bolt-left:58%; --bolt-delay:.26s; scale:.72; }
.sky-bolt:nth-of-type(2) { --bolt-left:66%; --bolt-delay:.45s; scale:.88; }
.sky-bolt:nth-of-type(3) { --bolt-left:73%; --bolt-delay:.65s; scale:1.08; }
.sky-bolt:nth-of-type(4) { --bolt-left:81%; --bolt-delay:.84s; scale:.86; }
.sky-bolt:nth-of-type(5) { --bolt-left:88%; --bolt-delay:1.02s; scale:.68; }
.fx-sky-thunder b { left:74%; top:67%; width:9px; height:9px; background:#fffbd0; box-shadow:0 0 12px #ffe635; animation:ultimate-spark .8s .75s ease-out both; }
.fx-sky-thunder b:nth-of-type(1) { --ux:-150px; --uy:-36px; }
.fx-sky-thunder b:nth-of-type(2) { --ux:-90px; --uy:-82px; }
.fx-sky-thunder b:nth-of-type(3) { --ux:-32px; --uy:-116px; }
.fx-sky-thunder b:nth-of-type(4) { --ux:33px; --uy:-110px; }
.fx-sky-thunder b:nth-of-type(5) { --ux:91px; --uy:-78px; }
.fx-sky-thunder b:nth-of-type(6) { --ux:142px; --uy:-27px; }
.fx-sky-thunder b:nth-of-type(7) { --ux:-75px; --uy:34px; }
.fx-sky-thunder b:nth-of-type(8) { --ux:75px; --uy:31px; }
@keyframes sky-bolt { 0%,35%{opacity:0;translate:0 -100px} 50%{opacity:1;translate:0 0} 72%{opacity:.3;translate:5px 0} 100%{opacity:0;translate:-4px 0} }

/* Sorcerer ultimates */
.fx-dark-ground { inset:0; filter:drop-shadow(0 0 12px rgba(119,59,184,.82)); }
.fx-dark-ground i { bottom:-10px; left:var(--rock-left,59%); width:58px; height:var(--rock-height,170px); background:linear-gradient(100deg,#130f1d,#7e438e 46%,#28132f 72%); clip-path:polygon(50% 0,100% 73%,78% 100%,19% 100%,0 75%); transform-origin:50% 100%; animation:dark-rise .95s var(--rock-delay,.34s) cubic-bezier(.12,.9,.2,1) both; }
.fx-dark-ground i:nth-of-type(1) { --rock-left:53%; --rock-height:115px; --rock-delay:.25s; rotate:-10deg; }
.fx-dark-ground i:nth-of-type(2) { --rock-left:60%; --rock-height:175px; --rock-delay:.33s; rotate:-5deg; }
.fx-dark-ground i:nth-of-type(3) { --rock-left:67%; --rock-height:215px; --rock-delay:.41s; }
.fx-dark-ground i:nth-of-type(4) { --rock-left:74%; --rock-height:235px; --rock-delay:.49s; rotate:4deg; }
.fx-dark-ground i:nth-of-type(5) { --rock-left:81%; --rock-height:195px; --rock-delay:.57s; rotate:7deg; }
.fx-dark-ground i:nth-of-type(6) { --rock-left:88%; --rock-height:145px; --rock-delay:.65s; rotate:11deg; }
.fx-dark-ground i:nth-of-type(7) { --rock-left:94%; --rock-height:105px; --rock-delay:.73s; rotate:14deg; }
.fx-dark-ground b { left:74%; top:63%; width:11px; height:8px; background:#c78bd9; box-shadow:0 0 8px #863b9c; animation:ground-debris .75s .68s both; }
.fx-dark-ground b:nth-of-type(1) { --gx:-165px; --gy:-90px; }
.fx-dark-ground b:nth-of-type(2) { --gx:-108px; --gy:-132px; }
.fx-dark-ground b:nth-of-type(3) { --gx:-45px; --gy:-156px; }
.fx-dark-ground b:nth-of-type(4) { --gx:24px; --gy:-164px; }
.fx-dark-ground b:nth-of-type(5) { --gx:86px; --gy:-128px; }
.fx-dark-ground b:nth-of-type(6) { --gx:145px; --gy:-88px; }
.fx-dark-ground b:nth-of-type(7) { --gx:-92px; --gy:18px; }
.fx-dark-ground b:nth-of-type(8) { --gx:101px; --gy:20px; }
@keyframes dark-rise { 0%{opacity:0;scale:0 0} 58%{opacity:1;scale:1.05} 82%{opacity:1;filter:brightness(1.7)} 100%{opacity:0;scale:1} }

.fx-inferno { inset:0; mix-blend-mode:screen; }
.inferno-core { left:74%; top:58%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#fff275 11% 20%,#ff7b22 27% 43%,#cf1c24 54% 64%,transparent 72%); box-shadow:0 0 25px #fff,0 0 58px #ff6c20,0 0 95px #c91d28; animation:inferno-burst 1.55s .3s ease-in-out both; }
.inferno-ring { left:74%; top:58%; width:180px; height:180px; border:10px dotted #ffbd3e; border-radius:50%; filter:drop-shadow(0 0 12px #ff4a22); animation:inferno-ring 1.15s .48s ease-out both; }
.inferno-ring.i2 { animation-delay:.72s; rotate:22deg; }
.fx-inferno b { left:74%; top:58%; width:14px; height:9px; border-radius:50%; background:#ff8b2b; box-shadow:0 0 11px #ff371f; animation:ultimate-spark 1.1s .65s ease-out both; }
.fx-inferno b:nth-of-type(1) { --ux:-145px; --uy:-98px; }
.fx-inferno b:nth-of-type(2) { --ux:-85px; --uy:-145px; }
.fx-inferno b:nth-of-type(3) { --ux:-16px; --uy:-168px; }
.fx-inferno b:nth-of-type(4) { --ux:58px; --uy:-151px; }
.fx-inferno b:nth-of-type(5) { --ux:128px; --uy:-105px; }
.fx-inferno b:nth-of-type(6) { --ux:157px; --uy:-34px; }
.fx-inferno b:nth-of-type(7) { --ux:-166px; --uy:-21px; }
.fx-inferno b:nth-of-type(8) { --ux:-143px; --uy:63px; }
.fx-inferno b:nth-of-type(9) { --ux:-66px; --uy:108px; }
.fx-inferno b:nth-of-type(10) { --ux:27px; --uy:119px; }
.fx-inferno b:nth-of-type(11) { --ux:111px; --uy:82px; }
.fx-inferno b:nth-of-type(12) { --ux:164px; --uy:19px; }
@keyframes inferno-burst { 0%,25%{opacity:0;scale:.08;translate:-50% -50%} 50%{opacity:1;scale:.52} 76%{opacity:1;scale:1.25;filter:brightness(2.4)} 100%{opacity:0;scale:1.6;translate:-50% -50%} }
@keyframes inferno-ring { 0%{opacity:0;scale:.15;translate:-50% -50%} 55%{opacity:1} 100%{opacity:0;scale:1.65;translate:-50% -50%;rotate:90deg} }

@media (max-width: 620px) {
  .role-grid { grid-template-columns:1fr; }
  .role-shop-grid { grid-template-columns:1fr; }
  .fx-finisher .finisher-core,
  .fx-finisher .finisher-ring,
  .luna-orb,
  .luna-bloom,
  .fx-luna b,
  .typhoon-core,
  .inferno-core,
  .inferno-ring { left:72%; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmetic-fx *,
  .fx-knight-slash *, .fx-psychic *, .fx-ground *, .fx-flare *,
  .fx-dimension *, .fx-sky-thunder *, .fx-dark-ground *, .fx-inferno * {
    animation:none !important;
  }
}

/* Adventure systems: emblems, enemy traits, travel items, and stable finishers. */
.emblem-panel {
  margin-top: 16px;
  padding: clamp(18px, 4vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 221, 107, .16), transparent 31%),
    linear-gradient(180deg, #202e4b, #121d33);
}

.emblem-choice-head { text-align: center; }
.emblem-choice-head h2 { margin: 2px 0 6px; font-size: clamp(1.45rem, 5vw, 2rem); }
.emblem-choice-head p:last-child { margin: 0; color: #b9c8df; font-size: .8rem; }

.emblem-choice-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.emblem-card {
  position: relative;
  min-height: 190px;
  padding: 14px 10px 12px;
  display: grid;
  grid-template-rows: 64px auto 1fr auto;
  justify-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(160deg, #15243e, #090f1d);
  border: 3px solid var(--emblem-color, #7690b6);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.34), 0 0 18px color-mix(in srgb, var(--emblem-color, #7690b6) 30%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}

.emblem-card::before,
.emblem-card::after {
  content: "";
  position: absolute;
  inset: -40% 43%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--emblem-color, #7690b6) 52%, transparent), transparent);
  rotate: 35deg;
  opacity: .42;
  animation: emblem-glint 2.1s ease-in-out infinite;
}

.emblem-card::after { rotate: -35deg; animation-delay: -1.05s; }
.emblem-card > * { position: relative; z-index: 1; }
.emblem-card > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #111729;
  background: var(--emblem-color, #d8e4f7);
  border: 6px double #fff4c4;
  transform: rotate(45deg);
  font-weight: 1000;
  box-shadow: 0 0 19px var(--emblem-color, #d8e4f7);
}
.emblem-card > span::first-letter { transform: rotate(-45deg); }
.emblem-card strong { font-size: 1rem; }
.emblem-card small { color: #c0cee0; font-size: .68rem; line-height: 1.55; }
.emblem-card em { color: var(--emblem-color, var(--gold)); font-size: .67rem; font-style: normal; font-weight: 900; }
.emblem-card:active { transform: translateY(2px); }
.emblem-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.emblem-sword { --emblem-color: #ff796e; }
.emblem-guard { --emblem-color: #70bfff; }
.emblem-star { --emblem-color: #d491ff; }
.emblem-fortune { --emblem-color: #ffd158; }
.emblem-heal { --emblem-color: #65e89a; }

.reroll-row {
  margin-top: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #aebfd6;
  background: #0a1425;
  border: 1px dashed #52698d;
  font-size: .72rem;
}
.reroll-row button {
  min-height: 40px;
  padding: 7px 12px;
  color: #1c2030;
  background: var(--gold);
  border: 2px solid #fff0a0;
  font-weight: 900;
  cursor: pointer;
}
.reroll-row button:disabled { opacity: .36; cursor: default; }

.emblem-strip {
  min-height: 42px;
  margin: 12px 0 0;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  color: #dfeaff;
  background: rgba(7, 13, 26, .82);
  border: 1px solid #4f6689;
  font-size: .67rem;
  scrollbar-width: none;
}
.emblem-strip > span { color: var(--gold); font-weight: 1000; letter-spacing: .08em; }
.emblem-strip > i {
  min-width: 34px;
  height: 28px;
  padding: 2px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #172943;
  border: 1px solid #7087aa;
  font-style: normal;
}
.emblem-strip b { color: #fff4a8; }
.emblem-strip small { color: #d1def1; }
.emblem-strip em { margin-left: auto; color: #8ed0ff; font-style: normal; white-space: nowrap; }
.emblem-strip.empty small { color: #8598b4; }

.trait-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.trait-badges i {
  padding: 2px 5px;
  color: #fff2bb;
  background: #26314b;
  border: 1px solid #9e8451;
  font-size: .53rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
}

.enemy-barrier {
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: 5;
  width: 174px;
  height: 196px;
  border: 5px double rgba(185, 233, 255, .9);
  border-radius: 50% 50% 44% 44%;
  background:
    linear-gradient(115deg, transparent 15%, rgba(255,255,255,.38) 18%, transparent 24%),
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.28), rgba(63,172,255,.16) 52%, transparent 68%);
  box-shadow: inset 0 0 28px rgba(141,224,255,.72), 0 0 24px #52b8ff;
  transform: translateX(-50%);
  animation: barrier-pulse 1.05s steps(2) infinite;
  pointer-events: none;
}
.barrier-active .enemy-sprite { filter: drop-shadow(0 0 8px #a8eaff) brightness(1.12); }
.guard-block::before { box-shadow: inset 0 0 80px rgba(101,205,255,.7); animation: guard-flash .6s ease-out; }

#battlefield.gold-encounter .enemy-zone .enemy-sprite {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(350deg) brightness(1.45) contrast(1.12) drop-shadow(0 0 5px #fff4a6) drop-shadow(0 0 16px #ffbd1f);
}
.gold-encounter .enemy-zone::before {
  border-color: #fff0a2;
  background: radial-gradient(ellipse, rgba(255,228,88,.72), rgba(255,126,16,.2) 58%, transparent 74%);
  box-shadow: 0 0 30px #ffd43e, inset 0 0 18px #fff4a8;
}
.gold-encounter::before { filter: sepia(.45) saturate(1.6); }
.gold-encounter .enemy-zone::after {
  content: "✦  G  ✦";
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 6;
  padding: 3px 9px;
  color: #3a2600;
  background: #ffe06b;
  border: 2px solid #fff4b2;
  box-shadow: 0 0 15px #ffc52f;
  transform: translateX(-50%);
  font-size: .65rem;
  font-weight: 1000;
  animation: gold-mark .8s steps(2) infinite;
}

.boss-phase-two {
  border-color: #ff77bc;
  box-shadow: inset 0 0 48px rgba(255,37,141,.28), 0 0 18px rgba(255,56,151,.55);
  animation: phase-field 1.1s steps(2) infinite;
}
#battlefield.boss-phase-two .enemy-zone .enemy-sprite { scale:1.1; filter:grayscale(.15) hue-rotate(292deg) brightness(1.5) contrast(1.25) saturate(2.2) drop-shadow(0 0 7px #fff) drop-shadow(0 0 22px #ff278f); }
.boss-phase-two .enemy-zone::before { border-color:#ff79cf; box-shadow:0 0 34px #ff3caa,inset 0 0 20px #ffe1f3; }

.encounter-banner {
  position:absolute;
  left:12px;
  top:10px;
  z-index:9;
  padding:5px 8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  font-weight:1000;
  letter-spacing:.06em;
  pointer-events:none;
}
.gold-banner { color:#332300; background:#ffdc55; border:2px solid #fff2a2; box-shadow:0 0 14px #ffc32e; }
.phase-banner { color:#fff0fa; background:#76184d; border:2px solid #ff91cf; box-shadow:0 0 18px #ff3d9c; animation:phase-banner 1s steps(2) infinite; }

.stack-rule {
  display:inline-block;
  margin-top:10px;
  padding:5px 9px;
  color:#fff1ad;
  background:#111c31;
  border:1px solid #8a7237;
  font-size:.72rem;
}
.emblem-card small b { color:var(--emblem-color, var(--gold)); }
.emblem-strip > i { min-width:max-content; height:auto; min-height:32px; padding:3px 7px; flex-direction:column; align-items:flex-start; }
.emblem-strip > i b { font-size:.62rem; white-space:nowrap; }
.emblem-strip > i small { font-size:.56rem; white-space:nowrap; }

.attacking .barrier-active .enemy-barrier { animation:barrier-shatter .72s steps(4) both; }

.elite-node .node-mark {
  color: #f6eaff;
  background: #452b68;
  border-color: #a986e5;
  box-shadow: inset 0 -4px 0 #1d102f, 0 0 11px rgba(175,125,255,.42);
}
.elite-node.current .node-mark { color:#161125; background:#d2a8ff; border-color:#f3e4ff; }

.item-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.travel-item {
  min-height: 205px;
  grid-template-columns: 1fr;
  grid-template-rows: 58px auto 1fr auto;
  text-align: center;
}
.travel-item .item-icon {
  width: 54px;
  height: 54px;
  margin: auto;
  display: grid;
  place-items: center;
  color: #151b2a;
  background: linear-gradient(135deg,#fff5ad,#ffc74a);
  border: 5px double #8a5d13;
  transform: rotate(45deg);
  font-size: .78rem;
  font-weight: 1000;
  box-shadow: 0 0 16px rgba(255,210,80,.55);
}
.travel-item .shop-price { align-self: center; }

.message.warning { color:#ffd4ee; background:#32172e; border-color:#d25b9e; }

/* The finisher anchor never moves; only its size and particles animate. */
.fx-finisher .finisher-core,
.fx-finisher .finisher-ring,
.fx-finisher b { translate: none; }
.fx-finisher .finisher-core,
.fx-finisher .finisher-ring { transform: translate(-50%, -50%) scale(.01); }
.fx-finisher .finisher-core { animation: finisher-anchor-core 1.65s .28s ease-in-out both; }
.fx-finisher .finisher-ring { animation: finisher-anchor-ring 1.25s .44s ease-out both; }
.fx-finisher .finisher-ring.f2 { animation-delay:.62s; }
.fx-finisher .finisher-ring.f3 { animation-delay:.8s; }
.fx-finisher b { animation: finisher-anchor-particle 1.05s .2s ease-in both; }

@keyframes finisher-anchor-core {
  0%,35% { opacity:0; transform:translate(-50%,-50%) scale(.08); }
  58% { opacity:1; transform:translate(-50%,-50%) scale(.38); }
  78% { opacity:1; transform:translate(-50%,-50%) scale(1.25); filter:brightness(2.4); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.55); }
}
@keyframes finisher-anchor-ring {
  0% { opacity:0; transform:translate(-50%,-50%) scale(1.8) rotate(-55deg); }
  55% { opacity:1; transform:translate(-50%,-50%) scale(.65) rotate(0deg); }
  78% { opacity:1; transform:translate(-50%,-50%) scale(.45) rotate(28deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.35) rotate(80deg); }
}
@keyframes finisher-anchor-particle {
  0% { opacity:0; transform:translate(var(--ux),var(--uy)) scale(1.3); }
  35% { opacity:1; }
  82% { opacity:1; transform:translate(-50%,-50%) scale(.55); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(0); }
}

@keyframes emblem-glint { 50% { opacity:.8; transform:translateX(25px); } }
@keyframes barrier-pulse { 50% { opacity:.68; filter:brightness(1.35); } }
@keyframes barrier-shatter { 0%{opacity:1;scale:1} 35%{filter:brightness(3);scale:1.08} 100%{opacity:0;scale:1.42;rotate:8deg} }
@keyframes guard-flash { from { opacity:1; } to { opacity:0; } }
@keyframes phase-field { 50% { filter:hue-rotate(18deg) brightness(1.08); } }
@keyframes phase-banner { 50% { filter:brightness(1.45); } }
@keyframes gold-mark { 50% { filter:brightness(1.35); translate:0 -2px; } }

@media (max-width: 620px) {
  .emblem-choice-grid { grid-template-columns:1fr; }
  .emblem-card { min-height:112px; grid-template-columns:62px 1fr; grid-template-rows:auto auto auto; justify-items:start; text-align:left; }
  .emblem-card > span { grid-row:1 / 4; }
  .item-shop-grid { grid-template-columns:1fr; }
  .travel-item { min-height:150px; grid-template-columns:62px 1fr; grid-template-rows:auto 1fr auto; text-align:left; }
  .travel-item .item-icon { grid-row:1 / 4; }
  .reroll-row { align-items:stretch; flex-direction:column; text-align:center; }
  .floating-enemy-hud { top:8px; right:8px; width:min(220px,52%); }
  .enemy-barrier { width:142px; height:166px; }
}

@media (prefers-reduced-motion: reduce) {
  .emblem-card::before,
  .emblem-card::after,
  .enemy-barrier,
  .boss-phase-two,
  .fx-finisher * { animation:none !important; }
}

/* 授業用復習コース */
.lesson-panel {
  margin-top: 16px;
  padding: clamp(16px, 4vw, 24px);
}

.lesson-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}

.lesson-hero h2 {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 2.05rem);
}

.lesson-hero p:last-child {
  max-width: 520px;
  margin: 9px 0 0;
  color: #c8d5e9;
  font-size: .82rem;
  line-height: 1.75;
}

.lesson-time {
  width: 96px;
  height: 96px;
  display: grid;
  place-content: center;
  color: #161c2d;
  background: var(--gold);
  border: 6px double #8a6215;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 0 22px rgba(255, 211, 90, .36);
}

.lesson-time b { font-size: 1.22rem; }
.lesson-time small { display: block; font-size: .62rem; font-weight: 900; }

.lesson-feature-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lesson-feature-grid > span {
  min-height: 74px;
  padding: 10px;
  display: grid;
  place-content: center;
  gap: 4px;
  background: #0d192d;
  border: 2px solid #425d85;
  text-align: center;
}

.lesson-feature-grid b { color: #fff2b1; font-size: .85rem; }
.lesson-feature-grid small { color: #9fb2cf; font-size: .65rem; }

.lesson-stage-list {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  list-style: none;
}

.lesson-stage-list li {
  min-height: 116px;
  padding: 7px 5px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  background: #0b1629;
  border: 2px solid var(--stage-color);
  text-align: center;
}

.lesson-stage-list li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #111827;
  background: var(--stage-color);
  border: 2px solid #fff;
  font-size: .67rem;
  font-weight: 1000;
}

.lesson-stage-list strong { font-size: .73rem; }
.lesson-stage-list small { color: #96a9c5; font-size: .55rem; line-height: 1.45; }

.lesson-note {
  margin: 15px 0 0;
  padding: 10px 12px;
  color: #c8d6e9;
  background: #0c1729;
  border-left: 4px solid #73d7a0;
  font-size: .72rem;
  line-height: 1.7;
}

.lesson-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.lesson-actions .attack-button,
.secondary-action,
.lesson-result-button {
  min-height: 46px;
  padding: 9px 16px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.secondary-action,
.lesson-result-button {
  color: #e3edfb;
  background: #101d32;
  border: 2px solid #60799f;
}

.lesson-result-button { min-height: 42px; padding: 7px 11px; font-size: .7rem; }

.lesson-progress {
  margin: 13px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  list-style: none;
}

.lesson-step {
  min-width: 0;
  padding: 5px 2px;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #7688a4;
  background: #0a1425;
  border: 1px solid #344866;
}

.lesson-step span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: .58rem;
  font-weight: 1000;
}

.lesson-step b { overflow: hidden; font-size: .58rem; white-space: nowrap; }
.lesson-step.cleared { color: #9be6b0; border-color: #3f8e5c; }
.lesson-step.current { color: #141b2b; background: var(--stage-color); border-color: #fff; box-shadow: 0 0 12px var(--stage-color); }

.lesson-kind-row {
  margin-bottom: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d9e6f8;
  background: #0b1628;
  border: 1px solid #526b91;
  font-size: .72rem;
}

.lesson-kind-row small { margin-left: auto; color: #ffdda1; }
.lesson-kind-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #111827;
  background: var(--stage-color);
  border: 2px solid #fff;
  font-weight: 1000;
}

.lesson-battle-panel .battlefield { margin-top: 0; }

.lesson-result-count {
  padding: 8px 11px;
  color: #181d2b;
  background: var(--gold);
  border: 3px double #7e5c16;
  font-size: .72rem;
  font-weight: 1000;
}

.lesson-summary-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lesson-summary-grid article {
  min-height: 132px;
  padding: 13px 11px;
  display: grid;
  align-content: center;
  gap: 7px;
  background: #0c1729;
  border: 2px solid #536c91;
}

.lesson-summary-grid article.stable { border-color: #4e9b69; }
.lesson-summary-grid article.practice { border-color: #d08b4d; }
.lesson-summary-grid small { color: #99abc4; font-size: .64rem; }
.lesson-summary-grid strong { color: #fff1a8; font-size: 1.02rem; }
.lesson-summary-grid span { color: #c6d3e6; font-size: .64rem; line-height: 1.5; }

.lesson-stat-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.lesson-stat-card {
  min-height: 86px;
  padding: 8px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  background: #0b1526;
  border: 1px solid #435a7c;
}

.lesson-stat-card.next-practice { border: 2px solid #ffb66e; box-shadow: inset 0 -4px 0 rgba(255, 153, 72, .15); }
.lesson-stat-card strong { color: #fff2b4; font-size: .72rem; }
.lesson-stat-card span { color: #aebed5; font-size: .58rem; }
.lesson-stat-card b { color: #fff; }

@media (max-width: 620px) {
  .lesson-hero { grid-template-columns: 1fr; }
  .lesson-time { width: auto; height: auto; padding: 9px 16px; grid-auto-flow: column; gap: 7px; border-radius: 2px; justify-self: start; }
  .lesson-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-stage-list li { min-height: 78px; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-items: center; justify-items: start; text-align: left; }
  .lesson-stage-list li > span { grid-row: 1 / 3; }
  .lesson-feature-grid,
  .lesson-summary-grid { grid-template-columns: 1fr; }
  .lesson-feature-grid > span { min-height: 58px; }
  .lesson-progress { gap: 2px; }
  .lesson-step { padding-inline: 0; }
  .lesson-step b { font-size: .52rem; }
  .lesson-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-stat-card { min-height: 70px; }
  .lesson-kind-row { align-items: flex-start; flex-wrap: wrap; }
  .lesson-kind-row small { width: 100%; margin-left: 0; }
}