/*
 * spells.css — feature "spells-roombar" (spec 03 §2–§4): the nine spell cards, the
 * 主/防 recommendation panel, the 9 badge rainbow, and (per CONTRACT §10.5) the shared
 * room-switch animation block for .spell-grid / .history-panel / .trend-panel.
 * Values verbatim from the original stylesheet; source order kept.
 */

.spell-section {
  margin-top: 12px;
}

.spell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .92fr);
  grid-auto-rows: minmax(118px, auto);
  gap: 7px;
}

.spell-card {
  min-height: 118px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 8px;
  padding: 8px 6px 7px;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 48px), linear-gradient(180deg, #131f30eb, #080f1af0);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
}

.spell-card.trace-selectable {
  cursor: pointer;
}

.spell-card.trace-selectable:active {
  transform: translateY(1px);
}

.spell-card.is-trace-selected {
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 2px color-mix(in srgb, var(--accent) 88%, #ffffff 12%), 0 0 14px color-mix(in srgb, var(--accent) 52%, transparent);
}

.spell-card.solo-nine {
  grid-column: 5;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 243px;
  padding-top: 20px;
}

.beast-visual {
  position: relative;
  width: 76px;
  height: 58px;
  margin: -4px auto 3px;
  display: grid;
  place-items: center;
}

.beast-visual img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  transform: translate(var(--beast-shift-x, -4px), var(--beast-shift-y, 0));
}

.beast-visual span {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translate(calc(-50% + var(--beast-label-shift-x, 0px)), var(--beast-label-shift-y, 0));
  max-width: 74px;
  padding: 1px 5px 2px;
  border-radius: 999px;
  background: #030912a8;
  color: #fff7e6;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.spell-card.solo-nine .beast-visual {
  width: 106px;
  height: 92px;
  margin: -4px auto 2px;
}

.spell-card.solo-nine .beast-visual img {
  width: 88px;
  height: 88px;
}

.spell-card.solo-nine .beast-visual span {
  bottom: 3px;
  max-width: 82px;
  font-size: 11px;
}

/* Explicit placement: these come AFTER .solo-nine on purpose (spec 03 §2.1 note on missing spells). */
.spell-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.spell-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.spell-card:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.spell-card:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}

.spell-card:nth-child(5) {
  grid-column: 1;
  grid-row: 2;
}

.spell-card:nth-child(6) {
  grid-column: 2;
  grid-row: 2;
}

.spell-card:nth-child(7) {
  grid-column: 3;
  grid-row: 2;
}

.spell-card:nth-child(8) {
  grid-column: 4;
  grid-row: 2;
}

