/* Mode TRAIN: cartes del jugador entrenat a l'esquerra de la foto, botó APRÈN a la dreta. */

.train-mode-toggle { min-width: 92px; }

.player.is-training {
  width: auto;
  max-width: calc(100vw - 8px);
}
/* Els dorsos sobren: ja es veuen les cartes reals. */
.player.is-training .player-hand { display: none; }

.train-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* .avatar porta margin:auto a styles.css i com a ítem flex absorbiria l'espai lliure. */
.train-row .avatar { flex: 0 0 auto; margin: 0; }

/* Als seients laterals una fila horitzontal centrada eixiria de pantalla:
   l'ancorem a la vora mantenint l'ordre cartes · foto · botó. */
.player.pos-1.is-training { left: 4px; transform: translate(0, -50%); }
.player.pos-3.is-training { left: auto; right: 4px; transform: translate(0, -50%); }

.train-cards { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.train-card {
  width: 24px;
  display: block;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  clip-path: inset(3.2% 2.9% round 2px);
}
/* La carta que vol jugar, esperant el vist-i-plau. */
.train-card.is-proposed {
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(245, 190, 76, .75);
  transform: translateY(-5px);
}

/* APRÈN a l'esquerra, OK a la dreta i més gran: és el gest habitual.
   Separació ampla perquè aprovar i corregir no es confonguen amb el polze. */
.train-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }

.train-ok,
.train-learn {
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
  /* .players-layer té pointer-events: none */
  pointer-events: auto;
}
.train-ok {
  min-width: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(96, 214, 150, .75);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(30, 116, 79, .97), rgba(13, 58, 46, .97));
  color: #ccffe6;
  font-size: 13px;
  box-shadow: 0 3px 0 rgba(4, 30, 22, .9);
}
.train-learn {
  border: 1px solid rgba(245, 190, 76, .55);
  background: linear-gradient(145deg, rgba(93, 60, 16, .95), rgba(28, 46, 40, .95));
  color: #ffe19a;
}
.train-ok:disabled,
.train-learn:disabled { opacity: .4; pointer-events: none; }

.train-play-reasoning {
  margin: 9px 0 0;
  color: #9fd8c4;
  font: italic 13px/1.45 Georgia, serif;
}

.train-corrected-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
}
.train-corrected {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(0, 24, 23, .8);
  color: #d8e6e1;
  font-size: 11px;
  font-weight: 850;
}
.train-corrected.is-card { padding: 5px; }
.train-corrected.is-card .train-card { width: 34px; }
.train-corrected.is-selected {
  border-color: #e6a64b;
  box-shadow: 0 0 0 3px rgba(230, 166, 75, .16);
}
/* La que ell proposa: triar-la manté la jugada i només canvia el motiu. */
.train-corrected.is-proposed-option {
  position: relative;
  border-color: rgba(96, 214, 150, .55);
}
.train-corrected.is-proposed-option small {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 999px;
  background: #1c5d40;
  color: #b6ffd8;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.train-corrected-actions { padding-bottom: 6px; }

.train-lesson-dialog .field-label small {
  display: block;
  margin-top: 3px;
  color: #9fd8c4;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.train-amount {
  width: 62px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid rgba(230, 166, 75, .5);
  border-radius: 10px;
  background: rgba(0, 24, 23, .8);
  color: #fff5d8;
  font: 700 14px system-ui, sans-serif;
}

.train-lesson-dialog .field-label { color: #f5d898; }
.train-lesson-dialog textarea {
  width: 100%;
  min-height: 100px;
  margin: 10px 0 5px;
  padding: 13px;
  resize: vertical;
  border: 1px solid rgba(255, 208, 114, .24);
  border-radius: 12px;
  outline: 0;
  background: rgba(0, 24, 23, .8);
  color: #fff5d8;
  font: 14px/1.45 system-ui, sans-serif;
}
.train-lesson-dialog textarea:focus {
  border-color: #e6a64b;
  box-shadow: 0 0 0 3px rgba(230, 166, 75, .13);
}