/* Revelação da invocação (v0.66.0): cartas viradas, giro em 3D e efeitos por raridade.
   Os efeitos em pixel art ficam no canvas (js/ui/summon-reveal.js, 15 quadros por segundo);
   aqui entram o giro, o tremor, o brilho do verso, a folha holográfica, o flash e o letreiro.
   Todo movimento usa steps() para andar em quadros como o resto da arte. prefers-reduced-motion
   zera as durações (01-base) e o módulo revela sem animação. */

.summon-modal-overlay {
  transition: background-color 300ms steps(3);
}

.summon-modal-overlay.is-climax {
  background: rgba(2, 3, 6, 0.94);
}

.summon-cards-row {
  padding: 22px 12px 14px;
}

.summon-modal-overlay.is-banner .summon-result-title,
.summon-modal-overlay.is-banner .summon-result-summary {
  visibility: hidden;
}

.summon-reveal-hint {
  min-height: 1.4em;
}

.summon-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

/* ---- espaço de cada carta ---- */

.rv-slot {
  position: relative;
  width: 176px;
  min-width: 0;
  animation: rv-drop 360ms steps(5) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  --amp: var(--shake, 1);
}

.summon-cards-row.is-multi .rv-slot {
  width: auto;
}

.rv-slot.is-violent {
  --amp: calc(var(--shake, 1) * 2.2);
}

/* Espera da resposta do servidor: costas da carta sem clique, no mesmo tamanho da carta revelada. */
.rv-wait-card {
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-s);
  background: transparent no-repeat center / 100% 100%;
  image-rendering: pixelated;
  animation: rv-glow 340ms steps(2) infinite alternate;
}

.rv-lift {
  position: relative;
  min-width: 0;
  perspective: 900px;
}

/* Tamanho fixo: o texto da carta (nome longo) nunca aumenta a coluna. minmax(0, 1fr) e min-width 0
   em toda a cadeia, senão o min-content do nome em uma linha só estoura a grade. */
.rv-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  transform-style: preserve-3d;
}

.rv-face {
  grid-area: 1 / 1;
  display: flex;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rv-front {
  transform: rotateY(180deg);
}

/* A largura da carta é a do espaço. O 03-summon.css põe width: auto no x10, e dentro de um flex isso
   viraria a largura do conteúdo (nome longo = carta maior), por isso a regra vem com mais peso. */
.summon-cards-row .rv-slot .rv-front .summon-card-item {
  width: 100%;
  min-width: 0;
}

.rv-front .summon-card-item .item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Uma carta sozinha: nome em até duas linhas, com a altura das duas reservada. */
.summon-cards-row:not(.is-multi) .rv-front .item-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
}

.rv-pedestal {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -10px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 0 55%, rgba(0, 0, 0, 0.3) 55% 80%, transparent 80%);
  pointer-events: none;
}

/* ---- verso ---- */

.rv-back-btn {
  position: relative;
  flex: 1;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent no-repeat center / 100% 100%;
  image-rendering: pixelated;
  cursor: pointer;
  overflow: hidden;
}

.rv-back-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.rv-slot[data-state='back'] .rv-back-btn:hover {
  filter: brightness(1.25);
}

.rv-hot,
.rv-crack {
  position: absolute;
  inset: 0;
  background: no-repeat center / 100% 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

.rv-hot {
  opacity: 0;
}

.rv-hot.is-on {
  animation: rv-heat var(--charge-ms, 600ms) steps(8) forwards;
}

.rv-crack {
  filter: drop-shadow(0 0 3px var(--fx, #fff));
  animation: rv-crack-in 180ms steps(3) both;
}

.rv-slot[data-state='back'] .rv-lift {
  animation: rv-bob 2.4s steps(1) infinite;
  animation-delay: calc(var(--i, 0) * -260ms);
}

.rv-slot[data-state='queued'] .rv-lift {
  --amp: 1;
  animation: rv-shake 120ms steps(1) infinite;
}

.rv-slot[data-state='queued'] .rv-back-btn {
  filter: brightness(1.15);
}

.rv-slot[data-state='charging'] .rv-lift {
  animation: rv-rise 320ms steps(4) forwards, rv-shake 100ms steps(1) infinite;
}

.rv-slot[data-state='charging'] .rv-back-btn {
  animation: rv-glow 170ms steps(2) infinite alternate;
}

.rv-slot[data-state='charging'] .rv-pedestal {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fx) 55%, transparent) 0 55%, color-mix(in srgb, var(--fx) 25%, transparent) 55% 80%, transparent 80%);
}

