/* Spell presentation: etched materials, local light, composited motion.
   Static gradients/clip paths are rasterized once; only opacity/transform animate. */
.spell-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  isolation: isolate;
}
.spell-fx {
  position: absolute;
  display: block;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
  transform-origin: center;
}
.spell-fx--ring {
  border: 1px solid var(--fx-light);
  border-top-color: transparent;
  border-radius: 50%;
  background: radial-gradient(ellipse, transparent 55%, var(--fx-deep) 70%, transparent 73%);
  box-shadow:
    0 1px 0 var(--fx-ink),
    inset 0 -3px 8px #ffffff0c;
}
.spell-fx--edge {
  border-radius: 12px;
  border: 1px solid var(--fx-ink);
  background: linear-gradient(0deg, var(--fx-deep), transparent 24%, transparent 80%, #ffffff08);
  box-shadow: inset 0 0 14px #f1ddb521;
}
.spell-fx--frost {
  border-radius: 12px;
  border: 1px solid #ceeaff;
  background:
    linear-gradient(132deg, #b2d8ee80, transparent 17%, transparent 83%, #b2d8ee70),
    repeating-linear-gradient(60deg, transparent 0 17px, #b2d8ee18 18px 19px, transparent 20px 38px);
  box-shadow: inset 0 0 12px #c8e5ff38;
}
.spell-fx--current {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x2='0' y2='1'%3E%3Cstop stop-color='%23c4f5eb' stop-opacity='.65'/%3E%3Cstop offset='.35' stop-color='%23499da9' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%2320526b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20 48 C25 10 62 82 115 38 S205 28 250 45 S340 12 420 42 L420 110 L-20 110Z' fill='url(%23w)'/%3E%3Cpath d='M-20 48 C25 10 62 82 115 38 S205 28 250 45 S340 12 420 42' fill='none' stroke='%23d7f7ef' stroke-opacity='.8' stroke-width='1.4'/%3E%3Cpath d='M-20 62 C25 24 62 96 115 52 S205 42 250 59 S340 26 420 56' fill='none' stroke='%2398dcd5' stroke-opacity='.3' stroke-width='.8'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.spell-fx--mote {
  border-radius: 50%;
  background: var(--fx-light);
  box-shadow: 0 0 5px var(--fx-ink);
}
.spell-fx--bubble {
  border-radius: 50%;
  border: 1px solid var(--fx-ink);
  background: radial-gradient(circle at 25% 25%, #f4fffca6, transparent 52%);
}
.spell-fx--droplet {
  border-radius: 70% 30% 65% 35%;
  background: linear-gradient(135deg, var(--fx-light), var(--fx-deep));
}
.spell-fx--shard {
  clip-path: polygon(40% 0, 100% 42%, 63% 100%, 0 55%);
  background: linear-gradient(
    110deg,
    var(--fx-light) 0 44%,
    var(--fx-ink) 45% 68%,
    var(--fx-deep) 69%
  );
}
.spell-fx--rain {
  background: linear-gradient(0deg, transparent, var(--fx-ink) 80%, var(--fx-light));
  border-radius: 2px;
}
.spell-fx--meteor {
  border-radius: 35% 60% 42% 48%;
  background: radial-gradient(circle at 30% 28%, #fff1c4, #d18a4a 35%, #6c392b 70%, #352c2a);
  box-shadow:
    -8px -9px 0 -3px #ba6b4555,
    -16px -20px 0 -7px #e8a66428;
}
.spell-fx--meteor::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 110px;
  bottom: 55%;
  left: 64%;
  transform: rotate(28deg);
  transform-origin: bottom;
  background: linear-gradient(0deg, #ffdc9c99, #b17b4933 45%, transparent);
  border-radius: 50%;
}
.spell-fx--lance {
  clip-path: polygon(0 36%, 72% 36%, 66% 0, 100% 50%, 66% 100%, 72% 64%, 0 64%);
  background: linear-gradient(0deg, var(--fx-deep), var(--fx-light) 48%, var(--fx-ink) 52%);
}
.spell-fx--focus {
  border: 1px solid var(--fx-ink);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
}
.spell-fx--reticle {
  background:
    linear-gradient(var(--fx-ink), var(--fx-ink)) center/1px 100% no-repeat,
    linear-gradient(var(--fx-ink), var(--fx-ink)) center/100% 1px no-repeat;
  border: 1px solid var(--fx-ink);
  border-radius: 50%;
}
.spell-fx--net {
  border-radius: 40%;
  border: 1px solid var(--fx-light);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      #c4b78da6 13px 14px,
      transparent 15px 25px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 12px,
      #e7ddbd80 13px 14px,
      transparent 15px 25px
    );
}
.spell-fx--feather {
  border-radius: 95% 0 85% 15%;
  background: linear-gradient(65deg, #a6ad9f80, #fff6dccc 46%, #827d68 48% 51%, #e3dac299 54%);
  clip-path: polygon(
    65% 0,
    100% 12%,
    100% 35%,
    67% 52%,
    90% 45%,
    78% 70%,
    42% 86%,
    18% 100%,
    38% 62%,
    4% 72%,
    12% 34%
  );
}
.spell-fx--sunray {
  background: linear-gradient(0deg, transparent, #f9e7b44d 65%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
}
.spell-fx--coil {
  border: 2px solid var(--fx-ink);
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: 0 1px 0 var(--fx-light);
}
.spell-fx--echo {
  border: 1px solid var(--fx-light);
  border-radius: 10px;
  background: linear-gradient(160deg, #ffffff0a, transparent 60%);
}
.spell-fx--folio {
  border: 1px solid var(--fx-ink);
  border-radius: 3px;
  background: linear-gradient(120deg, #173138, #294a49);
  box-shadow: inset 0 0 0 3px #d8bd7e22;
}
.spell-fx--folio::after {
  content: '';
  position: absolute;
  inset: 10px 6px;
  border: 1px solid var(--fx-light);
  transform: rotate(45deg) scale(0.65);
}
.spell-fx--gem {
  clip-path: polygon(50% 0, 100% 35%, 75% 100%, 25% 100%, 0 35%);
  background: linear-gradient(120deg, #ffe9aa, #d7b66d 38%, #846337 39% 63%, #e9ce8b 64%);
}

/* Presentation frame: warm metal, restrained edge light, no screen bloom. */
.spell-reveal-glow,
.trap-reveal-flash {
  display: none;
}
.spell-reveal-card-wrapper {
  width: min(238px, 64vw);
  height: min(334px, 90vw);
  animation: spell-frame-in 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.spell-reveal-card-front {
  background: linear-gradient(155deg, #244044, #12272d 50%, #102126);
  border: 1px solid #b8b99a;
  box-shadow:
    0 12px 30px #06121866,
    inset 0 0 0 3px #ffffff09;
  border-radius: 14px;
  transition-duration: 0.45s;
}
.spell-reveal-card-back {
  background: linear-gradient(145deg, #29454a, #10252c);
  border: 1px solid #b8b99a;
  box-shadow: 0 12px 30px #06121866;
  transition-duration: 0.45s;
}
.spell-reveal-card-back .card-back-pattern {
  border: 1px solid #c2be9555;
  background: repeating-linear-gradient(45deg, transparent 0 15px, #c2be950a 16px 17px);
}
.spell-reveal-card-back .card-back-logo {
  color: #d0c39e;
  font-family: Cinzel, Georgia, serif;
  font-size: 2rem;
  text-shadow: none;
}
.spell-reveal-header {
  padding: 12px 10px 9px;
  background: linear-gradient(0deg, transparent, #f2e3ad08);
}
.spell-reveal-name {
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: #f4eedb;
}
.spell-reveal-image-container {
  margin: 0 10px;
  border-radius: 6px;
  min-height: 100px;
  max-height: 174px;
  box-shadow: none;
  border: 1px solid #c1bea33b;
}
.spell-reveal-effect {
  color: #e5e9de;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 10px 12px;
  flex: 1;
}
.spell-reveal-footer {
  padding: 6px 12px 9px;
  border-top-color: #b2bb9e24;
}
.spell-reveal-type {
  text-shadow: none;
  font-size: 0.62rem;
  color: #cfc59e;
  letter-spacing: 0.13em;
}
.spell-reveal-tribe {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
}
.spell-reveal-image-placeholder {
  font:
    2rem Cinzel,
    Georgia,
    serif;
  color: #cfc59e;
}
.spell-reveal-card-wrapper.flipped .spell-reveal-card-front::before {
  background: linear-gradient(
    105deg,
    transparent 42%,
    #f8edcd12 49%,
    #f8edcd25 50%,
    transparent 58%
  );
}
.spell-card-reveal.exiting {
  animation: spell-frame-fade 0.28s ease-out forwards;
}
.spell-card-reveal.exiting .spell-reveal-card-wrapper {
  animation: spell-frame-out 0.28s ease-in forwards;
}
@keyframes spell-frame-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes spell-frame-out {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-12px) scale(0.96);
  }
}
@keyframes spell-frame-fade {
  to {
    opacity: 0;
  }
}
/* Traps retain their identity, not an alarm flash or elastic overshoot. */
.trap-reveal-card-front {
  border-width: 1px;
  box-shadow: 0 12px 30px #06121866;
  background: linear-gradient(155deg, #344039, #14282b);
}
.trap-card-reveal,
.trap-reveal-card-wrapper {
  animation: spell-frame-in 0.3s ease-out forwards;
}
.trap-card-reveal.exiting {
  animation: spell-frame-fade 0.28s ease-out forwards;
}
.trap-card-reveal.exiting .trap-reveal-card-wrapper {
  animation: spell-frame-out 0.28s ease-out forwards;
}
.trap-reveal-banner {
  text-shadow: none;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
@media (prefers-reduced-motion: reduce) {
  .spell-card-reveal,
  .spell-reveal-card-wrapper,
  .spell-card-reveal.exiting,
  .spell-card-reveal.exiting .spell-reveal-card-wrapper,
  .trap-card-reveal,
  .trap-reveal-card-wrapper,
  .trap-card-reveal.exiting,
  .trap-card-reveal.exiting .trap-reveal-card-wrapper {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .spell-reveal-card-back,
  .trap-reveal-card-back {
    display: none;
  }
  .spell-reveal-card-front,
  .trap-reveal-card-front {
    transform: none !important;
    transition: none;
  }
  .spell-reveal-card-front::before,
  .trap-reveal-card-front::before,
  .trap-reveal-banner {
    animation: none !important;
  }
}

/* Crisp impact silhouettes; never brighten the whole viewport. */
.spell-fx--filament {
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--fx-ink) 70%, var(--fx-light));
}
.spell-fx--remnant {
  border: 1px solid #aeb7a1;
  border-radius: 11px;
  background-color: #18343c;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 9px 5px;
  font:
    500 12px/1.3 Barlow,
    sans-serif;
  color: #e0e8dc;
  text-align: center;
}
.spell-fx--frost::before,
.spell-fx--frost::after {
  content: '';
  position: absolute;
  width: 42%;
  height: 38%;
  background: linear-gradient(
    125deg,
    #e8f8ffcf 0 22%,
    #8fbcdb66 23% 48%,
    #e8f8ff99 49% 51%,
    #78a1c433 52%
  );
  clip-path: polygon(0 0, 91% 0, 68% 13%, 53% 6%, 38% 38%, 22% 15%, 9% 63%, 0 100%);
}
.spell-fx--frost::before {
  top: 0;
  left: 0;
}
.spell-fx--frost::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.spell-fx--fracture {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e8b579' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M48 50L29 39 22 21M29 39L12 41M51 49L66 30 64 14M66 30L81 28M52 53L74 65 87 60M74 65L78 82M47 53L31 71 15 76M31 71L33 91'/%3E%3C/g%3E%3Ccircle cx='50' cy='51' r='13' fill='%238d543426'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}

/* Ground contact compresses at the landing beat; no animated blur. */
.spell-fx--contact {
  border-radius: 50%;
  background: radial-gradient(ellipse, #07191dcc, #07191d55 48%, transparent 72%);
}

.spell-fx--rime {
  transform-origin: center bottom;
  border-radius: 12px;
  border: 1px solid #d4f5ffb0;
  background:
    linear-gradient(0deg, #d2f2ff9c, #94cae73d 42%, transparent 80%),
    repeating-conic-gradient(
      from 20deg at 10% 90%,
      transparent 0 16deg,
      #c9eeff70 17deg 18deg,
      transparent 19deg 38deg
    );
}
.spell-fx--cold-wisp {
  border-radius: 50%;
  background: radial-gradient(ellipse, #d9f6ff55, #a4d8ee28 40%, transparent 70%);
  border-top: 1px solid #d3f4ff55;
}

/* Distinct motifs for generated and utility spells; no downloaded assets. */
.spell-fx--signature { color: var(--fx-light); filter: drop-shadow(0 2px 3px var(--fx-deep)); }
.spell-fx--signature svg { display: block; width: 100%; height: 100%; }
.spell-scene[data-motif="rainbow-regen"] .spell-fx--signature,
.spell-scene[data-motif="prismatic-feather"] .spell-fx--signature {
  color: #dfc9ff; filter: drop-shadow(-3px 0 2px #72d9dc) drop-shadow(3px 0 2px #e8bb73);
}
.spell-fx--wash-front {
  border-right: 5px solid #e5fffa;
  border-radius: 40% 55% 45% 30%;
  background: linear-gradient(90deg,transparent,#2489a578 40%,#83e4e7d9 90%,#effff8);
  box-shadow: 8px 0 14px #baf8ee66;
}
.spell-fx--stripped-sigil {
  border: 2px solid #c3e9dd;
  border-radius: 50%;
  background: linear-gradient(135deg,transparent 46%,#d9fff1 47% 53%,transparent 54%);
}