/* Mobile and portrait tablet (≤ 900px): fighters side by side, a 5×3 grid, then the docks. */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .screen { padding: 72px var(--gutter); }
  .screen__head { grid-template-columns: minmax(0, 1fr); }
  .screen__title { font-size: clamp(28px, 7.4vw, 64px); }
  .screen__kicker { flex-wrap: wrap; font-size: 11px; }

  /* ---------- hero ---------- */
  .hero {
    --cell: calc((100vw - var(--gutter) * 2 - 12px - 4 * var(--cell-gap)) / 5); --cell-gap: 6px; min-height: 0;
    padding-bottom: 28px;
  }
  .hud { grid-template-columns: 1fr auto 1fr; height: 64px; gap: 10px; }
  .hud__brand .draft-wordmark, .hud__store, .hud__hi span { display: none; }
  .hud__side { gap: 12px; }
  .hud__timer { min-width: 84px; padding: 6px 12px 8px; }
  .hud__timer-num { font-size: 34px; }

  .stage {
    grid-template-columns: 1fr 1fr; grid-template-areas: 'title title' 'lede lede' 'p1 p2' 'grid grid';
    gap: 10px 8px;
  }
  .select { display: contents; }
  .select__title { grid-area: title; justify-self: center; font-size: clamp(18px, 5.8vw, 30px); margin-top: 6px; }
  .select__lede { grid-area: lede; justify-self: center; font-size: 14px; margin-bottom: 4px; }
  .grid-wrap { grid-area: grid; justify-self: center; padding: 6px; margin-top: 8px; }
  .grid [data-row="3"] { display: none; }
  .grid__head { height: 26px; gap: 3px; }
  .grid__head svg { width: 12px; height: 12px; }
  .grid__head .t-wide { font-size: 11px; font-stretch: 115%; }
  .cell { grid-template-rows: var(--cell) 18px; box-shadow: 3px 3px 0 var(--ink); }
  .cell__name { font-size: clamp(8px, calc(var(--cell) * .12), 12px); font-stretch: 105%; }
  .cursor::before { inset: -6px; border-width: 4px; }
  .cursor--p2::before { inset: -2px; border-width: 4px; }
  .cursor__tag { font-size: 9px; top: -20px; padding: 2px 5px 1px; }
  .cursor--p1 .cursor__tag { left: -6px; }
  .cursor--p2 .cursor__tag { display: none; }

  .fighter { height: clamp(236px, 40vw, 340px); }
  .fighter--p1 { grid-area: p1; margin-left: calc(var(--gutter) * -1); }
  .fighter--p2 { grid-area: p2; margin-right: calc(var(--gutter) * -1); }
  .fighter__slab-wrap { inset: 0 0 10px; }
  .fighter__slab { --lean: 28px; }
  .fighter__big { font-size: 64px; -webkit-text-stroke-width: 2px; top: 8px; }
  .fighter--p1 .fighter__big { left: calc(var(--gutter) + 2px); }
  .fighter--p2 .fighter__big { right: 20px; }
  .fighter__art { bottom: 64px; height: calc(100% - 70px); }
  .fighter.is-framed .fighter__art { bottom: 78px; height: calc(100% - 92px); }
  .fighter--p1 .fighter__art { left: auto; right: 4px; }
  .fighter--p2 .fighter__art { right: auto; left: 10px; }
  .fighter__plate { width: calc(100% - var(--gutter) - 8px); grid-template-columns: minmax(0, 1fr); }
  .fighter--p2 .fighter__plate { right: var(--gutter); }
  .fighter__who { font-size: 9px; margin-bottom: 6px; }
  .fighter--p2 .fighter__who { max-width: 100%; }
  .fighter__card { padding: 7px 10px 8px; gap: 4px; box-shadow: 4px 4px 0 var(--yellow); }
  .fighter__plate > * { min-width: 0; }
  .fighter__who { flex-wrap: wrap; max-width: 100%; }
  .fighter__meta { font-size: 9px; }
  .fighter__rtg { min-width: 30px; height: 20px; font-size: 12px; padding: 0 4px; }
  .fighter__stats { display: none; }

  .docks { grid-template-columns: 1fr; grid-template-areas: 'p1' 'p2' 'mid'; gap: 14px; padding-top: 22px; }
  .dock--p1 { grid-area: p1; }
  .dock--p2 { grid-area: p2; justify-items: start; }
  .dock--p2 .dock__label { flex-direction: row; padding: 0 8px 0 0; }
  .docks__mid { grid-area: mid; justify-self: stretch; margin-top: 6px; }
  .dock__slots { gap: 6px; }
  .slot { --slot: min(76px, calc((100vw - var(--gutter) * 2 - 24px - 20px) / 5)); }
  .hint-keys { display: none; }
  .select__hint { font-size: 9px; }

  /* ---------- VS: the split turns horizontal, fives above and below the VS ---------- */
  .vs__stage {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto auto; padding: 56px var(--gutter) 18px;
    --split: 10.63vw;
  }
  .vs__half--p1 { clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--split)), 0 calc(50% + var(--split))); }
  .vs__half--p2 { clip-path: polygon(0 calc(50% + var(--split)), 100% calc(50% - var(--split)), 100% 100%, 0 100%); }
  @keyframes half-in-l { from { transform: translateY(-100%); } }
  @keyframes half-in-r { from { transform: translateY(100%); } }
  .vs__team { font-size: 20px; }
  .vs__team--p1 { grid-row: 1; grid-column: 1; }
  .vs__team--p2 { grid-row: 5; grid-column: 1; margin-top: 16px; }
  .vs__five--p1, .vs__five--p2 { grid-column: 1; justify-content: center; padding: 0; gap: 6px; }
  .vs__five--p1 { grid-row: 2; margin-top: 12px; }
  .vs__five--p2 { grid-row: 4; margin-top: 0; align-self: end; }
  .vs__card { --w: min(104px, calc((100vw - var(--gutter) * 2 - 24px) / 5)); }
  .vs__card:nth-child(even) { translate: 0 10px; }
  .vs__name { font-size: 10px; margin-top: 4px; }
  .vs__role { display: none; }
  .vs__center { top: 44%; }
  .vs__burst { width: 190px; }
  .vs__word { font-size: 96px; -webkit-text-stroke-width: 5px; text-shadow: 6px 6px 0 var(--ink); }
  .vs__result { grid-row: 6; margin-top: 14px; gap: 10px; min-width: 0; width: 100%; }
  .vs__series { gap: 10px; padding: 8px 10px; }
  .pip { width: 22px; height: 22px; }
  .vs__banner { font-size: 26px; padding: 8px 16px 5px; }
  .vs__actions { gap: 12px; min-width: 0; max-width: 100%; padding: 0 6px; }
  .vs__actions .btn { max-width: 100%; padding: 10px 14px; }
  .vs__close { top: 12px; }

  /* ---------- screens ---------- */
  .cmd, .modes__body, .hiscore__body, .cont { grid-template-columns: minmax(0, 1fr); }
  .cmd > *, .modes__body > *, .hiscore__body > *, .cont > * { min-width: 0; }
  .cmd__row {
    grid-template-columns: 30px 1fr; grid-template-areas: 'num name' 'num input' 'num text'; padding: 16px 14px;
  }
  .cmd__row::before { display: none; }
  .cmd__demo { min-height: 320px; padding: 20px 14px; }
  .demo__reels { grid-template-columns: 1fr; }
  .reel b { font-size: 20px; }
  .demo__pool { grid-template-columns: repeat(3, 1fr); }
  .demo--lock { grid-template-columns: 1fr; justify-items: center; }
  .demo__card { width: 150px; }
  .mode__name { font-size: clamp(24px, 7vw, 40px); }
  .modes__panel { position: static; min-height: 0; padding: 20px; }
  .mv-card { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .mv-card__art { width: 60px; height: 60px; }
  .mv-card__body > b { font-size: 22px; }
  .mv-stat { grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 4px; }
  .mv-duel { grid-template-columns: 1fr; justify-items: center; }
  .mv-duel > div { grid-template-columns: repeat(5, 34px); }
  .mv-head { width: 34px; height: 34px; }

  .tower { height: 300vh; }
  .tower__sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; }
  .tower__info {
    align-self: start; padding-top: 52px; gap: 10px 12px; max-width: none;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0;
  }
  .tower__info > .screen__kicker, .tower__title, .tower__lede { grid-column: 1 / -1; }
  .tower__title { font-size: 26px; }
  .tower__lede { font-size: 13px; line-height: 1.35; }
  .tower__five .t-pix { display: none; }
  .tower__heads { gap: 4px; }
  .tower__heads span { width: clamp(23px, 7vw, 32px); height: clamp(23px, 7vw, 32px); border-width: 2px; box-shadow: 0 3px 0 var(--p1); }
  .tower__record { justify-self: end; gap: 8px; }
  .tower__record p {
    min-width: 0; padding: 3px 8px 1px; gap: 6px; box-shadow: 3px 3px 0 var(--ink); border-width: 3px;
  }
  .tower__record b { font-size: 24px; }
  .tower__record .t-pix { font-size: 10px; }
  .tower__status { font-size: 10px; justify-self: start; }
  .tower__info .btn { min-height: 36px; font-size: 13px; padding: 0 14px; justify-self: end; }
  .tower__view::before { width: 10px; }
  .tower__marker { top: 58%; }
  .plate { height: 44px; grid-template-columns: 40px 1fr 56px; width: 80%; }
  .plate__label { font-size: 14px; }
  .plate__res { font-size: 20px; }
  .plate--boss { height: 62px; width: 88%; }
  .plate--boss .plate__label { font-size: 18px; }

  .ch__banner-text { white-space: normal; font-size: 30px; line-height: 1; }
  .ch__intro, .ch__card { grid-column: 1 / -1; }
  .ch__steps { grid-template-columns: 1fr; }
  .ch__five b { font-size: 10px; }

  .hs__table th, .hs__table td { padding: 10px 10px; }
  .hs__table td { font-size: 15px; }
  .hs__table .hs__res { font-size: 9px; white-space: normal; }
  .hs__name { letter-spacing: .12em; }
  .hs__letters b { width: 20px; }
  .hs__new { display: none; }
  .argue__heads span { width: clamp(38px, 10vw, 48px); height: clamp(38px, 10vw, 48px); }

  .cont__title { font-size: 9.4vw; }
  .cab--big .cab__text { font-size: 20px; }
  .cab--big .cab__label { padding: 12px 16px 10px; }
  .cont__disc { width: 260px; }
  .cont__num { font-size: 180px; }
  .cab--big { --cap: 64px; }
  .foot { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .fighter { height: 184px; }
  .fighter__big { font-size: 48px; }
  .fighter__who { font-size: 8px; }
  .fighter__handle { display: none; }
  .hud__credit { font-size: 9px; }
  .hud__hi b { font-size: 13px; }
  .dock__slots { width: 100%; }
  .slot { --slot: calc((100vw - var(--gutter) * 2 - 28px) / 5); }
  .cab--big { --cap: 48px; gap: 12px; }
  .cab--big .cab__text { font-size: 18px; }
}

/* Keep all result controls reachable on small phones and in landscape. */
@media (max-height: 740px) and (max-width: 900px) {
  .vs__stage { overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; }
  .vs__stage > * { flex-shrink: 0; }
  .vs__team--p1 { order: 1; }
  .vs__five--p1 { order: 2; }
  .vs__center { order: 3; position: relative; top: auto; left: auto; translate: none; min-height: 140px; }
  .vs__five--p2 { order: 4; align-self: stretch; }
  .vs__team--p2 { order: 5; }
  .vs__result { order: 6; }
  .vs__burst { width: 120px; }
  .vs__word { font-size: 64px; }
  .vs__five--p1 { margin-top: 4px; }
  .vs__team--p2 { margin-top: 6px; }
  .vs__result { gap: 8px; margin-top: 8px; }
}

@media (max-width: 360px) {
  .vs__series { gap: 8px; padding: 8px; }
  .vs__pips { gap: 8px; }
  .vs__bo5 { font-size: 10px; }
  .vs__banner { font-size: 23px; padding: 8px 12px; }
}