/* ---- giro ---- */

.rv-slot[data-state='flipping'] .rv-lift {
  animation: rv-slam 520ms both;
}

.rv-slot[data-state='flipping'] .rv-card {
  animation: rv-whip 520ms both;
}

.rv-slot[data-state='revealed'] .rv-card {
  transform: rotateY(180deg);
}

.rv-slot[data-state='revealed'] .rv-pedestal {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rarity, #fff) 30%, rgba(0, 0, 0, 0.5)) 0 55%, rgba(0, 0, 0, 0.25) 55% 80%, transparent 80%);
}

.summon-modal-overlay.is-climax .rv-slot:not([data-state='charging']):not([data-state='flipping']):not(.is-holo) {
  opacity: 0.28;
  filter: saturate(0.4);
}

/* ---- folha holográfica e RGB separado ---- */

.rv-holo {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,
    transparent 18%,
    rgba(255, 70, 160, 0.6) 30%,
    rgba(255, 226, 70, 0.6) 38%,
    rgba(70, 255, 170, 0.6) 46%,
    rgba(70, 170, 255, 0.6) 54%,
    rgba(190, 100, 255, 0.55) 62%,
    transparent 76%) no-repeat;
  background-size: 280% 100%;
}

.rv-slot.is-holo .rv-holo {
  animation: rv-sheen 1300ms steps(10) forwards;
}

.rv-slot.is-rgb .rv-front .summon-card-item {
  animation-name: rv-rgb;
  animation-duration: 480ms;
  animation-timing-function: steps(1);
  animation-iteration-count: 1;
}

/* ---- flash e letreiro ---- */

.rv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  image-rendering: pixelated;
}

.rv-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0, var(--flash-color, #fff) 65%, transparent 100%);
}

.rv-flash.is-on {
  animation: rv-flash 420ms steps(6) forwards;
}

