.card-training {
  margin: 1.8rem 0 3.5rem;
  overflow: hidden;
  border: 1px solid rgba(89, 71, 31, .24);
  border-radius: 1rem;
  background: #f8f4eb;
  box-shadow: 0 1.2rem 3rem rgba(19, 38, 30, .1);
}

.training-header { padding: clamp(1.15rem, 4vw, 2rem); border-bottom: 1px solid rgba(19, 38, 30, .14); }
.training-header h2 { margin: .35rem 0 .65rem; color: #172d23; font-size: clamp(2rem, 8vw, 3rem); }
.training-header > p { margin: 0; }
.training-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.training-category { color: #765f37; font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.training-progress-text { color: #52645a; font-size: .78rem; font-weight: 750; }
.training-progress { width: 100%; height: .45rem; overflow: hidden; border: 0; border-radius: 999px; background: #ddd5c6; color: #765f37; }
.training-progress::-webkit-progress-bar { background: #ddd5c6; }
.training-progress::-webkit-progress-value { background: #765f37; }
.training-progress::-moz-progress-bar { background: #765f37; }
.training-stage, .training-summary { padding: clamp(1.15rem, 4vw, 2rem); }
.training-context { display: inline-flex; min-height: 2rem; align-items: center; margin: 0 0 1.2rem; padding: .25rem .7rem; border-radius: 999px; background: #e9e2d4; color: #52645a; font-size: .75rem; font-weight: 750; }
.training-tricks { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.training-trick { padding: .85rem; border: 1px solid rgba(19, 38, 30, .14); border-radius: .7rem; background: #eee7da; }
.training-trick > strong { display: block; margin-bottom: .65rem; color: #52645a; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.training-plays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.training-plays li { min-width: 0; display: grid; justify-items: center; gap: .35rem; }
.training-player { max-width: 100%; overflow: hidden; color: #34483e; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.training-card { width: 3.35rem; min-height: 4.6rem; display: grid; place-items: center; border: 1px solid rgba(19, 38, 30, .2); border-radius: .45rem; background: #fffdf8; color: #14271e; box-shadow: 0 .3rem .8rem rgba(19, 38, 30, .12); font: 700 1.15rem/1 var(--serif); }
.training-card-h, .training-card-d { color: #a5332a; }
.training-question { margin: 1.6rem 0 .8rem; color: #172d23; font-size: clamp(1.45rem, 5vw, 2rem); }
.training-answers { display: grid; gap: .65rem; }
.training-answer {
  min-height: 3.25rem; padding: .75rem .9rem; border: 1px solid rgba(19, 38, 30, .22); border-radius: .65rem;
  background: #fffdf8; color: #21372c; font: 700 .92rem/1.35 var(--sans); text-align: left; cursor: pointer;
}
.training-answer:hover:not(:disabled) { border-color: #765f37; transform: translateY(-1px); }
.training-answer[aria-pressed="true"] { border-color: #765f37; box-shadow: 0 0 0 .15rem rgba(118, 95, 55, .18); }
.training-answer[data-result="correct"] { border-color: #286749; background: #e1f0e7; color: #164a32; }
.training-answer[data-result="wrong"] { border-color: #a24a3d; background: #f5dfda; color: #702c23; }
.training-answer:disabled { cursor: default; opacity: 1; }
.training-answer:focus-visible, .training-action:focus-visible { outline: .1875rem solid #8b6c2e; outline-offset: .15rem; }
.training-feedback { margin-top: 1rem; padding: 1rem; border-left: .25rem solid #286749; border-radius: 0 .6rem .6rem 0; background: #e1f0e7; }
.training-feedback[data-result="wrong"] { border-left-color: #a24a3d; background: #f5dfda; }
.training-feedback strong { color: #172d23; }
.training-feedback p { margin: .35rem 0 0; color: #34483e; }
.training-controls { display: flex; justify-content: flex-end; margin-top: 1rem; }
.training-action { min-height: 3rem; padding: .6rem 1.1rem; border: 1px solid #765f37; border-radius: 999px; background: #765f37; color: #fffdf8; font-weight: 800; cursor: pointer; }
.training-action:disabled { cursor: not-allowed; opacity: .45; }
.training-summary { text-align: center; }
.training-summary h3 { margin: 0; color: #172d23; font-size: clamp(1.8rem, 7vw, 2.7rem); }
.training-summary-score { display: block; margin: .8rem 0; color: #765f37; font: 400 clamp(3rem, 14vw, 5rem)/1 var(--serif); }
.training-summary p { max-width: 34rem; margin: 0 auto 1.2rem; }
.card-training [hidden] { display: none !important; }

@media (min-width: 42rem) {
  .training-tricks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .training-card { width: 4rem; min-height: 5.4rem; font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card-training *, .card-training *::before, .card-training *::after { scroll-behavior: auto !important; transition: none !important; }
}