/* TJK-Chess v16.0.6 — video playback fidelity + editor board frame + training migration */

/* Chessable-like white coordinate frame in Watch Video. */
.tjk-video-course .tjk-video-board-frame {
  background:#fff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  border-radius:0 !important;
  padding:3.15% !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22) !important;
  box-sizing:border-box !important;
}
.tjk-video-course .tjk-video-board-frame > [data-video-board-recording],
.tjk-video-course .tjk-video-board-frame > .tjk-video-board-wrap {
  inset:3.15% !important;
  width:93.7% !important;
  height:93.7% !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  background:#789b59 !important;
}
.tjk-video-course .tjk-video-coordinate-files {
  left:3.15% !important;
  right:3.15% !important;
  bottom:.42% !important;
  color:#30343b !important;
  font-weight:700 !important;
}
.tjk-video-course .tjk-video-coordinate-ranks {
  left:.58% !important;
  top:3.15% !important;
  bottom:3.15% !important;
  color:#30343b !important;
  font-weight:700 !important;
}

/* The editor preview intentionally has no thin/native media controller anymore.
   The thick editor timeline below is the single scrub/playback surface. */
.course-media-editor-preview::-webkit-media-controls { display:none !important; }
.course-media-editor-preview::-webkit-media-controls-enclosure { display:none !important; }
.course-media-editor-preview { pointer-events:none; }

/* White coordinate frame for the recording board and the final preview board. */
.course-studio-board-wrap,
.course-editor-preview-board-wrap {
  background:#fff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  border-radius:0 !important;
  padding:3.15% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
.course-studio-board-wrap > .course-studio-board,
.course-editor-preview-board-wrap > .course-editor-preview-board {
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
}
.course-studio-board-wrap > .course-studio-annotations,
.course-editor-preview-board-wrap > .course-editor-preview-annotations {
  position:absolute !important;
  inset:3.15% !important;
  width:93.7% !important;
  height:93.7% !important;
}
.course-editor-preview-board-wrap.has-board-video > [data-editor-board-video] {
  position:absolute !important;
  inset:3.15% !important;
  width:93.7% !important;
  height:93.7% !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  background:transparent !important;
  transform:none !important;
}
.course-board-coordinate-files {
  position:absolute;
  z-index:12;
  left:3.15%; right:3.15%; bottom:.42%;
  display:grid; grid-template-columns:repeat(8,1fr);
  pointer-events:none;
  color:#30343b;
  font-size:clamp(8px,.72vw,12px);
  font-weight:700;
  text-align:center;
  line-height:1;
  text-transform:lowercase;
}
.course-board-coordinate-ranks {
  position:absolute;
  z-index:12;
  left:.58%; top:3.15%; bottom:3.15%;
  display:grid; grid-template-rows:repeat(8,1fr);
  align-items:center;
  pointer-events:none;
  color:#30343b;
  font-size:clamp(8px,.72vw,12px);
  font-weight:700;
  text-align:center;
  line-height:1;
}

/* Keep the thick editing timeline clearly interactive now that the native bar is gone. */
.course-editor-ruler { cursor:ew-resize; min-height:30px; }
.course-editor-ruler.is-scrubbing,
.course-editor-timeline:active .course-editor-ruler { cursor:grabbing; }
.course-editor-bottom-controls { margin-top:8px; }

@media (max-width:760px) {
  .course-board-coordinate-files,.course-board-coordinate-ranks,
  .tjk-video-coordinate-files,.tjk-video-coordinate-ranks { font-size:8px !important; }
}