/* Compact screens: keep icons/levels on their own row so long skill names do
   not collide with the level. Desktop card geometry is intentionally unchanged. */
@media (max-width: 760px) {
  .skill-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 7px;
  }
  .skill-card-top > .skill-art { grid-column: 1; grid-row: 1; }
  .skill-card-top > strong { grid-column: 2; grid-row: 1; }
  .skill-card-top > div { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .skill-card-top h3 { overflow-wrap: anywhere; }
}