/* /classes/ -- the seven classes.
   Every class block sets --cc (its in-game card colour); --k is a token's
   radius against the Standard's, so the tokens are drawn to scale. */

.cls-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* One accent across the site (2026-10-19 redesign): the class blocks still set
   --cc to their in-game card colour, but the page draws them all in the sky
   blue; the tokens themselves keep their class colours. */
.cls, .lineup__item, .clsnav li, .cmp tr, .chcard, [style*="--cc"] { --cc: var(--sky) !important; }
.cls, .lineup__item, .clsnav li, .cmp tr, .chcard { --cc-ink: var(--sky-2); }

/* ---------------------------------------------------------------- class token
   The game's own token (drawn by the game: the default kit, the class's
   name on the shirt, its ability tube in the class colour). --d is the
   disc's diameter; the disc fills .9375 of the image. */
.cls-tok {
  --d: 64px;
  display: block; flex: none; width: calc(var(--d) * var(--k, 1) / .9375); height: auto;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .5));
}

/* ---------------------------------------------------------------- hero + line-up */

.cls-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.lineup {
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(32px, 4.5vw, 52px);
  border-radius: var(--radius-lg); border: 1px solid #1E5B34; box-shadow: var(--shadow-lg);
  background: repeating-linear-gradient(90deg, var(--turf) 0 calc(100% / 14), var(--turf-light) calc(100% / 14) calc(100% / 7));
}
.lineup::before { /* chalk: the halfway line the team stands on, and the centre circle */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    linear-gradient(180deg, transparent calc(var(--line-y) - 1.5px), var(--chalk) calc(var(--line-y) - 1.5px), var(--chalk) calc(var(--line-y) + 1.5px), transparent calc(var(--line-y) + 1.5px)),
    radial-gradient(circle at 50% var(--line-y), transparent 118px, var(--chalk) 119px, var(--chalk) 122px, transparent 123px);
}
.lineup::after { /* night over the grass, floodlit in the middle */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 40%, rgba(16, 16, 14, .18), rgba(12, 12, 10, .78));
}
.lineup { --line-y: 94px; }
.lineup__list { list-style: none; margin: 0; padding: clamp(18px, 2.4vw, 26px) clamp(6px, 1.5vw, 18px) 4px; display: flex; flex-wrap: wrap; justify-content: center; }
.lineup__item { flex: 0 0 calc(100% / 7); min-width: 0; }
.lineup__item a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 12px; border-radius: 16px;
  color: var(--ink); text-decoration: none; text-align: center; transition: background .2s;
}
.lineup__item a:hover { background: rgba(12, 12, 10, .35); color: var(--ink); }
.lineup__disc { height: 128px; display: grid; place-items: center; }
.lineup__item .cls-tok { --d: 84px; transition: transform .25s var(--ease), filter .25s; }
.lineup__item a:hover .cls-tok, .lineup__item a:focus-visible .cls-tok {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 55%, transparent));
}
.lineup__name { font: 400 1.25rem/1.1 var(--display); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.lineup__ab { font: 700 .74rem/1.2 var(--label); letter-spacing: .09em; text-transform: uppercase; color: var(--cc-ink); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
/* the class on show (js/hub.js marks its link) */
.lineup__item a[aria-current="true"] { background: rgba(64, 181, 227, .18); box-shadow: inset 0 0 0 2px var(--sky), 0 0 30px -8px var(--sky); }
.lineup__item a[aria-current="true"] .cls-tok { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(64, 181, 227, .8)); }
.lineup__item a[aria-current="true"] .lineup__name { color: #fff; }
.lineup__note { margin: 0; padding: 0 16px 16px; text-align: center; font-size: .86rem; color: var(--ink-soft); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }

@media (max-width: 760px) {
  .lineup { --line-y: 67px; }
  .lineup__item { flex-basis: 25%; }
  .lineup__disc { height: 90px; }
  .lineup__item .cls-tok { --d: 58px; }
  .lineup__name { font-size: 1rem; }
  .lineup__ab { font-size: .64rem; letter-spacing: .05em; }
  .lineup::before { background: linear-gradient(180deg, transparent calc(var(--line-y) - 1.5px), var(--chalk) calc(var(--line-y) - 1.5px), var(--chalk) calc(var(--line-y) + 1.5px), transparent calc(var(--line-y) + 1.5px)); }
}

/* ---------------------------------------------------------------- primer */

.primer__card .card__body { gap: .8rem; }
.statdefs { margin: .3rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.statdefs > div { display: grid; grid-template-columns: 7.2em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.statdefs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.statdefs dt { font: 700 .78rem/1.6 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.statdefs dd { margin: 0; color: var(--ink-soft); }
.primer .checks { margin-top: .2rem; }

/* ---------------------------------------------------------------- sticky class nav */

.clsnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(16, 16, 14, .9); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-block: 1px solid var(--line-soft);
}
.clsnav__list {
  list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 8px; justify-content: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.clsnav__list::-webkit-scrollbar { display: none; }
.clsnav li { flex: none; }
/* the links take the hub strip's look (site.css .hub-bar) */
.cmp__dot {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cc) 55%, white), var(--cc) 60%, color-mix(in srgb, var(--cc) 70%, black));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 45%, black);
}
@media (max-width: 1020px) {
  .clsnav .container { padding-inline: 0; }
  .clsnav__list { justify-content: flex-start; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .clsnav__list::after { content: ""; flex: 0 0 1px; } /* keeps the right gutter when scrolled to the end */
}

/* ---------------------------------------------------------------- a class */

.cls {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line-soft);
  scroll-margin-top: 58px;
}
.cls-wrap > .clsnav + .cls { border-top: 0; }
.cls::before { /* floodlight in the class's colour, behind the picture */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(1100px, 120vw); aspect-ratio: 1; left: -18%; top: 50%; translate: 0 -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 13%, transparent), transparent);
}
.cls--flip::before { left: auto; right: -18%; }

