/* Práctica (practice). Raíz: .screen.ui.s-practice (spec 8.15). Con amigos (room.css) usa los mismos
   nombres .cards-row / .opt-card con su propio prefijo. Las opciones (.chips/.chip) y las muestras de
   paño (.theme-pick) están en base.css. */

.s-practice .cards-row { display: flex; gap: 14px; padding: 12px; justify-content: center; align-items: center; }
.s-practice .stagger > * { animation-fill-mode: backwards; }
.s-practice .opt-card { width: 330px; height: 100%; max-height: 330px; padding: 14px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
/* Arte de cabecera con su halo: cede alto si hace falta */
.s-practice .oart { position: relative; flex: 0 1 auto; width: calc(56px * var(--art-k)); height: calc(52px * var(--art-k)); min-height: 36px; }
.s-practice .oart .halo { left: -40px; top: -34px; right: -40px; bottom: -34px; }
.s-practice .oart img { position: absolute; }
.s-practice .o-ball { left: 50%; top: 50%; height: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 5px 6px rgba(0,0,0,.55)); }
.s-practice .o-cueball { left: 50%; top: 50%; height: 88%; aspect-ratio: 1; transform: translate(-30%, -58%); filter: drop-shadow(0 5px 6px rgba(0,0,0,.55)); }
.s-practice .o-cue { right: 74%; top: 58%; width: 120px; height: 4px; transform: rotate(-11deg); transform-origin: 100% 50%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.s-practice .otitle { font-size: 24px; }
.s-practice .otext { margin: 0; max-width: 290px; }
.s-practice .ogroup { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 2px; }
.s-practice .ogroup .ty-over { white-space: nowrap; }
.s-practice .ogroup .ty-over .c-tx2 { color: var(--tx-2); }
.s-practice .chips { flex-wrap: nowrap; }
.s-practice .chip { padding: 0 10px; }
.s-practice .theme-pick { flex-wrap: nowrap; }
.s-practice .go { flex: none; width: 200px; margin-top: auto; }