.spell-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.spell-main strong {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

.spell-main b {
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--num-border, rgba(255, 255, 255, .78));
  background: var(--num-bg, #fff);
  color: var(--num-fg, #101827);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

/* Present in the original, unused by the template. */
.spell-card p {
  margin: 4px 0 0;
  color: #fff7e6;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spell-card footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 4px;
}

.spell-card footer span {
  min-height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #ffffff14;
  color: #fff;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.spell-card footer .omission-stat {
  grid-column: 1 / -1;
  min-height: 18px;
}

/* ------------------------------------------------------------------ */
/* 主/防 recommendation (members only, inside the 9 card)             */
/* ------------------------------------------------------------------ */
.recommend-panel {
  width: 100%;
  margin-top: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 1px solid rgba(245, 216, 142, .22);
  border-radius: 7px;
  background: linear-gradient(180deg, #111e31eb, #09111ef5), radial-gradient(circle at 50% 0, rgba(245, 216, 142, .14), transparent 120px);
}

.recommend-label,
.recommend-number {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  font-weight: 850;
}

.recommend-label {
  justify-self: center;
  width: 52px;
  height: 18px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  box-shadow: inset 0 1px #ffffff61;
}

.recommend-main {
  background: linear-gradient(90deg, #b71914, #ff6045);
}

.recommend-guard {
  background: linear-gradient(90deg, #c8911d, #ffe08a);
  color: #5b3600;
}

.recommend-number {
  min-width: 22px;
  height: 22px;
  border: 1px solid var(--num-border, rgba(255, 255, 255, .72));
  background: var(--num-bg, rgba(255, 255, 255, .9));
  color: var(--num-fg, #162033);
  font-size: 13px;
}

.recommend-picks {
  min-width: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Rainbow 9 badge on the card (after the shared .num-9 in base.css)  */
/* ------------------------------------------------------------------ */
.spell-main b.num-9 {
  background: linear-gradient(135deg, #ff39f6, #37d8ff, #60ff9b, #ffe45f, #ff6a3d, #ff39f6);
  background-size: 260% 260%;
  color: #000;
  border-color: #fffffff5;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .7), 0 0 6px rgba(255, 255, 255, .62);
  box-shadow: 0 0 0 2px #ffffff57, 0 0 10px #50dcffd1, 0 0 18px #ff3ce1a8, 0 0 25px #ffe0446b;
  animation: badgeRainbowShift 1.65s linear infinite, badgeRainbowPop 1.2s ease-in-out infinite alternate;
}

@keyframes badgeRainbowShift {
  0% {
    background-position: 0% 50%;
  }
  to {
    background-position: 220% 50%;
  }
}

@keyframes badgeRainbowPop {
  0% {
    filter: saturate(1.08) brightness(1);
    transform: translateY(0) scale(1);
  }
  to {
    filter: saturate(1.45) brightness(1.15);
    transform: translateY(-1px) scale(1.08);
  }
}

/* ------------------------------------------------------------------ */
/* Room-switch animation (spec 03 §2.6 / spec 05 §5.6) – shared block */
/* ------------------------------------------------------------------ */
.spell-grid.is-room-transition,
.history-panel.is-room-transition,
.trend-panel.is-room-transition {
  position: relative;
  isolation: isolate;
  animation: roomDataPanelIn .56s cubic-bezier(.2, .8, .2, 1) both;
}

.spell-grid.is-room-transition:after,
.history-panel.is-room-transition:after,
.trend-panel.is-room-transition:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 18%, rgba(120, 229, 255, .34) 30%, rgba(255, 232, 151, .42) 42%, transparent 58% 100%);
  mix-blend-mode: screen;
  transform: translate(-115%);
  animation: roomDataSweep .66s ease-out both;
}

.spell-grid.is-room-transition .spell-card {
  animation: roomCardPulse .62s cubic-bezier(.2, .8, .2, 1) both;
}

.spell-grid.is-room-transition .spell-card:nth-child(2n) {
  animation-delay: 35ms;
}

.spell-grid.is-room-transition .spell-card:nth-child(3n) {
  animation-delay: .07s;
}

.history-panel.is-room-transition .history-cell,
.trend-panel.is-room-transition .trend-row {
  animation: roomCellFlash .58s ease-out both;
}

@keyframes roomDataPanelIn {
  0% {
    opacity: .72;
    transform: translateY(5px) scale(.992);
    filter: saturate(.9) brightness(.86);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes roomDataSweep {
  0% {
    opacity: 0;
    transform: translate(-115%);
  }
  18% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(115%);
  }
}

@keyframes roomCardPulse {
  0% {
    transform: translateY(3px) scale(.985);
    filter: brightness(.88);
  }
  58% {
    transform: translateY(-2px) scale(1.012);
    filter: brightness(1.18);
  }
  to {
    transform: none;
    filter: none;
  }
}

@keyframes roomCellFlash {
  0% {
    filter: brightness(.86) saturate(.9);
  }
  45% {
    filter: brightness(1.24) saturate(1.18);
  }
  to {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spell-grid.is-room-transition,
  .history-panel.is-room-transition,
  .trend-panel.is-room-transition,
  .spell-grid.is-room-transition .spell-card,
  .history-panel.is-room-transition .history-cell,
  .trend-panel.is-room-transition .trend-row {
    animation: none;
  }

  .spell-grid.is-room-transition:after,
  .history-panel.is-room-transition:after,
  .trend-panel.is-room-transition:after {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* ≤360px (spells part of the original 2568 block)                    */
/* ------------------------------------------------------------------ */
@media (max-width: 360px) {
  .spell-grid {
    grid-auto-rows: minmax(104px, auto);
    gap: 5px;
  }

  .spell-card {
    min-height: 104px;
    padding-inline: 4px;
  }

  .beast-visual {
    width: 68px;
    height: 52px;
  }

  .beast-visual img {
    width: 52px;
    height: 52px;
  }

  .beast-visual span {
    max-width: 66px;
    font-size: 9px;
  }

  .spell-card.solo-nine {
    min-height: 213px;
  }

  .spell-main strong {
    font-size: 19px;
  }
}