/* ORDEN DEL ECLIPSE — A12-R8-A2-R2
   LOCAL VISUAL SMOKE ONLY.
   Preserve A2 PASS: Guerreros disponibles.
   Fix Aux/Fragmentos by keeping canonical layout and repainting cloned canvases.
   Fix Seal Shop by fitting complete approved frames without crop.
*/

/* ============================================================
   GUERREROS DISPONIBLES — PRESERVE A2 PASS
   ============================================================ */
#summonPool .pool-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0,1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  text-align: left !important;
  overflow: hidden !important;
  min-width: 318px !important;
  min-height: 142px !important;
  padding: 10px 12px !important;
}
#summonPool .pool-portrait {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 120px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 43%,rgba(119,76,159,.15),transparent 56%),
    linear-gradient(180deg,rgba(14,9,22,.55),rgba(8,6,13,.22)) !important;
  border-radius: 12px !important;
}

/* ============================================================
   AUX / FRAGMENTOS — CANONICAL LAYOUT, PORTRAIT ONLY
   The original host layout is 4 cols, 66px art + text.
   We DO NOT enlarge the cards or typography.
   ============================================================ */
#altarAuxPanel .altar-aux-pool-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(190px,1fr)) !important;
  gap: 9px !important;
}

#altarAuxPanel .altar-aux-pool-grid .pool-card {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 94px !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0,1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 8px !important;
}

#altarAuxPanel .altar-aux-pool-grid .pool-portrait {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 78px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 46%,rgba(119,76,159,.13),transparent 58%),
    rgba(7,6,13,.34) !important;
  border-radius: 9px !important;
}

#altarAuxPanel .altar-aux-pool-grid .pool-card > div:last-child {
  min-width: 0 !important;
  width: auto !important;
}

#altarAuxPanel .altar-aux-pool-grid .pool-card strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.14 !important;
}

#altarAuxPanel .altar-aux-pool-grid .pool-card span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}

#summonPool .pool-portrait[data-ode-a12-r8-a2-r2-pool-ready] > img,
#altarAuxPanel .pool-portrait[data-ode-a12-r8-a2-r2-pool-ready] > img {
  display: none !important;
}

#summonPool .ode-a12r8a2r2-pool-canvas,
#altarAuxPanel .ode-a12r8a2r2-pool-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

@media(max-width:1250px){
  #altarAuxPanel .altar-aux-pool-grid {
    grid-template-columns:repeat(3,minmax(180px,1fr)) !important;
  }
}
@media(max-width:900px){
  #altarAuxPanel .altar-aux-pool-grid {
    grid-template-columns:repeat(2,minmax(170px,1fr)) !important;
  }
}
@media(max-width:560px){
  #altarAuxPanel .altar-aux-pool-grid {
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   TIENDA DE SELLOS — A12-R8-A2-R3 CANVAS FIT
   Complete approved bitmap is drawn into canvas. No object-fit.
   ============================================================ */

#a11PermanentSealsGrid .a11-seal-card.ode-a12r8a2r3-seal-card,
#a11ConvergenceSealsGrid .a11-seal-card.ode-a12r8a2r3-seal-card {
  display: grid !important;
  grid-template-columns: minmax(290px,40%) minmax(0,1fr) !important;
  grid-template-rows: auto auto auto auto minmax(58px,auto) !important;
  column-gap: 24px !important;
  align-items: center !important;
  min-height: 310px !important;
  overflow: hidden !important;
}

.ode-a12r8a2r3-seal-card > .a11-seal-status {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.ode-a12r8a2r3-seal-art {
  grid-column: 1 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
  justify-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 8px 10px 12px !important;
  overflow: visible !important;
  background: transparent !important;
}

.ode-a12r8a2r3-seal-canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 370px !important;
  aspect-ratio: 12 / 7 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.30));
}

.ode-a12r8a2r3-seal-card > h3 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  margin: 12px 0 4px !important;
}

.ode-a12r8a2r3-seal-card > p {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 0 8px !important;
}

.ode-a12r8a2r3-seal-card > .a11-seal-price {
  grid-column: 2 !important;
  grid-row: 4 !important;
  margin: 0 0 12px !important;
}

.ode-a12r8a2r3-seal-card > .a11-disabled-purchase,
.ode-a12r8a2r3-seal-card > button {
  grid-column: 2 !important;
  grid-row: 5 !important;
  align-self: end !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.ode-a12r8a2r3-seal-card[data-ode-a12-r8-a2-r3-seal-kind="permanent"] .ode-a12r8a2r3-seal-canvas {
  filter: drop-shadow(0 12px 24px rgba(81,38,120,.28));
}

.ode-a12r8a2r3-seal-card[data-ode-a12-r8-a2-r3-seal-kind="convergence"] .ode-a12r8a2r3-seal-canvas {
  filter: drop-shadow(0 12px 24px rgba(135,94,31,.24));
}

@media(max-width:980px){
  #a11PermanentSealsGrid .a11-seal-card.ode-a12r8a2r3-seal-card,
  #a11ConvergenceSealsGrid .a11-seal-card.ode-a12r8a2r3-seal-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }

  .ode-a12r8a2r3-seal-card > .a11-seal-status {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .ode-a12r8a2r3-seal-art {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 12px !important;
  }

  .ode-a12r8a2r3-seal-canvas {
    max-width: 360px !important;
  }

  .ode-a12r8a2r3-seal-card > h3 {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .ode-a12r8a2r3-seal-card > p {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .ode-a12r8a2r3-seal-card > .a11-seal-price {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  .ode-a12r8a2r3-seal-card > .a11-disabled-purchase,
  .ode-a12r8a2r3-seal-card > button {
    grid-column: 1 !important;
    grid-row: 6 !important;
  }
}