/* R39 — restauração isolada da interface Contra bots do site original.
   Mantemos as regras globais dos modos novos; somente este modal recebe o layout antigo. */
#trainingModal { padding: 18px; align-items:center; justify-items:center; }
#trainingModal .training-card {
  width: min(640px, 96vw); max-width: 96vw;
  max-height: calc(100dvh - 36px);
  box-sizing: border-box; padding: 22px;
  margin: 0; overflow-x: hidden; overflow-y: auto;
  border-radius: 18px;
}
#trainingModal .modal-head { gap:12px; margin-bottom:10px; align-items:center; }
#trainingModal .modal-head .mode-art { width:56px; height:56px; }
#trainingModal .modal-head .mode-art svg { width:70%; height:70%; }
#trainingModal .modal-head h2 { margin:6px 0; font-size:26px; }
#trainingModal .modal-head .modal-kicker { font-size:12px; }
#trainingModal .field { gap:5px; margin-bottom:10px; }
#trainingModal .field > span { font-size:13px; letter-spacing:normal; }
#trainingModal #trainName { min-height:0; padding:12px; font-size:16px; }
#trainingModal #trainMine.civ-pick {
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:10px;
}
#trainingModal #trainMine .civ-card {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:0; width:auto; padding:0 4px 9px;
  border-radius:14px; text-align:center; background:#050811;
  cursor:pointer; transform:none;
}
#trainingModal #trainMine .civ-card::before { display:block; }
#trainingModal #trainMine .cc-art {
  position:relative; width:calc(100% + 8px); height:auto;
  margin:0 -4px; aspect-ratio: 320 / 286; display:grid; place-items:center;
}
#trainingModal #trainMine .cc-emblem { width:54%; height:auto; aspect-ratio:1; opacity:.8; }
#trainingModal #trainMine .civ-card.on .cc-emblem { opacity:1; }
#trainingModal #trainMine .cc-ring { width:78%; height:auto; }
#trainingModal #trainMine .cc-glow { width:72%; height:auto; }
#trainingModal #trainMine .cc-bg { top:0; }
#trainingModal #trainMine .cc-name strong { font-size:14px; line-height:normal; }
#trainingModal #trainMine .cc-pick {
  visibility:visible; margin-top:5px; padding:2px 8px;
  font-size:10.5px; letter-spacing:.1em; line-height:normal;
}
#trainingModal #trainMine .civ-card:hover { transform:translateY(-3px); }
#trainingModal #trainMine .civ-card:hover .cc-emblem { transform:scale(1.05); }
#trainingModal #trainRows { display:grid; gap:6px; margin-bottom:10px; }
#trainingModal #trainRows .civ-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; min-height:0; padding:8px 10px;
  border-radius:14px; gap:12px;
}
#trainingModal #trainRows .civ-emb { width:44px; height:44px; }
#trainingModal #trainRows .civ-emblem { width:40px; height:40px; }
#trainingModal #trainRows .civ-name { min-width:0; }
#trainingModal #trainRows .civ-name strong { font-size:13.5px; }
#trainingModal #trainRows .civ-name small { font-size:11px; }
#trainingModal #trainRows .civ-ctrl { flex:0 0 auto; margin-left:auto; width:auto; }
#trainingModal #trainRows .seg { display:inline-flex; width:auto; margin:0; }
#trainingModal #trainRows .seg button { min-width:58px; padding:7px 12px; font-size:13px; }
#trainingModal .match-field { gap:6px; }
#trainingModal .field small { font-size:12px; line-height:1.4; }
#trainingModal .setup-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; padding:0; }
#trainingModal #trainCancel { position:static; width:auto; min-width:0; min-height:0; margin:0; padding:10px 14px; }
#trainingModal #trainStart {
  width:auto; min-width:0; max-width:100%; height:auto; min-height:0;
  padding:10px 16px; font-size:15px; font-weight:700; margin-left:auto; flex:0 0 auto;
}
#trainingModal #trainWarning { display:inline-block; font-size:12px; }
#trainingModal #trainWarning:empty { display:none; }
#trainingModal .test-toggle { display:flex; }
@media (max-width:680px) {
  #trainingModal { padding:10px; }
  #trainingModal .training-card { max-height:calc(100dvh - 20px); width:100%; padding:14px; }
  #trainingModal .modal-head { margin-bottom:10px; }
  #trainingModal .modal-head .mode-art { width:42px; height:42px; }
  #trainingModal .modal-head h2 { font-size:21px; }
  #trainingModal .field { margin-bottom:10px; }
  #trainingModal #trainMine.civ-pick { gap:5px; }
  #trainingModal #trainMine .cc-name strong { font-size:12px; }
  #trainingModal #trainMine .cc-pick { font-size:9px; padding:1px 5px; }
  #trainingModal #trainRows .civ-row { grid-template-columns: auto minmax(0,1fr); gap:8px; padding:8px; }
  #trainingModal #trainRows .civ-ctrl { grid-column:1/-1; width:100%; }
  #trainingModal #trainRows .seg { width:100%; display:flex; }
  #trainingModal #trainRows .seg button { min-width:0; flex:1; padding:7px 6px; }
  #trainingModal .setup-footer { flex-wrap:wrap; }
  #trainingModal #trainStart { margin-left:auto; width:auto; }
}

