/* Diseño exclusivo de Problemas personalizados. Se carga tras puzzle_journey
   para mantener aislada esta mesa de trabajo del resto de modos. */
.custom-trainer-room {
  --custom-board-size: min(690px, calc(100dvh - 182px), calc(100vw - 29rem));
  width: min(100%, 1220px);
  margin-inline: auto;
}

.custom-trainer-room .puzzle-page-header,
.custom-trainer-room .puzzle-mode-nav,
.custom-trainer-room .custom-config-card,
.custom-trainer-room .custom-empty-state,
.custom-trainer-room .custom-training { width: 100%; }

.custom-trainer-room .custom-config-card {
  max-width: 980px;
  margin: .75rem auto 0;
}

.custom-trainer-room .custom-training-layout {
  grid-template-columns: minmax(0, var(--custom-board-size)) minmax(18rem, 22rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  justify-content: start;
}

.custom-trainer-room .custom-training-board,
.custom-trainer-room .custom-training-board .puzzle-board-frame,
.custom-trainer-room .custom-training-board .cg-wrap {
  width: min(100%, var(--custom-board-size));
  aspect-ratio: 1;
}

.custom-trainer-room .custom-training-board .cg-wrap { overflow: visible; }
.custom-trainer-room .custom-training-board cg-board { overflow: hidden; }

.custom-trainer-room .custom-training-panel {
  display: grid;
  gap: .8rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  box-shadow: var(--theme-shadow-sm);
}

.custom-trainer-room .custom-training-meta { padding-bottom: .7rem; }
.custom-trainer-room .custom-training-status { min-height: 0; margin: 0; padding: .85rem .9rem; font-size: .95rem; }
.custom-trainer-room .custom-active-themes,
.custom-trainer-room .custom-solution-line { margin-top: 0; }

.custom-trainer-room .custom-training-actions { gap: .55rem; }
.custom-trainer-room .custom-training-actions .btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; }
.custom-trainer-room .custom-training-actions [data-custom-next],
.custom-trainer-room .custom-training-actions [data-custom-copy-fen] { grid-column: 1 / -1; }

.custom-study-layout {
  grid-template-columns: minmax(0, min(690px, calc(100dvh - 200px))) minmax(18rem, 22rem);
  align-items: start;
  justify-content: center;
}
.custom-study-layout .puzzle-board-stage { width: min(100%, min(690px, calc(100dvh - 200px))); }
.custom-study-rail { display: grid; gap: .8rem; }
.custom-study-rail .card { margin: 0; }

@media (max-width: 1100px), (max-height: 760px) {
  .custom-trainer-room { --custom-board-size: min(700px, calc(100vw - 3rem)); }
  .custom-trainer-room .custom-training-layout,
  .custom-study-layout { grid-template-columns: minmax(0, var(--custom-board-size)); }
  .custom-trainer-room .custom-training-panel,
  .custom-study-rail,
  .custom-study-layout .puzzle-board-stage { width: min(100%, var(--custom-board-size)); }
}

@media (max-width: 560px) {
  .custom-trainer-room { --custom-board-size: calc(100vw - 1.5rem); }
  .custom-trainer-room .custom-training-layout { gap: .85rem; }
  .custom-trainer-room .custom-training-panel { padding: .9rem; border-radius: 14px; }
  .custom-trainer-room .custom-training-actions { grid-template-columns: 1fr; }
  .custom-trainer-room .custom-training-actions [data-custom-next],
  .custom-trainer-room .custom-training-actions [data-custom-copy-fen] { grid-column: auto; }
}