/* Games Library visuals: engine covers (illustration = game identity) in DE level colors
   (color = Learning Path identity). Colors arrive per card as --lv-a (accent), --lv-t (tint), --lv-i (ink). */
.dx-game-card { --lv-a: #2FA59F; --lv-t: #E7F6F4; --lv-i: #0F5655; }
.dx-game-card .dx-game-card__media.dx-cover {
	height: auto; aspect-ratio: 320 / 176; display: block; overflow: hidden;
	background: var(--lv-t); border-bottom: 4px solid var(--lv-a);
}
.dx-cover__art { display: block; width: 100%; height: 100%; }
.dx-cover .ca { fill: var(--lv-a); }
.dx-cover .ct { fill: var(--lv-t); }
.dx-cover .ci { fill: var(--lv-i); }
.dx-cover .sa { stroke: var(--lv-a); }
.dx-cover .si { stroke: var(--lv-i); }
.dx-cover .tw { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; fill: #1C2B3D; }
.dx-cover .tw-on { fill: #1C2B3D; }
.dx-cover .tw-dim { fill: var(--lv-a); }
.dx-cover .tw-chg { fill: var(--lv-i); text-decoration: underline; }
.dx-game-card .dx-cover__art { transition: transform .25s ease; }
.dx-game-card:hover .dx-cover__art { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .dx-game-card .dx-cover__art { transition: none; } .dx-game-card:hover .dx-cover__art { transform: none; } }

/* Badges: skill is neutral; the DE level badge carries the level color (plus its name in text). */
.dx-chip--skill { background: #EEF3F4; color: #2A3A4C; }
.dx-chip--level { background: var(--lv-t); color: var(--lv-i); box-shadow: inset 0 0 0 1.5px var(--lv-a); font-weight: 700; }
.dx-chip__dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; transform: rotate(45deg); background: var(--lv-a); box-shadow: 0 0 0 1.5px var(--lv-i); vertical-align: 0.02em; }

/* Card rhythm: titles and badges wrap without pushing the Play button out of line. */
.dx-game-card .dx-game-card__title { overflow-wrap: anywhere; }
.dx-game-card .dx-game-card__meta { row-gap: 6px; }