/* R42 — telas baixas (notebooks 720–800 px, celulares pequenos): tudo cabe sem rolar, o "Começar partida" sempre à vista */
@media (max-height: 820px) {
  #trainingModal .training-card { padding: 16px 20px; }
  #trainingModal .modal-head { margin-bottom: 6px; }
  #trainingModal .modal-head .mode-art { width: 46px; height: 46px; }
  #trainingModal .modal-head h2 { font-size: 22px; margin: 2px 0; }
  #trainingModal .field { margin-bottom: 7px; }
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 230; }
  #trainingModal #trainRows { gap: 5px; margin-bottom: 6px; }
  #trainingModal #trainRows .civ-row { padding: 5px 10px; }
  #trainingModal #trainRows .civ-emb, #trainingModal #trainRows .civ-emblem { width: 34px; height: 34px; }
  #trainingModal #trainRows .seg button { padding: 6px 12px; }
  #trainingModal .field small { font-size: 11.5px; line-height: 1.35; }
}
@media (max-height: 700px) {
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 190; }
  #trainingModal .modal-head .mode-art { display: none; }
  #trainingModal .field > small { display: none; } /* explicação dos níveis: aparece ao passar o mouse/tocar nos botões */
}
@media (max-width: 680px) and (max-height: 700px) {
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 170; }
  #trainingModal #trainRows .civ-row { padding: 4px 8px; }
  #trainingModal #trainRows .seg button { padding: 5px 6px; }
  #trainingModal .modal-head h2 { font-size: 19px; }
}
/* R42 — no celular o "Voltar" fica numa faixa própria acima do cartão (não cobre o título) */
@media (max-width: 680px) {
  #trainingModal { padding-top: 64px; align-items: start; }
  #trainingModal .training-card { max-height: calc(100dvh - 74px); }
}
@media (max-width: 680px) and (max-height: 700px) {
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 140; }
  #trainingModal .modal-head { margin-bottom: 2px; }
  #trainingModal #trainRows .civ-emb, #trainingModal #trainRows .civ-emblem { width: 28px; height: 28px; }
}
@media (max-width: 680px) {
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 200; }
  #trainingModal #trainRows .civ-row { padding: 5px 8px; gap: 6px; }
  #trainingModal #trainRows .seg button { padding: 6px 4px; }
  #trainingModal .field > small:not(.mp-text) { display: none; }
  #trainingModal .field { margin-bottom: 7px; }
}
@media (max-width: 680px) and (max-height: 700px) {
  #trainingModal #trainMine .cc-art { aspect-ratio: 320 / 112; }
  #trainingModal #trainMine .cc-emblem { width: 40%; }
  #trainingModal #trainRows { gap: 4px; }
  #trainingModal #trainRows .civ-name small { display: none; }
}
@media (max-width: 680px) and (max-height: 700px) {
  #trainingModal { padding-top: 56px; }
  #trainingModal .training-card { max-height: calc(100dvh - 62px); padding: 12px 14px; }
  #trainingModal .modal-head h2 { font-size: 18px; }
}