/* Screen 2, MODE SELECT: a wide-italic menu stack and a preview panel that swaps per mode. */
.modes { background: var(--ink); color: var(--chalk); }
.modes .screen__kicker b { background: var(--yellow); color: var(--ink); }
.modes .screen__title { color: var(--yellow); }
.modes__body {
  max-width: 1344px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.modes__group { font-size: 12px; color: var(--yellow); margin: 0 0 8px; padding-left: 44px; }
.modes__menu ul + .modes__group { margin-top: 26px; }
.modes__total { margin-top: 26px; padding-left: 44px; font-size: 11px; color: var(--chalk); }

.mode {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 2px 0; text-align: left; color: var(--chalk);
}
.mode__arrow {
  flex: none; width: 30px; height: 30px; visibility: hidden;
  background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
}
.mode__name {
  font-size: clamp(36px, 4.5vw, 68px); line-height: 1.04; font-stretch: 120%; color: transparent;
  -webkit-text-stroke: 2px var(--chalk);
  transition: font-stretch calc(var(--frame) * 9) steps(3, end), color calc(var(--frame) * 2) steps(1, end);
}
.mode.is-on .mode__arrow { visibility: visible; animation: nudge .4s steps(2, jump-none) infinite; }
.mode.is-on .mode__name {
  font-stretch: 150%; color: var(--yellow); -webkit-text-stroke: 0; text-shadow: 5px 5px 0 var(--p1);
}
.mode:focus-visible { outline: none; box-shadow: none; }
.mode:focus-visible .mode__name { outline: var(--line) solid var(--chalk); outline-offset: 4px; }

/* ---------- preview ---------- */
.modes__panel {
  position: sticky; top: 90px;
  min-height: 460px; padding: 26px 28px 30px; display: grid; align-content: start; gap: 18px;
  background: var(--yellow); color: var(--ink);
  border: var(--line-lg) solid var(--chalk); box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--p1);
}
.modes__panel.is-in { animation: panel-in calc(var(--frame) * 10) var(--pop); }
.modes__panel[data-mode="duel"], .modes__panel[data-mode="streamers"] {
  box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--p2);
}
@keyframes panel-in { from { transform: translateX(24px); } }
.modes__tag {
  justify-self: start; font-size: 11px; padding: 5px 9px 4px; background: var(--ink); color: var(--yellow);
}
.modes__rule {
  font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; font-stretch: 115%; line-height: 1.15; max-width: 24ch;
}
.modes__visual { margin-top: 8px; }

.mv-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 14px; background: var(--chalk);
  border: var(--line) solid var(--ink); box-shadow: var(--drop) var(--drop) 0 var(--ink);
}
.mv-card__art {
  width: 120px; height: 120px; background-color: var(--chalk); background-repeat: no-repeat;
  border: 2px solid var(--ink);
}
.mv-card__body { display: grid; gap: 6px; align-content: start; }
.mv-card__body > b { font-size: 28px; }
.mv-card__body > span { font-size: 11px; }
.mv-stat { display: grid; grid-template-columns: 50px 1fr 36px; align-items: center; gap: 10px; }
.mv-stat .t-pix { font-size: 10px; }
.mv-stat b { font-weight: 400; font-size: 12px; text-align: right; }
.mv-stat__track { position: relative; height: 12px; background: var(--ink); }
.mv-stat__track span {
  position: absolute; inset: 2px; background: var(--p1); clip-path: inset(0 calc((1 - var(--lit)) * 100%) 0 0);
}
.mv-card.is-hidden .mv-stat__track {
  background: repeating-linear-gradient(-12deg, var(--ink) 0 4px, var(--chalk) 4px 7px);
}
.mv-card.is-hidden .mv-stat b { color: var(--p2); }

.mv-duel {
  display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: start; gap: 16px;
}
.mv-duel > div { display: grid; grid-template-columns: repeat(5, 48px); gap: 5px; }
.mv-duel > b { font-size: 34px; }
.mv-duel > p { grid-column: 1 / -1; font-size: 11px; }
.mv-head {
  width: 48px; height: 48px; background-color: var(--chalk); background-repeat: no-repeat;
  border: var(--line) solid var(--ink);
}
.mv-head--p1 { box-shadow: 0 5px 0 var(--p1); }
.mv-head--p2 { box-shadow: 0 5px 0 var(--p2); }

.mv-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.mv-chips li {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 10px;
  background: var(--chalk); border: var(--line) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.mv-chips .t-pix { font-size: 10px; }
.mv-chips b { font-size: 18px; font-stretch: 130%; }