.rv-banner {
  position: absolute;
  top: 11%;
  left: 50%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

.rv-banner.is-on {
  animation: rv-banner 2000ms steps(1) forwards;
}

.rv-banner.is-tag.is-on {
  animation-duration: 1100ms;
}

.rv-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  /* preenchimento claro da cor da raridade, com o contorno preto e a base colorida do letreiro original */
  color: color-mix(in srgb, var(--fx, #fff) 68%, #fff);
  text-shadow:
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000,
    0 6px 0 var(--fx, #fff);
}

.rv-banner.is-big .rv-banner-title {
  font-size: clamp(34px, 8vw, 60px);
}

.rv-banner.is-tag .rv-banner-title {
  font-size: clamp(20px, 4vw, 28px);
}

.rv-banner.rv-t-4 .rv-banner-title,
.rv-banner.rv-t-5 .rv-banner-title {
  font-size: clamp(40px, 10vw, 76px);
}

.rv-stars {
  color: var(--fx, #fff);
  font-size: 28px;
  line-height: 1;
  /* o espaço depois da última estrela é compensado para o conjunto ficar no centro */
  padding-left: 0.3em;
  letter-spacing: 0.3em;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

/* ---- tremor do modal no impacto ---- */

.summon-modal-card.is-quake {
  animation: modal-in 160ms ease both, rv-quake 480ms steps(1) both;
}

/* ---- quadros ---- */

@keyframes rv-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes rv-bob {
  0% { translate: 0 0; }
  25% { translate: 0 -2px; }
  50% { translate: 0 -4px; }
  75% { translate: 0 -2px; }
  100% { translate: 0 0; }
}

@keyframes rv-rise {
  from { translate: 0 0; }
  to { translate: 0 var(--rise, 0); }
}

@keyframes rv-shake {
  0% { transform: translate(calc(var(--amp) * 1px), 0); }
  25% { transform: translate(0, calc(var(--amp) * -1px)); }
  50% { transform: translate(calc(var(--amp) * -1px), calc(var(--amp) * 0.5px)); }
  75% { transform: translate(calc(var(--amp) * 0.5px), calc(var(--amp) * 1px)); }
  100% { transform: translate(calc(var(--amp) * 1px), 0); }
}

@keyframes rv-glow {
  from { box-shadow: 0 0 0 2px var(--fx), 0 0 10px var(--fx); }
  to { box-shadow: 0 0 0 3px var(--fx-light), 0 0 26px 2px var(--fx); }
}

@keyframes rv-heat {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rv-crack-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* O impacto cai em 72% (IMPACT_AT em summon-reveal.js): a carta bate no chão e os anéis saem. */
@keyframes rv-slam {
  0%, 48% { translate: 0 var(--rise, 0); }
  72% { translate: 0 0; }
  86% { translate: 0 3px; }
  100% { translate: 0 0; }
}

@keyframes rv-whip {
  0% { transform: rotateY(0) scale(1); animation-timing-function: steps(3); }
  35% { transform: rotateY(98deg) scale(1.1); }
  48% { transform: rotateY(98deg) scale(1.1); animation-timing-function: steps(3); }
  72% { transform: rotateY(188deg) scale(1.16); animation-timing-function: steps(2); }
  86% { transform: rotateY(176deg) scale(0.97); animation-timing-function: steps(2); }
  100% { transform: rotateY(180deg) scale(1); }
}

@keyframes rv-sheen {
  0% { opacity: 0.95; background-position: 100% 0; }
  88% { opacity: 0.95; background-position: 0 0; }
  100% { opacity: 0; background-position: 0 0; }
}

@keyframes rv-rgb {
  0% { filter: drop-shadow(-6px 0 0 rgba(255, 0, 70, 0.85)) drop-shadow(6px 0 0 rgba(0, 225, 255, 0.85)); }
  20% { filter: drop-shadow(-3px 0 0 rgba(255, 0, 70, 0.85)) drop-shadow(3px 0 0 rgba(0, 225, 255, 0.85)); }
  40% { filter: drop-shadow(4px 0 0 rgba(255, 0, 70, 0.85)) drop-shadow(-4px 0 0 rgba(0, 225, 255, 0.85)); }
  60% { filter: drop-shadow(-2px 0 0 rgba(255, 0, 70, 0.85)) drop-shadow(2px 0 0 rgba(0, 225, 255, 0.85)); }
  80% { filter: drop-shadow(1px 0 0 rgba(255, 0, 70, 0.85)) drop-shadow(-1px 0 0 rgba(0, 225, 255, 0.85)); }
  100% { filter: none; }
}

@keyframes rv-flash {
  from { opacity: var(--flash, 1); }
  to { opacity: 0; }
}

@keyframes rv-banner {
  0% { opacity: 0; transform: scale(2.4); }
  8% { opacity: 1; transform: scale(0.88); }
  14% { transform: scale(1.1); }
  20% { transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  88% { opacity: 0.5; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes rv-quake {
  0% { translate: calc(var(--quake, 4) * 1px) calc(var(--quake, 4) * -0.6px); }
  12% { translate: calc(var(--quake, 4) * -1px) calc(var(--quake, 4) * 0.5px); }
  24% { translate: calc(var(--quake, 4) * 0.7px) calc(var(--quake, 4) * 0.6px); }
  36% { translate: calc(var(--quake, 4) * -0.6px) calc(var(--quake, 4) * -0.4px); }
  50% { translate: calc(var(--quake, 4) * 0.4px) 0; }
  64% { translate: calc(var(--quake, 4) * -0.3px) calc(var(--quake, 4) * 0.2px); }
  80% { translate: calc(var(--quake, 4) * 0.15px) 0; }
  100% { translate: 0 0; }
}

@media (max-width: 700px) {
  .rv-slot {
    width: 144px;
  }

}

/* ---- despertar (v0.147.0): js/ui/awaken-cinematic.js ---- */

.aw-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--fx) 22%, #05060a) 0, #020306 70%);
  animation: aw-fade 360ms steps(4) both;
}

.aw-overlay .rv-canvas {
  position: fixed;
}

.aw-stage {
  position: absolute;
  inset: 0;
  --amp: 0;
}

.aw-stage.is-violent {
  --amp: calc(var(--shake, 5) * 1.6);
  animation: rv-shake 100ms steps(1) infinite;
}

.aw-stage.is-quake {
  animation: rv-quake 480ms steps(1) both;
}

.aw-fig {
  position: absolute;
  top: 46%;
  width: clamp(104px, 17vw, 168px);
  translate: -50% -50%;
  border-radius: var(--radius-m);
}

.aw-hero {
  left: 30%;
}

.aw-item {
  left: 70%;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: clamp(88px, 13vw, 128px);
  color: var(--fx);
}

.aw-item svg {
  width: 100%;
  height: 100%;
}

.aw-fig .portrait {
  border: 2px solid var(--fx);
}

.aw-fig[data-phase='glow'],
.aw-fig[data-phase='pull'] {
  animation: aw-glow 220ms steps(2) infinite alternate;
}

.aw-fig[data-phase='pull'] {
  transition: transform var(--pull-ms, 1400ms) steps(14, end), opacity var(--pull-ms, 1400ms) steps(14, end);
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.35) rotate(300deg);
  opacity: 0.85;
}

.aw-fig.is-gone {
  visibility: hidden;
  animation: none;
}

.aw-core {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 36px;
  height: 36px;
  translate: -50% -50%;
  background: #fff;
  box-shadow: 0 0 0 6px var(--fx-light), 0 0 40px 18px var(--fx);
  visibility: hidden;
  rotate: 45deg;
}

.aw-core.is-on {
  visibility: visible;
  animation: aw-core var(--charge-ms, 1300ms) steps(13, end) forwards;
}

.aw-result {
  position: absolute;
  top: 54%;
  left: 50%;
  translate: -50% -50%;
  visibility: hidden;
}

.aw-result.is-on {
  visibility: visible;
  animation: aw-pop 420ms steps(6) both;
}

.aw-result.is-still {
  animation: none;
}

.aw-card {
  width: clamp(150px, 42vw, 200px);
  box-shadow: 0 0 0 2px var(--fx), 0 0 36px 4px var(--fx);
}

.aw-card-class {
  display: flex;
  justify-content: center;
}

.aw-actions {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 9;
  display: flex;
  justify-content: center;
}

.aw-actions .hidden {
  display: none;
}

@keyframes aw-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aw-glow {
  from { box-shadow: 0 0 6px 1px var(--fx); filter: brightness(1.05); }
  to { box-shadow: 0 0 30px 8px var(--fx-light); filter: brightness(1.5); }
}

@keyframes aw-pop {
  0% { scale: 2.2; opacity: 0; }
  40% { scale: 0.9; opacity: 1; }
  70% { scale: 1.08; }
  100% { scale: 1; }
}

@keyframes aw-core {
  from { scale: 0.4; }
  to { scale: 3.2; }
}

@media (max-width: 700px) {
  .aw-hero { left: 28%; }
  .aw-item { left: 72%; }
}

/* ---- Celestial já revelada (v0.220) ----
   Depois de virada, a carta Celestial não pode parecer só uma carta clara: moldura grossa e saturada (ciano, magenta,
   dourado e violeta) girando, miolo luminoso, halo que pulsa e um brilho irisado que cruza a arte. Vale só para o
   resultado da invocação; a carta do inventário continua com a moldura de 12-neon.css. */
.rv-front .summon-card-item.rarity-celestial {
  border: 4px solid transparent;
  background:
    radial-gradient(ellipse 90% 55% at 50% 22%, rgba(142, 244, 255, 0.34), transparent 72%) padding-box,
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(255, 156, 242, 0.26), transparent 70%) padding-box,
    linear-gradient(180deg, #13243a, #0c1220 66%) padding-box,
    conic-gradient(from var(--neon-angle), #00f0ff, #ff3df2 14%, #ffe45c 28%, #00f0ff 42%, #8a5cff 58%, #ff3df2 72%, #57ff9a 86%, #00f0ff) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 16px 2px #00f0ff,
    0 0 36px 2px rgba(255, 61, 242, 0.7),
    0 0 72px -4px rgba(138, 92, 255, 0.75);
  animation: neon-spin 2.2s linear infinite, rv-celestial-pulse 1.5s ease-in-out infinite;
}

.rv-front .summon-card-item.rarity-celestial::before {
  height: 5px;
  background: linear-gradient(90deg, #00f0ff, #ff3df2, #ffe45c, #00f0ff);
  box-shadow: 0 0 12px #ff3df2;
}

.rv-front .summon-card-item.rarity-celestial::after {
  inset: -20% auto -20% 0;
  width: 55%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(142, 244, 255, 0.35) 50%,
    rgba(255, 156, 242, 0.35) 70%,
    transparent);
  mix-blend-mode: screen;
  animation: neon-sweep 2.6s ease-in-out infinite;
}

.rv-front .summon-card-item.rarity-celestial .rarity-label,
.rv-front .summon-card-item.rarity-celestial .item-name {
  text-shadow: 0 0 10px rgba(142, 244, 255, 0.9), 0 0 2px #fff;
}

.rv-front .summon-card-item.rarity-celestial .portrait {
  box-shadow: inset 0 0 18px rgba(142, 244, 255, 0.35);
}

@keyframes rv-celestial-pulse {
  50% { filter: brightness(1.22) saturate(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .rv-front .summon-card-item.rarity-celestial,
  .rv-front .summon-card-item.rarity-celestial::after {
    animation: none;
  }
}