/* v39: independent tactic selectors, one quiet toolbox, one real Current Court. */
#current-court-layout .court-side-tools {
  --tool-surface: #191e25;
  --tool-ink: #cdd5dc;
  --tool-muted: #87939f;
  --tool-line: #303741;
  --tool-button: #232a33;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 22px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  align-content: start;
}
.toolbox-core {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--tool-line);
  border-radius: 18px;
  background: var(--tool-surface);
  box-shadow: 0 12px 30px #0000000d;
}
.toolbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--tool-muted);
}
.toolbox-heading > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
#template-manage {
  border: 0;
  background: none;
  color: var(--tool-ink);
  font: inherit;
  font-size: 11px;
  padding: 5px 0;
  cursor: pointer;
}
#template-manage:hover {
  color: #5da7a3;
}
#current-court-layout .template-selector {
  width: 100%;
  min-width: 0;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.template-selector-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tool-muted);
  font-size: 10px;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}
.template-selector-heading b {
  color: var(--tool-ink);
  font-size: 10px;
  letter-spacing: 1.2px;
}
.template-selector-heading small {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0;
}
.away-template .template-selector-heading b::before,
.home-template .template-selector-heading b::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 7px;
  background: #ae7770;
}
.home-template .template-selector-heading b::before {
  background: #698ba8;
}
.template-selector select {
  width: 100%;
  min-width: 0;
  padding: 11px 9px;
  border: 0;
  border-bottom: 1px solid var(--tool-line);
  border-radius: 0;
  background: transparent;
  color: var(--tool-ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.template-selector select option {
  background: var(--tool-surface);
  color: var(--tool-ink);
}
.template-readout {
  color: var(--tool-muted);
  font-size: 9px;
  line-height: 1.6;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}
#current-court-layout .text-note-toolbar,
#current-court-layout .drawing-toolbar {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  gap: 8px;
}
#current-court-layout .text-note-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
#current-court-layout .drawing-toolbar-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
#current-court-layout .draw-tool {
  min-width: 36px;
  min-height: 36px;
  height: auto;
  padding: 7px 6px;
  border: 0;
  border-radius: 7px;
  background: var(--tool-button);
  color: var(--tool-ink);
  box-shadow: none;
  font-size: 10px;
  font-weight: 500;
}
#current-court-layout .draw-tool:hover {
  background: #34414b;
}
#current-court-layout .draw-tool.active {
  background: #bed8d5;
  color: #173e40;
  box-shadow: none;
}
#current-court-layout .draw-tool:disabled {
  opacity: 0.3;
}
#current-court-layout .text-note-toolbar .draw-tool {
  width: 100%;
  min-width: 0;
}
#current-court-layout .color-tool {
  background: none;
}
#current-court-layout .color-tool .color-dot {
  width: 17px;
  height: 17px;
  box-shadow: none;
}
#current-court-layout .toolbar-divider {
  width: 100%;
  margin: 6px 0;
  background: var(--tool-line);
  opacity: 0.6;
}
#current-court-layout .width-label {
  font-size: 9px;
  color: var(--tool-muted);
}
#current-court-layout .attacker-select-tool {
  font-size: 10px;
  min-width: 62px;
}
#current-court-layout .current-action-stack {
  width: 100%;
  gap: 9px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tool-line);
}
#current-court-layout .sideout-orb {
  width: 100%;
  max-width: none;
  height: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: #c5d9d6;
  color: #1d4442;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 2.4px;
}
#current-court-layout .rotation-step-buttons {
  width: 100%;
  gap: 7px;
}
#current-court-layout .rotation-step-buttons button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: var(--tool-button);
  color: var(--tool-ink);
  font-size: 10px;
}
#current-court-layout .current-rotation-jog {
  width: 100%;
  min-width: 0;
  gap: 1px;
}
#current-court-layout .current-rotation-jog .rotation-jog-team {
  width: 100%;
  min-width: 0;
  gap: 6px;
  padding: 8px 1px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
