/* Seleção das bênçãos usando a arte original completa.
   Todos os seletores são limitados à etapa de bênção. */

#creation[data-creation-step="blessing"] .creation-card.creation-wizard{
  width:min(1540px,98vw)!important;
  padding:20px 22px 26px!important;
}

#creation[data-creation-step="blessing"] .aetheria-header{
  max-width:850px!important;
  margin:0 auto 14px!important;
}

#creation[data-creation-step="blessing"] #blessingGrid.blessing-art-board{
  position:relative!important;
  display:block!important;
  width:min(1500px,100%)!important;
  max-width:none!important;
  aspect-ratio:3/2!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
  border:1px solid #3d2b13!important;
  border-radius:4px!important;
  background:#000!important;
  box-shadow:0 22px 55px #000d,0 0 0 2px #100b05,inset 0 0 24px #000!important;
}

#creation[data-creation-step="blessing"] .blessing-board-image{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  object-fit:fill!important;
  border:0!important;
  border-radius:0!important;
  background:#000!important;
  filter:none!important;
  pointer-events:none!important;
  user-select:none!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit{
  --blessing-color:#e7b95c;
  position:absolute!important;
  z-index:3!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:2px solid transparent!important;
  border-radius:5px!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
  cursor:pointer!important;
  outline:0!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  z-index:1!important;
  border:1px solid transparent!important;
  border-radius:3px!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit::after{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  z-index:-1!important;
  display:block!important;
  border-radius:8px!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit:hover,
#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit:focus-visible{
  border-color:color-mix(in srgb,var(--blessing-color),#fff 30%)!important;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--blessing-color),transparent 72%),0 0 18px color-mix(in srgb,var(--blessing-color),transparent 52%)!important;
  transform:scale(1.008)!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit.selected{
  border-color:color-mix(in srgb,var(--blessing-color),#fff 38%)!important;
  box-shadow:
    inset 0 0 0 1px #fff3,
    inset 0 0 28px color-mix(in srgb,var(--blessing-color),transparent 67%),
    0 0 0 2px #080502,
    0 0 24px color-mix(in srgb,var(--blessing-color),transparent 34%),
    0 0 45px color-mix(in srgb,var(--blessing-color),transparent 58%)!important;
  transform:scale(1.012)!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit.selected::before{
  border-color:color-mix(in srgb,var(--blessing-color),#fff 22%)!important;
}

#creation[data-creation-step="blessing"] #blessingGrid .blessing-hit.selected::after{
  opacity:1!important;
  box-shadow:0 0 30px color-mix(in srgb,var(--blessing-color),transparent 42%)!important;
}

#creation[data-creation-step="blessing"] .blessing-selection-mark{
  position:absolute!important;
  z-index:8!important;
  top:9px!important;
  right:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:27px!important;
  padding:0 10px!important;
  border:1px solid color-mix(in srgb,var(--blessing-color),#fff 38%)!important;
  border-radius:3px!important;
  color:#fff5d2!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blessing-color),#17100a 52%),#160e08f5)!important;
  box-shadow:0 6px 14px #000c,0 0 15px color-mix(in srgb,var(--blessing-color),transparent 48%)!important;
  font:900 9px/1 Arial,sans-serif!important;
  letter-spacing:.11em!important;
  opacity:0!important;
  transform:translateY(-5px)!important;
  transition:.18s ease!important;
  pointer-events:none!important;
}

#creation[data-creation-step="blessing"] .blessing-hit.selected .blessing-selection-mark{
  opacity:1!important;
  transform:translateY(0)!important;
}

/* Posições exatas dos nove quadros sobre a arte 1536 × 1024. */
#creation[data-creation-step="blessing"] .blessing-strength{left:1.9%!important;top:4.05%!important;width:31.05%!important;height:27.9%!important;--blessing-color:#ff5428}
#creation[data-creation-step="blessing"] .blessing-magic{left:34.45%!important;top:4.05%!important;width:31.05%!important;height:27.9%!important;--blessing-color:#d366ff}
#creation[data-creation-step="blessing"] .blessing-life{left:67.05%!important;top:4.05%!important;width:31.05%!important;height:27.9%!important;--blessing-color:#a9ed32}
#creation[data-creation-step="blessing"] .blessing-luck{left:1.9%!important;top:35.0%!important;width:31.05%!important;height:28.0%!important;--blessing-color:#78e72d}
#creation[data-creation-step="blessing"] .blessing-speed{left:34.45%!important;top:35.0%!important;width:31.05%!important;height:28.0%!important;--blessing-color:#35baff}
#creation[data-creation-step="blessing"] .blessing-resurrection{left:67.05%!important;top:35.0%!important;width:31.05%!important;height:28.0%!important;--blessing-color:#48eaf2}
#creation[data-creation-step="blessing"] .blessing-tamer{left:1.9%!important;top:66.0%!important;width:31.05%!important;height:28.5%!important;--blessing-color:#ff9b28}
#creation[data-creation-step="blessing"] .blessing-hero{left:34.45%!important;top:66.0%!important;width:31.05%!important;height:28.5%!important;--blessing-color:#ffd33f}
#creation[data-creation-step="blessing"] .blessing-forbidden{left:67.05%!important;top:66.0%!important;width:31.05%!important;height:28.5%!important;--blessing-color:#ff3f2d}

#creation[data-creation-step="blessing"] .creation-step-actions{
  margin-top:17px!important;
}

/* Em telas menores, a mesma imagem vira cartões grandes e legíveis. */
@media(max-width:820px){
  #creation[data-creation-step="blessing"] .creation-card.creation-wizard{width:99vw!important;padding:12px 8px 18px!important}
  #creation[data-creation-step="blessing"] .aetheria-header{margin-bottom:9px!important}
  #creation[data-creation-step="blessing"] #blessingGrid.blessing-art-board{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:min(800px,100%)!important;aspect-ratio:auto!important;padding:5px!important;border:0!important;background:#030303!important;box-shadow:none!important}
  #creation[data-creation-step="blessing"] .blessing-board-image{display:none!important}
  #creation[data-creation-step="blessing"] #blessingGrid .blessing-hit{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;aspect-ratio:1.5!important;background-image:url('../media/blessings-aetheria.png')!important;background-size:300% 300%!important;background-repeat:no-repeat!important;border-color:#5d411e!important;box-shadow:0 8px 18px #000b!important}
  #creation[data-creation-step="blessing"] .blessing-strength{background-position:0% 0%!important}
  #creation[data-creation-step="blessing"] .blessing-magic{background-position:50% 0%!important}
  #creation[data-creation-step="blessing"] .blessing-life{background-position:100% 0%!important}
  #creation[data-creation-step="blessing"] .blessing-luck{background-position:0% 50%!important}
  #creation[data-creation-step="blessing"] .blessing-speed{background-position:50% 50%!important}
  #creation[data-creation-step="blessing"] .blessing-resurrection{background-position:100% 50%!important}
  #creation[data-creation-step="blessing"] .blessing-tamer{background-position:0% 100%!important}
  #creation[data-creation-step="blessing"] .blessing-hero{background-position:50% 100%!important}
  #creation[data-creation-step="blessing"] .blessing-forbidden{background-position:100% 100%!important}
}

@media(max-width:560px){
  #creation[data-creation-step="blessing"] #blessingGrid.blessing-art-board{grid-template-columns:1fr!important;max-width:500px!important}
  #creation[data-creation-step="blessing"] .blessing-selection-mark{top:7px!important;right:7px!important;min-height:23px!important;font-size:7px!important}
  #creation[data-creation-step="blessing"] .creation-step-actions{margin-top:11px!important}
}

@media(prefers-reduced-motion:reduce){
  #creation[data-creation-step="blessing"] #blessingGrid .blessing-hit,
  #creation[data-creation-step="blessing"] .blessing-selection-mark{transition:none!important}
}