/* Phone character creation: compact cards so the page is a few screens, not eight. Loaded last.
   Selectors are prefixed html[data-art-style] body #menu to outrank the theme rules. */
@media(max-width:700px){
  /* Class tiles: shorter, art cropped to a band */
  html[data-art-style] body #menu #classes{gap:6px}
  html[data-art-style] body #menu #classes .class-card{aspect-ratio:auto;height:74px;min-height:0}
  html[data-art-style] body #menu #classes .class-card strong{font-size:11px;line-height:1.1}

  /* Champion preview */
  html[data-art-style] body #menu #champion-preview{height:200px;top:0}
  html[data-art-style] body #menu .stage-halo{max-height:250px}

  /* Ability and ultimate cards: icon beside the name, short rules, one-line footer */
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .loadout-slots{gap:6px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"art title" "rules rules" "footer footer";gap:5px 8px;align-content:start;height:auto;min-height:0;padding:7px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-title{grid-area:title;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:40px;padding:0;margin:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-title b{font-size:13px;line-height:1.1}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-slot{position:static;font-size:11px;padding:1px 5px;margin:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-art{grid-area:art;width:40px;height:40px;aspect-ratio:1;margin:0;padding:0;border-radius:6px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-art .spell-icon{width:40px;height:40px;margin:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-check{width:16px;height:16px;font-size:11px;line-height:16px;top:-3px;right:-3px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-type{display:none}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules{grid-area:rules;padding:0;margin:0;min-height:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules strong{font-size:13px;margin:0 0 2px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules small{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-footer{grid-area:footer;display:flex;justify-content:space-between;gap:4px;padding:4px 0 0;margin:0;min-height:0;font-size:11px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .deck-help{font-size:12px;margin:4px 0 8px}

  /* Abilities: two per row so names and rules stay at the type floor (11px caps, 12px body). Cooldown only in the footer. */
  html[data-art-style] body #menu #ability-picker .loadout-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html[data-art-style] body #menu #ability-picker .ability-card{grid-template-columns:36px minmax(0,1fr);gap:5px 7px;padding:7px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-art{width:36px;height:36px;border-radius:5px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-art .spell-icon{width:36px;height:36px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-check{width:16px;height:16px;font-size:11px;line-height:16px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-title{min-height:36px;gap:2px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-title b{font-size:15px;line-height:1.05;overflow-wrap:anywhere}
  html[data-art-style] body #menu #ability-picker .ability-card .card-slot{font-size:11px;padding:0 5px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-rules strong{font-size:13px;margin:0 0 2px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-rules small{font-size:12px;line-height:1.3;-webkit-line-clamp:3}
  html[data-art-style] body #menu #ability-picker .ability-card .card-footer{padding-top:4px;font-size:11px}
  html[data-art-style] body #menu #ability-picker .ability-card .card-footer>span:last-child{display:none}

  /* Pinned launch bar: tighter so more of the page shows above it */
  html[data-art-style] body #menu .play-actions{padding:6px 10px max(8px,env(safe-area-inset-bottom));gap:5px 10px}
  html[data-art-style] body #menu .play-actions #start{min-height:42px;padding:6px;font-size:17px}
  html[data-art-style] body #menu .play-actions #enter-training{min-height:0;padding:5px 6px;font-size:10px}
  html[data-art-style] body #menu .play-actions #match-settings>summary{padding-top:4px;padding-bottom:4px}
  html[data-art-style] body #menu .lobby{padding-bottom:105px}
}
@media(max-width:700px){
  html[data-art-style] body #menu #ability-picker .ability-card{grid-template-areas:"art title" "rules rules" "reach reach" "stage stage" "footer footer"}
  html[data-art-style] body #menu #ability-picker .ability-stage{height:124px}
}