/* The name and stats come first in the page, so on one column they lead and
   the picture sits just above the ability card it shows. Side by side, the
   picture goes left, or right on a --flip class. */
.cls__top { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .cls__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cls:not(.cls--flip) .cls__media { order: -1; }
}

.cls__media { margin: 0; min-width: 0; }
.cls__frame {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--bg-deep);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--cc, var(--sky)) 22%, transparent), 0 20px 60px -30px color-mix(in srgb, var(--cc, var(--sky)) 60%, transparent);
}
.cls__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.cls__frame img, .cls__frame .dg { display: block; width: 100%; height: 100%; object-fit: cover; }
.cls__frame--shot { cursor: zoom-in; }
/* the in-game shots are 1920 x 1080 with the action small in the middle:
   each frame zooms in on it (--zoom round --fx --fy); the lightbox shows it whole */
.cls__frame--shot img {
  --z: var(--zoom, 1); --ox: var(--fx, 50%); --oy: var(--fy, 50%);
  transform-origin: var(--ox) var(--oy); transform: scale(var(--z)); transition: transform .6s var(--ease), filter .3s;
}
.cls__frame--shot:hover img { transform: scale(calc(var(--z) * 1.03)); filter: brightness(1.06); }
/* phones: the frame is a third as wide, so each shot closes in further (--zoom-m round --fx-m --fy-m) */
@media (max-width: 640px) {
  .cls__frame--shot img { --z: var(--zoom-m, var(--zoom, 1)); --ox: var(--fx-m, var(--fx, 50%)); --oy: var(--fy-m, var(--fy, 50%)); }
}
.cls__badge.cls__badge--low { top: auto; bottom: 12px; }
.cls__badge {
  position: absolute; left: 12px; top: 12px; z-index: 1; padding: .4em .7em; border-radius: 8px;
  font: 700 .7rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: rgba(12, 12, 10, .78); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px);
}
.cls__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: rgba(12, 12, 10, .72); border: 1px solid rgba(255, 255, 255, .16);
  opacity: .85; transition: opacity .2s, transform .2s var(--ease);
}
.cls__zoom .icon { width: 20px; height: 20px; }
.cls__frame--shot:hover .cls__zoom, .cls__frame--shot:focus-visible .cls__zoom { opacity: 1; transform: scale(1.06); }
.cls__media figcaption { margin-top: 12px; font-size: .92rem; color: var(--muted); }

/* the diagrams: game-like labels with a dark halo so they read on the turf */
.dg text {
  font: 700 19px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; fill: #EEF3FB;
  paint-order: stroke; stroke: rgba(12, 12, 10, .82); stroke-width: 5px; stroke-linejoin: round;
}

@media (max-width: 560px) { .dg text { font-size: 22px; } }