#current-court-layout .rotation-jog-label {
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--tool-muted);
}
#current-court-layout .rotation-jog-button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--tool-ink);
  background: var(--tool-button);
  font-size: 9px;
}
#current-court-layout .current-rotation-jog strong {
  font-size: 13px;
  color: var(--tool-ink);
}
.template-annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
:root[data-theme="light"] #current-court-layout .court-side-tools {
  --tool-surface: #fafaf8;
  --tool-ink: #303a43;
  --tool-muted: #8a9298;
  --tool-line: #e3e5e5;
  --tool-button: #eff0ee;
}
:root[data-theme="light"] #current-court-layout .draw-tool,
:root[data-theme="light"] #current-court-layout .rotation-step-buttons button,
:root[data-theme="light"] #current-court-layout .rotation-jog-button {
  background: var(--tool-button) !important;
  color: var(--tool-ink) !important;
}
:root[data-theme="light"] #current-court-layout .color-tool {
  background: none !important;
}
:root[data-theme="light"] #current-court-layout .draw-tool.active {
  background: #d9e5e0 !important;
  color: #30544d !important;
}
:root[data-theme="light"] #current-court-layout .sideout-orb {
  background: #d4e3dd !important;
  color: #30544d !important;
}
.inline-template-editor {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #3e4b51;
  border-radius: 16px;
  background: #172127;
  color: #c9d5db;
}
.inline-template-editor[hidden],
#template-edit-work[hidden],
#template-edit-confirm[hidden] {
  display: none !important;
}
.template-edit-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.template-edit-title small {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #8caaa9;
}
.template-edit-title h3 {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.inline-template-editor button {
  padding: 9px 12px;
  border: 1px solid #41505a;
  border-radius: 7px;
  background: #263139;
  color: #d1dde1;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.inline-template-editor button:hover {
  border-color: #8ba9a6;
}
.template-edit-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}
.template-edit-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
  flex: 1 1 100px;
  font-size: 10px;
  color: #9cb0b8;
}
.template-edit-fields .template-library-field {
  flex: 2 1 180px;
}
.template-edit-fields .template-name-field {
  flex: 3 1 210px;
}
.inline-template-editor input,
.inline-template-editor select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #41505a;
  border-radius: 7px;
  background: #1b272e;
  color: #d8e3e5;
  font: inherit;
  font-size: 12px;
}
.template-edit-actions,
.template-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.template-file-actions {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #34444d;
}
.inline-template-editor .primary-save {
  background: #c3dbd5;
  color: #203f39;
  border-color: #c3dbd5;
}
#template-edit-status {
  font-size: 11px;
  line-height: 1.7;
  color: #a2b9be;
  margin: 14px 0 0;
}
#template-edit-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #9e8070;
  border-radius: 8px;
}
body.template-editing #current-court .draggable-player::after {
  content: attr(data-template-role);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 4px;
  background: #182b35;
  color: #d8e4e9;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
body.template-editing .template-selector {
  opacity: 0.5;
}
:root[data-theme="light"] .inline-template-editor {
  background: #fafbf9;
  border-color: #c6d4cd;
  color: #34483f !important;
}
:root[data-theme="light"] .inline-template-editor button {
  background: #edf1ed;
  border-color: #d5ded6;
  color: #3d5047;
}
:root[data-theme="light"] .inline-template-editor input,
:root[data-theme="light"] .inline-template-editor select {
  background: #fff;
  border-color: #d5ded6;
  color: #2c4138;
}
:root[data-theme="light"] .template-edit-fields label,
:root[data-theme="light"] #template-edit-status {
  color: #6e8175;
}
:root[data-theme="light"] .inline-template-editor .primary-save {
  background: #d1e2d8;
  color: #2e5342;
  border-color: #d1e2d8;
}
:root[data-theme="light"] .template-file-actions {
  border-color: #e0e6e0;
}
@media (min-width: 1281px) {
  #current-court-layout {
    grid-template-columns: minmax(0, 640px) minmax(0, 260px);
    gap: 40px;
  }
}
@media (max-width: 960px) {
  #current-court-layout .court-side-tools {
    width: min(100%, 300px);
    margin-inline: auto;
  }
}
@media (max-width: 520px) {
  .toolbox-core {
    padding: 16px;
  }
  .inline-template-editor {
    padding: 14px;
  }
  .template-edit-fields {
    gap: 8px;
  }
  .template-edit-fields label {
    flex-basis: 110px;
  }
  .template-edit-title h3 {
    font-size: 14px;
  }
  .template-edit-actions button {
    flex: 1 1 110px;
  }
}
#current-court-layout .toolbox-core .rotation-jog-team {
  background: transparent !important;
}
#current-court-layout .toolbox-core .drawing-toolbar,
#current-court-layout .toolbox-core .text-note-toolbar,
#current-court-layout .toolbox-core .drawing-toolbar-row {
  background: transparent !important;
}
body.template-editing .text-note textarea {
  color: #233b43 !important;
}
#template-manage,
.inline-template-editor button {
  touch-action: manipulation;
}
body.template-editing #current-court .draggable-player.photo-view::after {
  top: calc(100% + 27px);
}
.template-basis-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 2px solid #7ea69b;
  color: #a8bdb7;
  font-size: 11px;
  line-height: 1.8;
}
:root[data-theme="light"] .template-basis-note {
  color: #58766a;
  border-color: #94b0a2;
}

/* All annotation paint remains below player markers, including drawing mode. */
#current-court .position-layer,
.current-court-layout.drawing-active #current-court .position-layer { z-index: 20; }
#current-court .template-annotation-layer { z-index: 2; overflow: visible; }
#current-court.half-size-players .draggable-player,
#current-court.half-size-players .draggable-player.dragging { transform:translate(-50%,-50%) scale(.8); }
#player-half-size { min-width:110px; touch-action:manipulation; }

/* LIVE MATCHUP uses the same pink circular band as the 12-court selection. */
#current-court .draggable-player.live-matchup-selected {
  outline: none;
  box-shadow: none !important;
}
#current-court .draggable-player.live-matchup-selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid #FF1493;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #57052F, inset 0 0 0 1px #57052F;
  pointer-events: none;
  z-index: 3;
}

/* Drawing Move releases the markers while the canvas remains non-interactive. */
.current-court-layout.drawing-move-active #current-court .position-layer,
.current-court-layout.drawing-move-active #current-court .draggable-player { pointer-events:auto; }