/* Heroes: the three combat styles, the six rarities and the seven skills. */

/* ---------- Combat styles ---------- */
.classes { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; }
.class-detail { max-width: 400px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.class-kind { margin-bottom: 8px; color: var(--accent); font-size: 14px; }
.class-detail h3 { margin-bottom: 12px; font-size: 42px; }
.class-description { min-height: 54px; color: var(--muted); font-size: 16px; }
.class-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 22px; }
.class-stats dt { margin-bottom: 6px; color: var(--dim); font-size: 13px; }
.class-stats dd { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 15px; }
.range-cells { display: flex; gap: 4px; }
.range-cells i { width: 12px; height: 12px; background: #2f3a4a; }
.range-cells .on { background: var(--accent); }
/* The area's burst: fire for the sword, lightning for the spear, ice for the bow (frames 5 to 14 of the game's bursts). */
.burst-icon { width: 64px; height: 64px; margin: -16px -12px -16px -16px; background: url("../assets/effects/burst-fire.png") -320px 0 / 960px 64px no-repeat; image-rendering: pixelated; animation: burst-loop 1.2s steps(10) infinite; }
@keyframes burst-loop { to { background-position-x: -960px; } }
.burst-icon[data-element="lightning"] { background-image: url("../assets/effects/burst-electric.png"); }
.burst-icon[data-element="ice"] { background-image: url("../assets/effects/burst-ice.png"); }

.class-gallery { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 16px; }
.class-card {
  position: relative;
  min-width: 0;
  padding: 20px 12px 24px;
  border: 0;
  text-align: center;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 0 0 6px var(--plate), inset 0 0 0 7px #2a3446, 0 14px 28px #05070c50;
  clip-path: var(--corners);
  transition: transform .25s, background .25s, box-shadow .25s;
}
.class-card:nth-child(1) { transform: rotate(-4deg) translateY(16px); }
.class-card:nth-child(3) { transform: rotate(4deg) translateY(16px); }
.class-card:hover { background: #20293a; }
.class-card.selected { background: #1f2a3a; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px #1f2a3a, inset 0 0 0 7px #34506e, 0 0 40px #57b9ff26; }
.class-card:nth-child(1).selected { transform: rotate(-4deg) translateY(4px); }
.class-card:nth-child(2).selected { transform: translateY(-12px); }
.class-card:nth-child(3).selected { transform: rotate(4deg) translateY(4px); }
.class-card-weapon { display: block; color: #8fa6bd; font-size: 13px; }
.selected .class-card-weapon { color: var(--accent); }
.class-card-art { display: grid; place-items: center; height: 200px; margin: 10px 0 14px; background: radial-gradient(ellipse at 50% 55%, #57b9ff1f, transparent 66%); }
.class-card-art .hero-sprite { --scale: 9; translate: 0 -8px; }
.class-card.selected .hero-sprite, .class-card:hover .hero-sprite { animation: hero-idle 3.2s steps(16) infinite; }
.class-card-name { display: block; font: 32px/1 var(--display); }
.class-card-range { display: block; margin-top: 6px; color: var(--dim); font-size: 13px; }

/* ---------- Rarities ---------- */
.rarities { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 56px; margin-top: 120px; padding-top: 72px; border-top: 1px solid var(--line); }
.rarities-copy h3 { margin-bottom: 16px; font-size: 42px; line-height: .95; }
.rarities-copy p { margin-bottom: 26px; color: var(--muted); font-size: 16px; }
.rarities-copy .button { min-height: 50px; font-size: 26px; }
.rarity-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.rarity-cards li { display: grid; justify-items: center; gap: 14px; }
.rarity-cards .card { --scale: 3; }
.card-caption { display: grid; justify-items: center; gap: 8px; }
.card-caption > span:first-child { font: 24px/1 var(--display); color: var(--dim); transition: color .3s; }
.power { display: flex; gap: 3px; }
.power i { width: 8px; height: 8px; background: #2a3141; }
/* A rarity shows its name and step only once its card turns. */
li:has(.card.is-face) .card-caption > span:first-child { color: var(--caption-color); }
li:has(.card.is-face) .power .on { background: var(--caption-color); }
.rarity-cards li:nth-child(1) { --caption-color: var(--common); }
.rarity-cards li:nth-child(2) { --caption-color: var(--uncommon); }
.rarity-cards li:nth-child(3) { --caption-color: var(--rare); }
.rarity-cards li:nth-child(4) { --caption-color: var(--epic); }
.rarity-cards li:nth-child(5) { --caption-color: var(--legendary); }
.rarity-cards li:nth-child(6) { --caption-color: var(--mythic); }
li:has(.card:not(.is-face)) .card-caption { visibility: hidden; }

/* ---------- Skills ---------- */
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--line); }
.skills-copy { padding: 4px 24px 0 0; }
.skills-copy h3 { margin-bottom: 16px; font-size: 44px; line-height: .95; }
.skills-copy p { color: var(--muted); font-size: 16px; }
.skill-list { display: contents; }
.skill-list li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 14px 16px 16px 14px; background: var(--plate); box-shadow: inset 0 0 0 2px var(--line); clip-path: var(--corners); }
.skill-icon { --skill: 0; grid-row: span 2; width: 56px; height: 56px; background: #141822 url("../assets/ui/skills.png") calc(4px - 48px * var(--skill)) 4px / 336px 48px no-repeat; box-shadow: inset 0 0 0 2px #3a4157, inset 0 -4px 0 #10131a; clip-path: var(--corners-small); image-rendering: pixelated; }
.skill-list h4 { align-self: end; font-size: 24px; line-height: .95; }
.skill-list p { color: var(--muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 1199px) {
  .classes { gap: 32px; }
  .class-card-art { height: 170px; }
  .class-card-art .hero-sprite { --scale: 7; }
  .class-card-name { font-size: 28px; }
  .rarities { grid-template-columns: 1fr; gap: 36px; }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .skills-copy { grid-column: 1 / -1; max-width: 560px; padding: 0 0 24px; }
  .rarities-copy { max-width: 560px; }
}
@media (max-width: 959px) {
  .classes { grid-template-columns: 1fr; }
  .class-detail { max-width: 560px; }
  .class-gallery { max-width: 640px; width: 100%; justify-self: center; }
  .rarity-cards { grid-template-columns: repeat(3, auto); justify-content: center; gap: 28px 32px; }
  .skills { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
  .class-gallery { gap: 8px; }
  .class-card { padding: 14px 4px 18px; }
  .class-card-art { height: 130px; }
  .class-card-art .hero-sprite { --scale: 5; }
  .class-card-name { font-size: 22px; }
  .class-card-weapon, .class-card-range { font-size: 12px; }
  .rarities { margin-top: 80px; padding-top: 56px; }
  .rarity-cards { gap: 22px 12px; }
  .rarity-cards .card { --scale: 2; }
  .rarity-cards .card-face .hero-sprite { --scale: 3; }
  .card-caption > span:first-child { font-size: 20px; }
  .skills { grid-template-columns: 1fr; margin-top: 72px; padding-top: 56px; }
}