.cls__intro { min-width: 0; }
.cls__kicker {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 0 .9rem;
  font: 700 .82rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--cc-ink);
}
.cls__kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.cls__head { display: flex; align-items: center; gap: 18px; }
.cls__head .cls-tok { --d: 78px; }
.cls-tokwrap { display: block; flex: none; }
@media (max-width: 760px) { .cls__head .cls-tok { --d: 62px; } }
.cls__name { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
.cls__lead { margin: 1.1rem 0 1.5rem; color: var(--ink-soft); font-size: 1.07rem; max-width: 60ch; }

/* the six stats as the game's pips (5 each), with the number beside them */
.pips { margin: 0; display: grid; gap: 10px; max-width: 470px; }
.pips__row { display: grid; grid-template-columns: 6.8em 1fr; align-items: center; gap: 12px; }
.pips dt { font: 700 .76rem/1 var(--label); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.pips dd { margin: 0; display: flex; align-items: center; gap: 14px; }
.pip { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pip i { display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.pip[data-v="1"] i:nth-child(-n+1),
.pip[data-v="2"] i:nth-child(-n+2),
.pip[data-v="3"] i:nth-child(-n+3),
.pip[data-v="4"] i:nth-child(-n+4),
.pip[data-v="5"] i:nth-child(-n+5) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 62%, white), var(--cc) 70%);
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--cc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pips__num { flex: none; width: 1.1em; text-align: right; font: 400 1.15rem/1 var(--display); color: var(--ink); }

/* ability + unlock */
.cls__bottom { display: grid; gap: 18px; margin-top: clamp(30px, 4vw, 48px); }
@media (min-width: 900px) { .cls__bottom { grid-template-columns: minmax(0, 1fr) 300px; } }
.ability {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--cc) 11%, var(--surface-2)), var(--surface) 65%);
}
.ability::after { /* the token's ability tube, as a ring in the corner, behind the text */
  content: ""; position: absolute; z-index: -1; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--cc) 30%, transparent);
}
@media (max-width: 640px) {
  .ability::after { right: -58px; top: -58px; width: 112px; height: 112px; border-color: color-mix(in srgb, var(--cc) 22%, transparent); }
}
.ability__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: .9rem; }
.ability__label { flex-basis: 100%; margin: 0; font: 700 .76rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ability__name { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.1rem); color: var(--cc-ink); }
.ability__cd {
  display: inline-flex; align-items: center; gap: .45em; padding: .42em .8em; border-radius: 999px;
  font: 700 .8rem/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  background: rgba(0, 0, 0, .25); border: 1px solid color-mix(in srgb, var(--cc) 40%, var(--line));
}
.ability__cd .icon { color: var(--cc-ink); }
.ability__quote { margin: 0 0 1.1rem; padding-left: 14px; border-left: 3px solid var(--cc); font: 400 1.14rem/1.45 var(--round); color: var(--ink); max-width: 62ch; }
.ability__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65em 30px; }
@media (min-width: 700px) { .ability__list { grid-template-columns: 1fr 1fr; } }
.ability__list li { position: relative; padding-left: 1.35em; color: var(--ink-soft); }
.ability__list li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: .55em; height: .55em; border-radius: 50%;
  background: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 22%, transparent);
}

.unlock {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; border-radius: var(--radius);
  background: rgba(12, 12, 10, .45); border: 1px dashed color-mix(in srgb, var(--cc) 50%, var(--line));
}
.unlock > * { margin: 0; }
.unlock__label { display: inline-flex; align-items: center; gap: .5em; font: 700 .76rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.unlock__label .icon { width: 1.25em; height: 1.25em; color: var(--cc-ink); }
.unlock__name { font: 400 1.55rem/1.1 var(--display); }
.unlock__name a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--cc) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.unlock__name a:hover { color: var(--cc-ink); }
.unlock__text { color: var(--ink-soft); font-size: .97rem; }
.unlock__mark { position: absolute; right: -16px; bottom: -24px; width: 128px; height: 128px; color: var(--cc); opacity: .07; pointer-events: none; }
.unlock__mark .icon { width: 100%; height: 100%; }
.unlock--start { border-style: solid; border-color: rgba(64, 181, 227, .35); background: rgba(64, 181, 227, .06); }
.unlock--start .unlock__label .icon { color: var(--green); }

/* ---------------------------------------------------------------- comparison */

.compare [role="tabpanel"]:focus-visible { outline-offset: 6px; }
.compare .tabs__tab .icon { width: 1.1em; height: 1.1em; }
.cmp { min-width: 560px; }
.cmp--numbers { min-width: 760px; }
.cmp th[scope="row"] { font: 400 1.05rem/1.3 var(--round); letter-spacing: 0; text-transform: none; background: transparent; color: var(--ink); white-space: nowrap; }
.cmp th[scope="row"] a { position: relative; display: inline-flex; align-items: center; gap: .6em; color: inherit; text-decoration: none; }
.cmp th[scope="row"] a::after { content: ""; position: absolute; inset: -10px -8px; } /* a finger-sized target, inside the cell's padding */
.cmp th[scope="row"] a:hover { color: var(--cc-ink); }
.cmp td strong { display: block; font-family: var(--round); font-weight: 400; font-size: 1.02rem; color: var(--cc-ink); }
.cmp__sub { display: block; font-size: .88rem; color: var(--muted); }
.cmp .num { text-align: right; white-space: nowrap; }
.cmp thead th.num { text-align: right; }
.cmp td, .cmp th { vertical-align: middle; }
.cmp--stars td { font: 400 1.1rem/1 var(--display); color: var(--ink); }
.cmp--stars .mini {
  display: inline-block; width: 42px; height: 6px; margin-right: 10px; vertical-align: .2em; border-radius: 2px;
  background: linear-gradient(90deg, var(--cc) 0 calc(var(--v) * 20%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6.5px, transparent 6.5px 8.9px);
          mask: repeating-linear-gradient(90deg, #000 0 6.5px, transparent 6.5px 8.9px);
}
.cmp--stars td[data-v="1"] { --v: 1; } .cmp--stars td[data-v="2"] { --v: 2; } .cmp--stars td[data-v="3"] { --v: 3; }
.cmp--stars td[data-v="4"] { --v: 4; } .cmp--stars td[data-v="5"] { --v: 5; }
.cmp__note { margin: -.4em 0 0; font-size: .9rem; color: var(--muted); max-width: 80ch; }
.cmp__swipe { display: none; }

@media (max-width: 700px) {
  .cmp--stars .mini { display: none; }
  .cmp--stars { min-width: 0; }
  .cmp--stars th, .cmp--stars td { padding: 10px 8px; }
  .cmp--stars th[scope="row"] { padding-left: 14px; font-size: 1rem; }
  .cmp--stars thead th.num { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; vertical-align: bottom; height: 6.6em; padding: 12px 8px 10px; }
  .cmp--stars td { font-size: 1.05rem; text-align: center; }
}

/* phones: each class in the abilities table becomes a little card */
@media (max-width: 640px) {
  .cmp--abilities { min-width: 0; display: block; }
  .cmp--abilities thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp--abilities tbody { display: block; }
  .cmp--abilities tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .cmp--abilities tr:last-child { border-bottom: 0; }
  .cmp--abilities th, .cmp--abilities td { display: block; padding: 0; border: 0; background: none !important; }
  .cmp--abilities th[scope="row"] { grid-column: 1 / -1; font-size: 1.1rem; }
  .cmp--abilities .cmp__ab, .cmp--abilities .cmp__un { padding-left: calc(14px + .6em); }
  .cmp--abilities .cmp__ab { grid-column: 1; }
  .cmp--abilities .cmp__cd { grid-column: 2; grid-row: 2; align-self: start; padding-top: 2px; color: var(--ink); }
  .cmp--abilities .cmp__un { grid-column: 1 / -1; font-size: .92rem; }
  .cmp--abilities .cmp__un::before { content: "Unlock: "; font: 700 .72rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .cmp__swipe { display: block; margin: 0 0 .7em; font-size: .9rem; color: var(--muted); }
}

/* ---------------------------------------------------------------- unlocking */

.unlocking__split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .unlocking__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.unlocking__media { margin: 0; min-width: 0; }
.unlocking__media .cls__frame { --cc: var(--gold); }
.unlocking__media figcaption { margin-top: 12px; font-size: .92rem; color: var(--muted); }
.unlocking__body .lead { margin-bottom: .4em; }
.unlocking__h { margin: clamp(48px, 6vw, 72px) 0 18px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }

.chgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.chcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 20px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cc) 9%, var(--surface-2)), var(--surface) 70%);
}
.chcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cc), transparent); }
.chcard > * { margin: 0; }
.chcard__unlocks { display: inline-flex; align-items: center; gap: .55em; font: 700 .74rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-ink); }
.chcard__unlocks .cmp__dot { width: 12px; height: 12px; }
.chcard__name { font: 400 1.4rem/1.15 var(--display); color: var(--ink); }
.chcard__text { flex: 1; color: var(--ink-soft); font-size: .96rem; }
.chcard__target {
  margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .24); border: 1px solid rgba(255, 255, 255, .05);
  font: 400 1.02rem/1.2 var(--round); color: var(--ink); text-align: right;
}
.chcard__target span { flex: none; font: 700 .7rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-align: left; }

.unlocking .switch { margin: 28px 0 0; }
.unlocking .switch > .icon { color: var(--sky); }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .lineup__item a:hover .cls-tok, .lineup__item a:focus-visible .cls-tok { transform: none; }
  .cls__frame--shot:hover img { transform: scale(var(--z)); }
}
.cmp__unit { display: block; margin-top: 3px; font-size: .64rem; letter-spacing: .08em; color: var(--faint); }