.customisationsShell {
  --cursor-default: url("/visual/cursors/default.png") 16 13, default;
  --cursor-pointer: url("/visual/cursors/pointer.png") 4 4, pointer;
  --cursor-grab: url("/visual/cursors/grab.png") 31 30, grab;
  --cursor-grabbing: url("/visual/cursors/grabbing.png") 31 30, grabbing;
  --cursor-not-allowed: url("/visual/cursors/not_allowed.png") 0 0, not-allowed;
  --cursor-wait-progress: url("/visual/cursors/wait.png") 0 0, progress;
  --cursor-magnify: url("/visual/cursors/magnify.cur"), url("/visual/cursors/magnify.png") 47 40, zoom-in;
  min-height: calc(100vh - 48px);
  cursor: var(--cursor-default);
}

.customisationsShell button {
  cursor: var(--cursor-pointer);
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.08s ease;
}

.customisationsShell button:disabled,
.customisationsShell input:disabled,
.customisationsShell select:disabled {
  cursor: var(--cursor-not-allowed);
}

.customisationsShell button:not(:disabled):not(.backgroundTile):not(.backgroundAddTile):active {
  transform: translateY(1px);
}

.customisationsShell .musicPlaylistAlbumArt,
.customisationsShell #musicPreviewAlbumArt,
.customisationsShell .backgroundTile .backgroundImageWrap,
.customisationsShell .backgroundTile .backgroundThumb,
.customisationsShell .cutInTile .backgroundImageWrap,
.customisationsShell .cutInTile .backgroundThumb {
  cursor: var(--cursor-magnify) !important;
}

.customisationsShell button:not(.backgroundTile):not(.backgroundAddTile):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(34, 212, 219, 0.42);
}

.customisationsPlaceholder {
  margin-top: 6px;
}

.customisationsFooterSlot {
  margin-top: 12px;
}

.customisationsShell .profileVerificationRibbon {
  position: relative;
  z-index: 21;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin-top: 12px;
  border: 1px solid rgba(238, 198, 96, 0.56);
  border-radius: 8px;
  background: rgba(71, 49, 17, 0.78);
  color: #fff3cf;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.customisationsShell .profileVerificationRibbon strong {
  color: #ffe08a;
}

.customisationsShell .profileVerificationStatus {
  display: block;
  color: #cceec4;
}

.customisationsShell .profileVerificationForm {
  margin: 0;
}

.customisationsShell .profileVerificationLink {
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe08a;
  font: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

.customisationsShell .titlebarMusicSpacer {
  flex: 0 0 360px;
  min-width: 280px;
  max-width: 360px;
  height: 96px;
  margin-left: auto;
  pointer-events: none;
  visibility: hidden;
}

.presetManager {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 365px 1fr;
  gap: 0;
  margin-top: 12px;
  background: #ffffff;
}

.presetIntro {
  padding-right: 18px;
}

.presetWorkspace {
  padding-left: 18px;
  border-left: 1px solid rgba(31, 31, 31, 0.16);
}

.customisationsTitle {
  font-size: 16px;
}

.presetHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.presetTitle,
.presetPreviewTitle {
  margin-top: 0;
}

.presetStatus {
  margin-top: 4px;
}

.presetField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.presetField select {
  appearance: none;
  flex: 1 1 auto;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(215, 178, 80, 0.76);
  padding: 8px 34px 8px 8px;
  background: #ffffff;
}

.presetSelectRow {
  display: flex;
  gap: 8px;
  align-items: center;
}

.presetSelectRow .hypercarrySelectControl {
  flex: 1 1 auto;
  min-width: 0;
}

.presetSelectRow button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.presetField .hypercarrySelectButton {
  min-height: 38px;
  border-color: rgba(215, 178, 80, 0.76);
  border-radius: 10px;
  color: #312515;
  background: #ffffff;
}

.presetField .hypercarrySelectControl.isOpen {
  z-index: 120;
}

.presetField .hypercarrySelectControl.isOpen .hypercarrySelectButton {
  border-color: rgba(228, 184, 73, 0.86);
  border-bottom-color: rgba(228, 184, 73, 0.38);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.presetField .hypercarrySelectMenu {
  box-sizing: border-box;
  border-color: rgba(228, 184, 73, 0.86);
  border-top-color: rgba(228, 184, 73, 0.38);
  background: #ffffff;
}

.presetField .hypercarrySelectOption {
  color: #342819;
}

.presetField .hypercarrySelectOption:hover,
.presetField .hypercarrySelectOption:focus-visible,
.presetField .hypercarrySelectOption.isSelected {
  color: #1b1308;
  background: linear-gradient(180deg, #fff3b8 0%, #e3b84a 100%);
}

.presetActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.presetActions input[type="text"] {
  flex: 1 1 220px;
  border-color: rgba(215, 178, 80, 0.76);
}

.presetNameActionControl {
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: stretch;
}

.presetNameActionControl.isOpen {
  z-index: 120;
}

.presetNameActionControl #presetNameActionBtn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.presetNameActionControl.isOpen #presetNameActionBtn,
.presetNameActionControl.isOpen .presetNameActionToggleBtn {
  border-color: rgba(228, 184, 73, 0.86);
  border-bottom-color: rgba(228, 184, 73, 0.38);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.presetNameActionToggleBtn {
  position: relative;
  min-width: 34px;
  padding: 10px 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  color: transparent;
}

.presetNameActionToggleBtn::before,
.presetNameActionToggleBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #5b5141;
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.presetNameActionToggleBtn::before {
  right: 16px;
  transform: translateY(-50%) rotate(45deg);
}

.presetNameActionToggleBtn::after {
  right: 11px;
  transform: translateY(-50%) rotate(-45deg);
}

.presetNameActionToggleBtn[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(-45deg);
}

.presetNameActionToggleBtn[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg);
}

.presetNameActionMenu {
  position: absolute;
  box-sizing: border-box;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 80;
  display: grid;
  min-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(228, 184, 73, 0.86);
  border-top-color: rgba(228, 184, 73, 0.38);
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.26);
}

.presetNameActionMenu[hidden] {
  display: none;
}

.presetNameActionOption {
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #342819;
}

.presetNameActionOption:hover,
.presetNameActionOption.isActive {
  color: #1b1308;
  background: linear-gradient(180deg, #fff3b8 0%, #e3b84a 100%);
}

.sectionTitle {
  margin-top: 0;
  font-size: 16px;
}

.piecesManager {
  margin-top: 12px;
  background: #f6f6f6;
}

.piecesSection + .piecesSection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dedede;
}

.standardPiecesTray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: clamp(8px, 2.2vw, 28px);
  margin-top: 14px;
  padding: 0 clamp(4px, 2vw, 22px);
}

.standardPieceHalf {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  min-width: 0;
  flex: 1 1 0;
  gap: clamp(3px, 1.3vw, 18px);
}

.standardPieceDivider {
  align-self: stretch;
  width: 1px;
  background: #d8d8d8;
}

.standardPiece {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  width: 100%;
}

.standardPiece img {
  width: clamp(34px, 6.2vw, 58px);
  height: clamp(34px, 6.2vw, 58px);
  object-fit: contain;
}

.pieceLabel {
  font-size: 11px;
  font-weight: 700;
  color: #4a4a4a;
  text-align: center;
}

.pieceLabelVariant {
  display: block;
}

.customPiecesTray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: clamp(6px, 1.8vw, 18px);
  margin-top: 14px;
  padding: 0 clamp(2px, 1vw, 10px);
}

.customPieceHalf {
  display: flex;
  justify-content: space-between;
  align-items: start;
  min-width: 0;
  flex: 1 1 0;
  gap: clamp(2px, 0.9vw, 8px);
}

.customPieceDivider {
  align-self: stretch;
  width: 1px;
  background: #d8d8d8;
}

.customPieceSlot {
  appearance: none;
  display: grid;
  justify-items: center;
  min-width: 0;
  flex: 0 1 clamp(54px, 8.2vw, 82px);
  padding: 0;
  border: 0;
  background: transparent;
}

.customPieceSlot:hover,
.customPieceSlot.isSelected {
  background: transparent;
}

.customPieceSlot:hover .customPieceSlotBody,
.customPieceSlot.isSelected .customPieceSlotBody {
  background: rgba(255, 255, 255, 0.72);
}

.customPieceSlotBody {
  display: grid;
  gap: 6px;
  justify-items: center;
  width: 100%;
  padding: 8px 2px;
  border-radius: 8px;
}

.customPiecePreview {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(42px, 7.2vw, 72px);
  height: clamp(42px, 7.2vw, 72px);
  overflow: hidden;
}

.customPieceTrayImage,
.boardPiecePreviewLayer img.customPiecePreviewTransformed {
  transform:
    translate(var(--custom-piece-x, 0px), var(--custom-piece-y, 0px))
    scale(var(--custom-piece-scale, 1));
  transform-origin: center center;
}

.customPiecePreview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.customPieceVariantControls {
  position: absolute;
  inset: 0 -7px 0 -7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.customPieceVariantBtn {
  min-width: 16px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(70, 70, 70, 0.58);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  pointer-events: auto;
}

.customPieceVariantBtn:hover {
  color: rgba(35, 35, 35, 0.82);
  background: transparent;
}

.customPieceUploadInput {
  display: none;
}

body[data-can-upload="false"] #customPieceUploadBtn,
body[data-can-upload="false"] #customPieceViewOthersBtn,
body[data-can-upload="false"] #boardPrimaryUploadBtn,
body[data-can-upload="false"] #boardSecondaryUploadBtn,
body[data-can-upload="false"] #musicAddUploadBtn,
body[data-can-upload="false"] #cursorUploadBtn,
body[data-can-upload="false"] #cursorViewOthersBtn,
body[data-can-upload="false"] .assetReportBtn,
body[data-can-upload="false"] .boardReportBtn,
body[data-can-upload="false"] .customAssetTermsDialog,
body[data-can-upload="false"] .customAssetUploadDialog,
body[data-can-upload="false"] .visualDedupeDialog {
  display: none !important;
}

.customPieceEditor {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dedede;
}

.customPieceEditorTitle {
  margin-top: 0;
  font-size: 16px;
}

.cutInManager {
  margin-top: 12px;
  background: #f6f6f6;
}

.boardEditManager {
  margin-top: 12px;
  color: #f7f7f7;
  background: var(--ui-dark-bg);
}

.boardEditManager .boardTextureControls label,
.boardEditManager .boardFillMode {
  color: rgba(247, 247, 247, 0.88);
}

.boardEditManager .sectionTitle,
.backgroundManager .backgroundTitle,
.cursorsManager .sectionTitle {
  color: var(--ui-dark-text);
}

.boardEditLayout {
  display: grid;
  grid-template-columns: max(500px, min(650px, 50vw)) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 14px;
}

.boardPreview {
  display: grid;
  place-items: center;
}

.boardPreviewGrid {
  position: relative;
  width: max(500px, min(650px, 50vw));
  aspect-ratio: 1;
  border: 2px solid rgba(35, 35, 35, 0.76);
  border-radius: 8px;
  background:
    conic-gradient(
      from 90deg,
      #f0d9b5 0 25%,
      #b58863 0 50%,
      #f0d9b5 0 75%,
      #b58863 0
    ) 0 0 / 25% 25%;
}

#boardEvalBarContainer {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  display: flex;
  align-items: center;
  height: calc(100% - 16px);
}

#boardEvalBarContainer.boardEvalCollapsed #boardEvalBar {
  width: 0;
  opacity: 0;
  overflow: hidden;
}

#boardEvalBarContainer.boardEvalCollapsed .boardEvalActions {
  display: none;
}

#boardEvalBarContainer.boardEvalExpanded #boardEvalBar {
  width: 18px;
  opacity: 1;
}

#boardEvalBar {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  background: #222222;
  transition: width 0.18s ease, opacity 0.18s ease;
}

#boardEvalWhite {
  width: 100%;
  height: 50%;
  background: #f4f4f4;
}

#boardEvalBlack {
  width: 100%;
  height: 50%;
  background: #2f2f2f;
}

#boardEvalValue {
  position: absolute;
  bottom: 6px;
  left: 50%;
  color: #888888;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
}

.boardEvalSidePanel {
  display: grid;
  grid-template-columns: 18px auto;
  gap: 6px;
  align-items: center;
  margin-left: 6px;
}

#boardEvalToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 28px;
  min-width: 18px;
  min-height: 28px;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 8px;
  color: #f5f5f5;
  background: rgba(30, 30, 30, 0.9);
  font-size: 12px;
}

#boardEvalToggle:focus,
#boardEvalToggle:focus-visible {
  outline: 0;
  box-shadow: none;
}

.boardEvalActions {
  display: grid;
  gap: 6px;
}

.boardEvalActions button {
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
}

.boardEvalActions button:not(:disabled):hover,
#boardViewOthersBtn:not(:disabled):hover,
#boardSaveBtn:not(:disabled):hover,
#boardApplyBtn:not(:disabled):hover,
.musicAddBtn:not(:disabled):hover,
.musicTrackBtn:not(:disabled):hover {
  background: #f2f2f2;
}

#boardPiecePreviewBtn {
  color: #ffffff;
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-bg);
}

#boardEvalToggle:not(:disabled):hover,
#boardPiecePreviewBtn:not(:disabled):hover,
#cursorResetBtn:not(:disabled):hover,
#cursorReplaceBtn:not(:disabled):hover,
.cursorsManager #cursorViewOthersBtn:not(:disabled):hover,
.musicSaveBtn:not(:disabled):hover,
#customPieceResetBtn:not(:disabled):hover {
  background: var(--ui-dark-bg-hover);
}

.boardPiecePreviewSquare {
  position: relative;
  overflow: hidden;
}

.boardPiecePreviewSquare img.piece-417db {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boardPiecePreviewLayer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
}

.boardPiecePreviewLayer.isMovable {
  pointer-events: auto;
}

.boardPiecePreviewLayer.isMovable,
.boardPiecePreviewLayer.isMovable .boardPiecePreviewSquare,
.boardPiecePreviewLayer.isMovable img.piece-417db {
  touch-action: none;
}

.boardPiecePreviewLayer[hidden] {
  display: none;
}

.boardPiecePreviewSquare {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.boardPiecePreviewLayer img.piece-417db {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boardTexture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boardTexturePrimary {
  background-image: var(--board-primary-texture);
  opacity: var(--board-primary-opacity, 1);
  filter: brightness(var(--board-primary-brightness, 1));
  mix-blend-mode: var(--board-primary-blend-mode, normal);
  background-repeat: var(--board-primary-repeat, repeat);
  background-size: var(--board-primary-size, 100%);
  background-position: var(--board-primary-x, 0px) var(--board-primary-y, 0px);
}

.boardTextureSecondary {
  background-image: var(--board-secondary-texture);
  opacity: var(--board-secondary-opacity, 1);
  filter: brightness(var(--board-secondary-brightness, 1));
  mix-blend-mode: var(--board-secondary-blend-mode, normal);
  background-repeat: var(--board-secondary-repeat, repeat);
  background-size: var(--board-secondary-size, 100%);
  background-position: var(--board-secondary-x, 0px) var(--board-secondary-y, 0px);
}

.boardPreviewGrid[data-board-scope="light"] .boardTexturePrimary,
.boardPreviewGrid[data-board-scope="dark"] .boardTextureSecondary {
  -webkit-mask-image: conic-gradient(from 90deg, #000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  -webkit-mask-size: 25% 25%;
  mask-image: conic-gradient(from 90deg, #000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  mask-size: 25% 25%;
}

.boardPreviewGrid[data-board-scope="dark"] .boardTexturePrimary,
.boardPreviewGrid[data-board-scope="light"] .boardTextureSecondary {
  -webkit-mask-image: conic-gradient(from 90deg, transparent 0 25%, #000 0 50%, transparent 0 75%, #000 0);
  -webkit-mask-size: 25% 25%;
  mask-image: conic-gradient(from 90deg, transparent 0 25%, #000 0 50%, transparent 0 75%, #000 0);
  mask-size: 25% 25%;
}

.boardPreviewFiles,
.boardPreviewRanks {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(31, 31, 31, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.boardPreviewGrid.showFiles .boardPreviewFiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
}

.boardPreviewGrid.showRanks .boardPreviewRanks {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  align-items: start;
}

.boardPreviewFiles span {
  padding: 0 0 6px 8px;
}

.boardPreviewRanks span {
  padding: 6px 0 0 8px;
}

.boardControlPanel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.boardTextureControls label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #4a4a4a;
}

.boardTextureControls .customPieceControlRow {
  min-width: 0;
  width: calc(100% - 8px);
}

.boardTextureControls input[type="range"] {
  width: 100%;
}

.boardTextureControls input[type="text"] {
  width: 48px;
  min-height: 28px;
  padding: 4px 6px;
  text-align: right;
}

.boardEditorActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.boardControlToggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.boardImageEditors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.boardImageEditors.hasSecondary {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 28px;
}

.boardImageEditor {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.boardImageEditor[hidden] {
  display: none;
}

.boardSecondaryImageEditor {
  position: relative;
}

.boardSecondaryImageEditor::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 1px;
  background: rgba(31, 31, 31, 0.16);
}

.boardImageEditorTitle {
  margin-top: 0;
}

.boardImageEditors.hasSecondary .boardImageEditor {
  height: 100%;
}

.boardFillMode {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #4a4a4a;
}

.boardFillMode select {
  appearance: none;
  min-height: 32px;
  border: 1px solid rgba(215, 178, 80, 0.72);
  border-radius: 8px;
  padding: 7px 34px 7px 9px;
  background: #ffffff;
}

.boardFillMode .hypercarrySelectControl {
  width: 100%;
  min-width: 0;
}

.boardFillMode .hypercarrySelectButton {
  min-height: 32px;
  border-color: rgba(215, 178, 80, 0.72);
  border-radius: 8px;
  padding: 7px 9px;
  color: #312515;
  background: #ffffff;
}

.boardFillMode .hypercarrySelectControl.isOpen {
  z-index: 120;
}

.boardFillMode .hypercarrySelectControl.isOpen .hypercarrySelectButton {
  border-color: rgba(228, 184, 73, 0.86);
  border-bottom-color: rgba(228, 184, 73, 0.38);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boardFillMode .hypercarrySelectMenu {
  box-sizing: border-box;
  max-height: min(220px, 38vh);
  border-color: rgba(228, 184, 73, 0.86);
  border-top-color: rgba(228, 184, 73, 0.38);
  background: #ffffff;
}

.boardFillMode .hypercarrySelectOption {
  padding: 7px 9px;
  color: #342819;
}

.boardFillMode .hypercarrySelectOption:hover,
.boardFillMode .hypercarrySelectOption:focus-visible,
.boardFillMode .hypercarrySelectOption.isSelected {
  color: #1b1308;
  background: linear-gradient(180deg, #fff3b8 0%, #e3b84a 100%);
}

.boardTextureModeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.boardTopDivider {
  height: 1px;
  margin-top: 6px;
  background: rgba(31, 31, 31, 0.12);
}

.boardPreFillControl,
.boardImageEditors.hasSecondary .boardPreFillSlot {
  min-height: 50px;
}

.boardPreFillSlot {
  display: flex;
  align-items: end;
}

#boardMainCoordinatesSlot {
  display: none;
}

.boardImageEditors:not(.hasSecondary) #boardMainCoordinatesSlot {
  display: flex;
  min-height: 0;
}

.boardImageEditors.hasSecondary .boardImageEditor button,
.boardImageEditors.hasSecondary .boardFillMode select {
  width: 100%;
}

.boardImageEditors.hasSecondary .boardFillMode .hypercarrySelectControl {
  width: 100%;
}

.boardImageEditors.hasSecondary .customPieceControlRow {
  grid-template-columns: minmax(0, 1fr) 48px;
  width: calc(100% - 10px);
}

.boardLibraryDialog {
  width: min(420px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.assetLibraryDialog {
  width: min(560px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.assetLibraryDialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
}

.assetLibraryDialog form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.assetLibraryOptions {
  display: grid;
  gap: 10px;
}

.assetLibraryGroup {
  display: grid;
  gap: 8px;
}

.assetLibraryGroupTitle {
  color: #202020;
  font-size: 12px;
  font-weight: 750;
}

.assetLibraryGroupItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.assetLibraryOption {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 128px;
  border: 1px solid rgba(20, 20, 20, 0.22);
  border-radius: 6px;
  background: buttonface;
  color: buttontext;
  cursor: pointer;
  padding: 6px;
}

.assetLibraryOption img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.assetLibraryOption.isRecommended {
  outline: 2px solid rgba(20, 160, 190, 0.6);
}

.assetLibraryOption img.isAssetImageMissing {
  opacity: 0.45;
}

.assetLibraryOption[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.68;
}

.assetLibraryMeta {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 3px;
  max-width: 100%;
}

.assetLibraryLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assetLibraryUsage {
  max-width: 100%;
  color: rgba(32, 32, 32, 0.68);
  font-size: 10px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boardLibraryDialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
}

.boardLibraryDialog form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.boardLibraryOptions {
  display: grid;
  gap: 10px;
}

.boardLibraryGroup {
  display: grid;
  gap: 8px;
}

.boardLibraryGroupTitle {
  color: #202020;
  font-size: 12px;
  font-weight: 750;
}

.boardLibraryGroupItems {
  display: grid;
  gap: 10px;
}

.boardLibraryOption {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.boardLibraryOption button:not(:disabled):hover {
  background: #f2f2f2;
}

.boardLibraryActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.assetReportBtn,
.boardReportBtn {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #202020;
  border-radius: 999px;
  appearance: none;
  background: #202020;
  color: #d31313;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 0;
  text-align: center;
  vertical-align: middle;
}

.assetReportBtn[hidden],
.boardReportBtn[hidden] {
  display: none !important;
}

.assetReportBtn > span,
.boardReportBtn > span {
  display: none;
}

.assetReportBtn::before,
.boardReportBtn::before {
  content: "!";
  position: absolute;
  left: 50%;
  top: 50%;
  line-height: 1;
  transform: translate(-50%, -54%);
}

.assetLibraryOption .assetReportBtn:not(:disabled):hover,
.boardLibraryOption .boardReportBtn:not(:disabled):hover {
  background: #202020;
  color: #ff2424;
}

.musicTrackReportBtn {
  justify-self: center;
  align-self: center;
}

.boardLibraryPreview {
  position: relative;
  width: 64px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background:
    conic-gradient(from 90deg, #b98a63 0 25%, #efd9ad 0 50%, #b98a63 0 75%, #efd9ad 0) 0 0 / 25% 25%;
}

.boardLibraryPreview .boardTexture {
  position: absolute;
  inset: 0;
}

.boardLibraryPreview[data-board-scope="light"] .boardTexturePrimary,
.boardLibraryPreview[data-board-scope="dark"] .boardTextureSecondary {
  -webkit-mask-image: conic-gradient(from 90deg, #000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  -webkit-mask-size: 25% 25%;
  mask-image: conic-gradient(from 90deg, #000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
  mask-size: 25% 25%;
}

.boardLibraryPreview[data-board-scope="dark"] .boardTexturePrimary,
.boardLibraryPreview[data-board-scope="light"] .boardTextureSecondary {
  -webkit-mask-image: conic-gradient(from 90deg, transparent 0 25%, #000 0 50%, transparent 0 75%, #000 0);
  -webkit-mask-size: 25% 25%;
  mask-image: conic-gradient(from 90deg, transparent 0 25%, #000 0 50%, transparent 0 75%, #000 0);
  mask-size: 25% 25%;
}

.boardLibraryName {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.boardScopeControls,
.boardTextureControls {
  display: grid;
  gap: 10px;
}

#boardViewOthersBtn {
  background: #ffffff;
}

#boardSaveBtn {
  width: 100%;
  background: #ffffff;
}

#boardApplyBtn {
  width: 100%;
  background: #ffffff;
}

.boardScopeControls label {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 720px) {
  .boardEditLayout {
    grid-template-columns: 1fr;
  }

  .boardPreviewGrid {
    width: min(100%, max(500px, min(650px, 50vw)));
  }
}

.cutInTitle {
  margin-top: 0;
  font-size: 16px;
}

.cursorsManager {
  margin-top: 12px;
  color: #f7f7f7;
  background: var(--ui-dark-bg);
}

.cursorsManager .pieceLabel,
.cursorsManager .cursorEditorControls label,
.cursorsManager .customPieceOverlayOptions {
  color: rgba(247, 247, 247, 0.88);
}

.cursorTray {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}

.cursorSlot {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 120px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.cursorSlot:hover,
.cursorSlot.isSelected {
  background: rgba(255, 255, 255, 0.72);
}

.cursorSlotPreview {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.cursorSlotPreview img {
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
}

.cursorSlotPreview.isCursorFallback {
  border: 1px dashed rgba(31, 31, 31, 0.24);
  background: rgba(255, 255, 255, 0.58);
}

.cursorSlotPreview.isCursorFallback::before {
  content: attr(data-cursor-fallback);
  padding: 4px 6px;
  border-radius: 999px;
  color: #202020;
  background: rgba(31, 31, 31, 0.08);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cursorSlotPreview img.isCursorImageMissing,
.cursorReferenceImage.isCursorImageMissing,
.cursorEditorImage.isCursorImageMissing {
  display: none;
}

.cursorEditor {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dedede;
}

.cursorEditor[hidden] {
  display: none;
}

.cursorEditorTitle {
  margin-top: 0;
  font-size: 16px;
}

.cursorHotspotLegend {
  font-size: 12px;
}

.cursorEditorMain {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.cursorEditorControls {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  min-width: 210px;
}

.cursorEditorControls label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #4a4a4a;
}

.cursorEditorControls input[type="range"] {
  width: 100%;
}

.cursorEditorControls input[type="text"] {
  width: 56px;
  min-height: 28px;
  padding: 4px 6px;
  text-align: right;
}

.cursorEditorPreview {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(35, 35, 35, 0.76);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #f0d9b5 50%, #b58863 50%);
}

.cursorEditorPreview.hasCursorFallback::before {
  content: attr(data-cursor-fallback);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  border: 1px dashed rgba(31, 31, 31, 0.34);
  border-radius: 999px;
  color: #202020;
  background: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.cursorReferenceImage,
.cursorEditorImage {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  object-fit: contain;
}

.cursorReferenceImage {
  opacity: 0.32;
}

.cursorEditorImage {
  transform:
    translate(var(--cursor-x, 0px), var(--cursor-y, 0px))
    scale(var(--cursor-scale, 1));
  transform-origin: center center;
}

.cursorHotspot {
  position: absolute;
  left: calc(50% + var(--cursor-hotspot-x, 0px));
  top: calc(50% + var(--cursor-hotspot-y, 0px));
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  cursor: move;
}

.cursorHotspot::before,
.cursorHotspot::after {
  content: "";
  position: absolute;
  background: rgba(225, 25, 25, 0.82);
}

.cursorReferenceHotspot {
  pointer-events: none;
}

.cursorReferenceHotspot::before,
.cursorReferenceHotspot::after {
  background: rgba(36, 127, 220, 0.76);
}

.cursorHotspot::before {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

.cursorHotspot::after {
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
}

.cursorEditorActions {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 180px;
}

#cursorResetBtn {
  align-self: end;
  color: #ffffff;
  border-color: #646464;
  background: #646464;
}

#cursorReplaceBtn {
  align-self: end;
  color: #ffffff;
  border-color: #646464;
  background: #646464;
}

.musicPlaylistsManager {
  margin-top: 12px;
  background: #f6f6f6;
}

.musicPreviewPlayer {
  --music-player-bottom-gap: 18px;
  --music-player-visualizer-height: clamp(292px, 42vh, 500px);
  --music-player-art-size: clamp(
    144px,
    calc(100% - var(--music-player-visualizer-height) - var(--music-player-bottom-gap) * 2),
    180px
  );
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 14px;
  min-height: clamp(492px, 62vh, 700px);
  padding: 0;
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ui-dark-bg);
  color: #f7f7f7;
}

.musicPreviewNowPlaying {
  position: absolute;
  inset: auto 168px var(--music-player-bottom-gap) 18px;
  min-height: var(--music-player-art-size);
  pointer-events: none;
}

.musicPreviewAlbumArt {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--music-player-art-size);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 2px solid transparent;
  box-sizing: border-box;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--customisations-foil-gloss) border-box,
    var(--customisations-foil-gold) border-box;
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  background-blend-mode: normal, soft-light, normal;
  object-fit: cover;
  pointer-events: auto;
  cursor: var(--cursor-magnify) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.musicPreviewAlbumArt[hidden] {
  display: none;
}

.musicPreviewTrackText {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(520px, calc(100% - 360px));
  min-width: 220px;
  margin: 10px auto 26px;
}

.musicPreviewTrackName {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.22;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.musicPreviewPhaseChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(215, 167, 33, 0.86);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 169, 0.18),
    0 0 8px rgba(215, 167, 33, 0.2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.musicPreviewPhaseChip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--music-phase-chip-color, rgba(28, 137, 218, 0.9));
  box-shadow: 0 0 8px var(--music-phase-chip-color, rgba(28, 137, 218, 0.9));
}

.musicPreviewPhaseChip[hidden] {
  display: none;
}

.musicPreviewNowPlaying .muted {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
}

.musicPreviewVisualizer {
  display: block;
  width: 100%;
  height: var(--music-player-visualizer-height);
  margin-bottom: 14px;
}

.musicPlaylistEditorSummary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 31, 31, 0.14);
  color: #333333;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.musicPlaylistGrid {
  --music-playlist-grid-gap: 10px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--music-playlist-grid-gap);
  margin-top: 8px;
}

.musicPlaylistNav {
  display: grid;
  position: sticky;
  top: 10px;
  z-index: 3;
  align-content: start;
  gap: 5px;
}

.musicPlaylistTab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-color: rgba(31, 31, 31, 0.12);
  background: rgba(255, 255, 255, 0.52);
}

.musicPlaylistTab.isActive {
  position: relative;
  z-index: 2;
  flex-direction: column;
  align-items: stretch;
}

.musicPlaylistTabHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.musicPlaylistTabLabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.musicPlaylistAlbumArt {
  display: block;
  width: min(100%, 154px);
  aspect-ratio: 1 / 1;
  align-self: flex-start;
  border-radius: 7px;
  object-fit: cover;
  cursor: var(--cursor-magnify) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 2px 7px rgba(0,0,0,0.22);
}

.musicPlaylistDirtyDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d22f2f;
}

.musicPlaylistDisc {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(circle at center, #eeeeee 0 8%, #111 9% 18%, #222 19% 30%, #050505 31% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 2px 5px rgba(0,0,0,0.25);
}

.musicPlaylistDisc::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}

.musicPlaylistDisc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 1px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
}

.musicPlaylistDiscCenter {
  position: absolute;
  width: 4px;
  height: 4px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f8f8f8;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

.musicPlaylistDisc.isSpinning {
  animation: musicDiscSpin calc(1.35s / var(--music-disc-speed, 1)) linear infinite;
}

.musicPlaylistTab-setup,
.musicPlaylistTab-endgame,
.musicPlaylistTab-uploaded {
  color: #ffffff;
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-bg);
}

.musicPlaylistTab-setup:not(.isActive):not(:disabled):hover,
.musicPlaylistTab-endgame:not(.isActive):not(:disabled):hover,
.musicPlaylistTab-uploaded:not(.isActive):not(:disabled):hover {
  background: var(--ui-dark-bg-hover);
}

.musicPlaylistTab-all,
.musicPlaylistTab-recovered_records {
  color: #202020;
  border-color: rgba(31, 31, 31, 0.12);
  background: #ffffff;
}

.musicPlaylistTab-all:not(.isActive):not(:disabled):hover,
.musicPlaylistTab-recovered_records:not(.isActive):not(:disabled):hover {
  background: #ececec;
}

.musicPlaylistTab.isActive {
  color: #ffffff;
  border-color: #202020;
  background: #202020;
}

.musicPlaylistTab.isActive:not(:disabled):hover {
  filter: brightness(1.04);
}

.musicPlaylistTab-all.isActive,
.musicPlaylistTab-recovered_records.isActive {
  color: #202020;
  border-color: rgba(31, 31, 31, 0.16);
  background: #d9d9d9;
}

.musicPlaylistTab-setup.isActive {
  color: #103a58;
  border-color: rgba(28, 137, 218, 0.52);
  background: rgba(126, 207, 255, 0.72);
}

.musicPlaylistTab-in-game.isActive {
  color: #5d3300;
  border-color: rgba(226, 130, 16, 0.54);
  background: rgba(255, 193, 92, 0.74);
}

.musicPlaylistTab-endgame.isActive {
  color: #631707;
  border-color: rgba(204, 58, 30, 0.54);
  background: rgba(255, 139, 92, 0.74);
}

.musicPlaylistTab-game_end.isActive {
  color: #124d2c;
  border-color: rgba(33, 145, 78, 0.54);
  background: rgba(118, 222, 145, 0.74);
}

.musicPlaylistTab-uploaded.isActive {
  color: #54205f;
  border-color: rgba(143, 67, 210, 0.54);
  background: rgba(224, 126, 238, 0.72);
}

.musicPhasePanel {
  --music-panel-border: rgba(31, 31, 31, 0.1);
  display: grid;
  position: relative;
  gap: 10px;
  align-content: start;
  min-height: 168px;
  padding: 13px;
  border: 1px solid var(--music-panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.musicPhasePanel.isDropTarget {
  outline: 2px solid rgba(31, 31, 31, 0.5);
  outline-offset: 1px;
}

.musicPlaylistTab.isDropTarget {
  outline: 2px solid rgba(31, 31, 31, 0.5);
  outline-offset: 1px;
}

.musicPhasePanel-setup {
  background: rgba(126, 207, 255, 0.72);
}

.musicPhasePanel-in-game {
  background: rgba(255, 193, 92, 0.74);
}

.musicPhasePanel-endgame {
  background: rgba(255, 139, 92, 0.74);
}

.musicPhasePanel-game_end {
  background: rgba(118, 222, 145, 0.74);
}

.musicPhasePanel-uploaded {
  background: rgba(224, 126, 238, 0.72);
}

.musicPhasePanel-all,
.musicPhasePanel-recovered_records {
  background: #d9d9d9;
}

@media (min-width: 721px) {
  .musicPlaylistTab.isActive {
    width: calc(100% + var(--music-playlist-grid-gap) + 1px);
    margin-right: calc(-1 * (var(--music-playlist-grid-gap) + 1px));
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
  }

  .musicPlaylistTab.isActive .musicPlaylistTabHeader,
  .musicPlaylistTab.isActive .musicPlaylistAlbumArt {
    width: calc(100% - var(--music-playlist-grid-gap) - 1px);
  }

  .musicPlaylistTab.isActive .musicPlaylistAlbumArt {
    pointer-events: auto;
  }

  .musicPlaylistTab.isActive:not(:disabled):hover {
    filter: none;
  }

  .musicPhasePanel {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.musicPhasePanel-all .musicTrackBtn,
.musicPhasePanel-recovered_records .musicTrackBtn {
  --track-accent-rgb: 143, 67, 210;
  color: #202020;
  border-color: rgba(31, 31, 31, 0.12);
  background: #ffffff;
}

.musicPhasePanel-setup .musicTrackBtn {
  --track-accent-rgb: 226, 130, 16;
  color: #103a58;
  border-color: rgba(28, 137, 218, 0.52);
  background: rgba(235, 248, 255, 0.84);
}

.musicPhasePanel-in-game .musicTrackBtn {
  --track-accent-rgb: 132, 74, 220;
  color: #5d3300;
  border-color: rgba(226, 130, 16, 0.54);
  background: rgba(255, 247, 220, 0.88);
}

.musicPhasePanel-endgame .musicTrackBtn {
  --track-accent-rgb: 34, 187, 196;
  color: #631707;
  border-color: rgba(204, 58, 30, 0.54);
  background: rgba(255, 225, 210, 0.88);
}

.musicPhasePanel-game_end .musicTrackBtn {
  --track-accent-rgb: 218, 72, 132;
  color: #124d2c;
  border-color: rgba(33, 145, 78, 0.54);
  background: rgba(230, 255, 236, 0.88);
}

.musicPhasePanel-uploaded .musicTrackBtn {
  --track-accent-rgb: 238, 173, 54;
  color: #54205f;
  border-color: rgba(143, 67, 210, 0.54);
  background: rgba(252, 232, 255, 0.88);
}

.musicPhaseHeader {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.musicPhaseHeading {
  display: grid;
  gap: 2px;
}

.musicPhaseTitle {
  color: #222222;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.musicTrackCount {
  color: #717171;
  font-size: 11px;
  font-weight: 700;
}

.musicAddBtn {
  min-width: 58px;
  padding: 8px 12px;
  color: #202020;
  border-color: rgba(31, 31, 31, 0.12);
  background: #d9d9d9;
}

.cursorsManager #cursorViewOthersBtn {
  border-color: #646464;
  background: #646464;
}

.musicSaveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 58px;
  color: #ffffff;
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-bg);
}

.musicPhaseActions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.musicTrackList {
  display: grid;
  gap: 5px;
}

.musicTrackRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.musicTrackRow.hasPhaseStripe .musicTrackBtn::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--music-track-phase-color, rgba(28, 137, 218, 0.9));
  box-shadow: 0 0 9px var(--music-track-phase-color, rgba(28, 137, 218, 0.9));
  pointer-events: none;
}

.musicTrackDirtyDot,
.musicSaveDirtyDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d22f2f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.musicTrackDirtyDot {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-right: 2px;
}

.musicTrackBtn.isPlaying::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.85), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 18% / var(--track-wave-1, 42%) 2px no-repeat,
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.78), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 31% / var(--track-wave-2, 56%) 2px no-repeat,
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.98), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 43% / var(--track-wave-3, 72%) 2px no-repeat,
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.72), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 56% / var(--track-wave-4, 36%) 2px no-repeat,
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.9), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 69% / var(--track-wave-5, 64%) 2px no-repeat,
    linear-gradient(90deg, rgba(var(--track-accent-rgb, 34, 212, 219), 0.76), rgba(var(--track-accent-rgb, 34, 212, 219), 0)) right 82% / var(--track-wave-6, 48%) 2px no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--track-accent-rgb, 34, 212, 219), 0.42));
  opacity: calc(0.42 + var(--track-pulse, 0) * 0.58);
  transition:
    background-size 0.08s linear,
    opacity 0.08s linear;
}

.musicTrackRow.isDraggable {
  cursor: var(--cursor-grab);
  touch-action: none;
}

.musicTrackRow.isDragging {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .musicTrackBtn.isPlaying {
    box-shadow: 0 0 0 2px rgba(var(--track-accent-rgb, 34, 212, 219), 0.34);
  }
}

.musicTrackBtn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 12px;
  text-align: left;
  border-color: rgba(31, 31, 31, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

.musicTrackRow.hasPhaseStripe .musicTrackBtn {
  padding-left: 18px;
}

.musicTrackLabel {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.musicTrackDuration {
  flex: 0 0 auto;
  color: rgba(32, 32, 32, 0.56);
  font-size: 11px;
  font-weight: 750;
}

.musicTrackLabelText {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicTrackBtn.isSelected .musicTrackDuration {
  color: rgba(255, 255, 255, 0.62);
}

.musicTrackBtn.isSelected .musicTrackLabel.isMarquee .musicTrackLabelText {
  max-width: none;
  padding-right: 28px;
  animation: musicTrackNameMarquee 9s linear infinite;
}

.musicTrackBtn.isSelected {
  color: #ffffff;
  border-color: #202020;
  background: #202020;
}

.musicTrackBtn.isSelected::after {
  content: none;
}

.musicTrackRow.isSelected .musicTrackBtn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 38%);
  grid-template-rows: auto auto;
  align-items: start;
  min-height: 42px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.musicTrackBtn.isSelected.isPlaying {
  border-color: rgb(var(--track-accent-rgb, 34, 212, 219) / calc(0.36 + var(--track-pulse, 0) * 0.5));
  box-shadow:
    0 0 0 calc(1px + var(--track-pulse, 0) * 4px) rgba(var(--track-accent-rgb, 34, 212, 219), var(--track-pulse-ring-alpha, 0.12)),
    0 0 calc(2px + var(--track-pulse, 0) * 18px) rgba(var(--track-accent-rgb, 34, 212, 219), var(--track-pulse-glow-alpha, 0.14)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition:
    box-shadow 0.08s linear,
    border-color 0.08s linear;
}

.musicTrackBtn.isSelected:not(:disabled):hover {
  background: #303030;
}

.musicTrackMetadata {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 10px;
  color: #f2f2f2;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-line;
}

.musicTrackWaveform {
  position: relative;
  z-index: 3;
  display: block;
  flex: 0 0 38%;
  width: 38%;
  height: 22px;
  margin-left: auto;
  align-self: center;
}

.musicTrackBtn.isSelected .musicTrackWaveform {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex: initial;
  width: 100%;
  height: 100%;
  min-height: 100px;
  margin-left: 0;
  align-self: stretch;
}

.musicTrackMetadataRow {
  display: grid;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.musicTrackMetadataKey {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 600;
}

.musicTrackMetadataValue {
  min-width: 0;
  overflow-wrap: anywhere;
}

.musicTrackMetadataValue a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.musicTrackBtn.isMuted,
.musicTrackBtn:disabled {
  color: #7d7d7d;
  border-color: rgba(31, 31, 31, 0.08);
  background: rgba(255, 255, 255, 0.42);
  opacity: 0.62;
}

@keyframes musicTrackNameMarquee {
  0%,
  18% {
    transform: translateX(0);
  }
  82%,
  100% {
    transform: translateX(calc(-100% + 100px));
  }
}

.musicTrackActions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.musicRemoveBtn,
.musicDownloadBtn {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #696969;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

.musicRemoveBtn:hover,
.musicDownloadBtn:hover {
  color: #ffffff;
  background: #202020;
}

.musicDownloadBtn {
  font-size: 15px;
}

.musicPreviewControls,
.musicPreviewSeek {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.musicPreviewControls {
  justify-content: center;
  min-height: 96px;
  margin-top: 0;
}

.musicTransportBtn {
  display: grid;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(215, 167, 33, 0.72);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--ui-dark-pill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 169, 0.16),
    0 0 8px rgba(215, 167, 33, 0.16);
  font-size: 26px;
  line-height: 1;
}

.musicTransportBtn:not(:disabled):hover,
.musicUtilityBtn:not(:disabled):hover {
  color: rgba(255, 255, 255, 0.92);
  background: var(--ui-dark-bg-hover);
}

.musicPlayPauseBtn {
  width: 72px;
  min-width: 72px;
  height: 72px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 22px;
}

.musicModeBtn {
  color: rgba(255, 255, 255, 0.54);
}

.musicModeBtn.isActive {
  color: #22d4db;
  box-shadow: inset 0 0 0 1px rgba(34, 212, 219, 0.42);
}

.musicPreviewControls label,
.musicPreviewSeek label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.musicPreviewSeek {
  display: grid;
  grid-template-columns: auto minmax(240px, 520px) auto;
  justify-content: center;
  gap: 10px;
  padding: 0 18px 22px;
}

.musicPreviewSeekTrace {
  --music-preview-seek-progress: 0%;
  --music-preview-seek-progress-center: 0%;
  --music-preview-trace-color: rgba(126, 207, 255, 0.92);
  --music-preview-trace-shadow: rgba(72, 176, 235, 0.42);
  position: relative;
  width: 100%;
}

.musicPreviewSeekTrace input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.musicPreviewSeekTrace input[type="range"]:focus {
  outline: 0;
}

.musicPreviewSeekTrace input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--music-preview-trace-color) 0 var(--music-preview-seek-progress-center),
      rgba(255, 255, 255, 0.16) var(--music-preview-seek-progress-center) 100%
    );
  border: 1px solid rgba(215, 167, 33, 0.86);
  box-shadow:
    0 0 0 1px rgba(255, 241, 169, 0.2),
    0 0 8px var(--music-preview-trace-shadow),
    inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.musicPreviewSeekTrace input[type="range"]::-webkit-slider-thumb {
  width: 42px;
  height: 42px;
  margin-top: -18px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: url("/visual/ui/trace_thumb.png") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--music-preview-trace-shadow));
}

.musicPreviewSeekTrace input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(215, 167, 33, 0.86);
  box-shadow:
    0 0 0 1px rgba(255, 241, 169, 0.2),
    0 0 8px var(--music-preview-trace-shadow),
    inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.musicPreviewSeekTrace input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--music-preview-trace-color);
}

.musicPreviewSeekTrace input[type="range"]::-moz-range-thumb {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: url("/visual/ui/trace_thumb.png") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--music-preview-trace-shadow));
}

.musicTraceSpark {
  position: absolute;
  left: var(--music-preview-seek-progress-center);
  top: 50%;
  width: var(--music-trace-spark-width, 22px);
  height: var(--music-trace-spark-height, 8px);
  border-radius: 0;
  background: none;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  animation: musicTraceSparkDynamic var(--music-trace-spark-duration, 0.44s) ease-out forwards;
}

.musicTraceSpark::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      var(--music-preview-trace-color) 44%,
      rgba(255, 255, 255, 0.98) 100%
    );
  box-shadow:
    0 0 7px var(--music-preview-trace-color),
    0 0 12px var(--music-preview-trace-shadow);
}

@keyframes musicTraceSparkDynamic {
  0% {
    opacity: 0;
    transform:
      translate(var(--music-trace-spark-start-x, -44px), calc(-50% + var(--music-trace-spark-start-y, -5px)))
      rotate(var(--music-trace-spark-start-rotate, 18deg))
      scaleX(0.25);
  }
  18% {
    opacity: var(--music-trace-spark-opacity, 0.92);
    transform:
      translate(var(--music-trace-spark-bright-x, -47px), calc(-50% + var(--music-trace-spark-bright-y, -7px)))
      rotate(var(--music-trace-spark-start-rotate, 18deg))
      scaleX(var(--music-trace-spark-scale, 1));
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--music-trace-spark-end-x, -58px), calc(-50% + var(--music-trace-spark-end-y, -13px)))
      rotate(var(--music-trace-spark-end-rotate, 22deg))
      scaleX(0.18);
  }
}

.musicTimeLabel {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.musicPreviewUtilities {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 16px;
  align-items: end;
}

.musicPreviewPlayer {
  position: relative;
}

.musicUtilityControl {
  position: relative;
}

.musicUtilityBtn {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(215, 167, 33, 0.72);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--ui-dark-pill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 169, 0.16),
    0 0 8px rgba(215, 167, 33, 0.16);
  font-size: 18px;
}

.musicModeBtn.isActive:not(:disabled):hover {
  color: #38f0f5;
}

.musicUtilityPopover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 56px;
  padding: 12px 10px;
  border-radius: 999px;
  background: var(--ui-dark-bg);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

.musicUtilityPopover[hidden] {
  display: none;
}

.musicSpeedControl input[type="range"],
.musicVolumeControl input[type="range"] {
  width: 18px;
  height: 108px;
  writing-mode: vertical-lr;
  direction: rtl;
}

.musicSpeedControl output,
.musicVolumeControl output {
  min-width: 28px;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.musicTrackEmpty {
  padding: 12px;
  color: #6d6d6d;
  border: 1px dashed rgba(31, 31, 31, 0.18);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.musicTrackEmpty.isDropHint {
  display: grid;
  min-height: 74px;
  place-items: center;
  color: rgba(31, 31, 31, 0.72);
  border-color: rgba(31, 31, 31, 0.34);
  background: rgba(255, 255, 255, 0.28);
  text-align: center;
}

.musicAddDialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(31, 31, 31, 0.16);
  border-radius: 8px;
}

.musicAddDialog::backdrop,
.musicAlbumArtDialog::backdrop {
  background: rgba(0, 0, 0, 0.34);
}

.musicAlbumArtDialog {
  width: min(1180px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #111111;
}

.musicAlbumArtDialog form {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #111111;
}

.musicAlbumArtCloseBtn {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #f5f5f5;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  font-size: 18px;
  line-height: 1;
}

.musicAlbumArtCloseBtn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.musicAlbumArtDialogImage {
  display: block;
  width: min(100%, 1120px);
  max-height: min(88vh, 980px);
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
  background: #202020;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.musicAlbumArtPreserveBtn {
  justify-self: center;
  color: #202020;
  border-color: rgba(31, 31, 31, 0.12);
  background: #ffffff;
}

.musicAddDialog form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.musicAddDialogHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.musicAddDialogHeader button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
}

.musicAddDialogTracks {
  display: grid;
  gap: 6px;
}

.musicAddDialogTracks button {
  text-align: left;
}

.musicAddTrackOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.musicAddTrackMeta {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(31, 31, 31, 0.12);
  color: #666666;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .presetManager {
    grid-template-columns: 1fr;
  }

  .presetIntro {
    padding-right: 0;
  }

  .presetWorkspace {
    margin-top: 14px;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgba(31, 31, 31, 0.16);
    border-left: 0;
  }

  .musicPreviewUtilities {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 720px),
  (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .musicPlaylistGrid {
    grid-template-columns: 1fr;
  }

  .musicPreviewSeek {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 4px;
  }

  .musicPreviewSeekTrace {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .musicTimeLabel {
    grid-row: 2;
  }

  #musicPreviewCurrentTime {
    justify-self: start;
    padding-left: 11px;
  }

  #musicPreviewDuration {
    justify-self: end;
    padding-right: 11px;
  }
}

.customPieceEditor[hidden] {
  display: none;
}

.customPieceEditorMain {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.customPieceEditorPreview {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 300px;
  height: 300px;
  border-radius: 8px;
  border: 2px solid rgba(35, 35, 35, 0.76);
  background: #f0d9b5;
  touch-action: none;
}

.cursorEditorPreview {
  touch-action: none;
}

.customPieceEditorPreview.isWhitePiece {
  background: #f0d9b5;
}

.customPieceEditorPreview.isBlackPiece {
  background: #b58863;
}

.customPieceReferenceImage,
.customPieceEditorImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.customPieceReferenceImage {
  opacity: 0.32;
}

.customPieceEditorImage {
  transform:
    translate(var(--custom-piece-x, 0px), var(--custom-piece-y, 0px))
    scale(var(--custom-piece-scale, 1));
  transform-origin: center center;
}

.customPieceEditorGrid {
  position: absolute;
  inset: 0;
  display: none;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(70, 70, 70, 0.22) 0,
      rgba(70, 70, 70, 0.22) 1px,
      transparent 1px,
      transparent calc(100% / 12)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(70, 70, 70, 0.22) 0,
      rgba(70, 70, 70, 0.22) 1px,
      transparent 1px,
      transparent calc(100% / 12)
    );
  pointer-events: none;
}

.customPieceEditorGrid.isVisible {
  display: block;
}

.customPieceCenterGuides {
  position: absolute;
  inset: 0;
  display: none;
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(45, 45, 45, 0.48) calc(50% - 0.5px), rgba(45, 45, 45, 0.48) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(45, 45, 45, 0.48) calc(50% - 0.5px), rgba(45, 45, 45, 0.48) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}

.customPieceCenterGuides.isVisible {
  display: block;
}

.customPieceEditorActions {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 180px;
}

.customPieceEditorTopActions {
  display: grid;
  gap: 8px;
}

.customPieceEditorControls {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  min-width: 210px;
}

.customPieceOverlayOptions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #4a4a4a;
}

.customPieceOverlayOptions label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.customPieceEditorControls label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #4a4a4a;
}

.customPieceControlRow {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 8px;
  align-items: center;
}

.customPieceEditorControls input[type="range"] {
  width: 100%;
}

.customPieceEditorControls input[type="text"] {
  width: 56px;
  min-height: 28px;
  padding: 4px 6px;
  text-align: right;
}

#customPieceResetBtn {
  align-self: end;
  color: #ffffff;
  border-color: #202020;
  background: #202020;
}

#customPieceReplaceBtn:not(:disabled):hover,
#customAssetTermsAcknowledgeBtn:not(:disabled):hover,
#customAssetUploadConfirmBtn:not(:disabled):hover {
  background: #f2f2f2;
}

#customPieceReplaceBtn {
  align-self: end;
  min-width: 120px;
}

.backgroundManager {
  margin-top: 12px;
  color: #f7f7f7;
  background: var(--ui-dark-bg);
}

.backgroundManager .backgroundCaption {
  color: rgba(247, 247, 247, 0.88);
}

.backgroundHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.backgroundTitle {
  margin-top: 0;
  font-size: 16px;
}

.backgroundCarousel {
  display: block;
  margin-top: 14px;
}

.backgroundViewport {
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: var(--cursor-grab);
  user-select: none;
  touch-action: pan-y;
}

.backgroundViewport.isDragging {
  cursor: var(--cursor-grabbing);
}

.backgroundGallery {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 2px 2px 123px;
  transition: transform 0.28s ease;
  will-change: transform;
}

.backgroundTile {
  appearance: none;
  flex: 0 0 255px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  opacity: var(--slide-opacity, 0.82);
  transform: scale(var(--slide-scale, 1));
  transform-origin: center top;
  margin-inline: var(--slide-margin, 0px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.backgroundTile:hover {
  background: transparent;
}

.backgroundTile:not(:disabled):active,
.backgroundAddTile:not(:disabled):active {
  filter: brightness(0.96);
}

.backgroundTile.isSelected {
  box-shadow: none;
}

.backgroundImageWrap {
  position: relative;
  margin-bottom: calc(67% + 6px);
}

.backgroundThumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

.backgroundImageWrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  height: 67%;
  border-radius: 6px;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10), rgba(246, 246, 246, 0.94)),
    var(--background-reflection-url);
  background-size: cover;
  background-position: center;
  transform: scaleY(-1);
  opacity: 0.36;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 3%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 67%,
    transparent 95%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 3%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 67%,
    transparent 95%
  );
}

.backgroundTile.isSelected .backgroundThumb {
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--customisations-foil-gloss) border-box,
    var(--customisations-foil-gold) border-box;
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    0 0 12px rgba(215, 167, 33, 0.20);
}

.backgroundMarker,
.backgroundAddTile {
  position: relative;
  flex: 0 0 255px;
  min-height: 144px;
  border-radius: 6px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 850;
  color: #f2f2f2;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.96), rgba(72, 72, 72, 0.92));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
  opacity: var(--slide-opacity, 0.82);
  transform: scale(var(--slide-scale, 1));
  transform-origin: center top;
  margin-inline: var(--slide-margin, 0px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.backgroundAddTile {
  font-size: 34px;
  cursor: var(--cursor-pointer);
}

.backgroundAddTile:hover {
  background: linear-gradient(135deg, rgba(28, 28, 28, 0.98), rgba(88, 88, 88, 0.94));
}

.backgroundEmpty {
  padding: 10px 0;
}

.backgroundUploadInput {
  display: none;
}

.customAssetTermsDialog,
.customAssetUploadDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(920px, calc(100vh - 20px));
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.customAssetTermsDialog::backdrop,
.customAssetUploadDialog::backdrop {
  background: rgba(0, 0, 0, 0.48);
}

.visualDedupeDialog {
  width: min(820px, calc(100vw - 32px));
}

.customAssetDialogInner {
  display: grid;
  gap: 14px;
  max-height: min(920px, calc(100vh - 20px));
  padding: 18px;
  background: #f7f7f7;
}

.customAssetTermsDialog .customAssetDialogInner {
  background: #202020;
}

.customAssetTermsDialog .title-sm {
  color: #f5f5f5;
}

.customAssetTermsBody {
  max-height: min(700px, calc(100vh - 180px));
  overflow: auto;
  scrollbar-color: #dfc35f rgba(13, 10, 7, 0.88);
  scrollbar-width: auto;
  padding: 14px;
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #282828;
  font-size: 13px;
  line-height: 1.45;
}

.customAssetTermsBody::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.customAssetTermsBody::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(rgba(20, 15, 10, 0.92), rgba(13, 10, 7, 0.96)),
    #17110b;
}

.customAssetTermsBody::-webkit-scrollbar-thumb {
  border: 2px solid rgba(13, 10, 7, 0.92);
  border-radius: 999px;
  background:
    linear-gradient(
      160deg,
      #f5e7ad 0%,
      #dfc35f 18%,
      #b98824 36%,
      #ecd983 52%,
      #c69836 68%,
      #dfc663 84%,
      #a6751d 100%
    );
  background-clip: padding-box;
}

.customAssetTermsBody::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      160deg,
      #faedba 0%,
      #e6ca6d 18%,
      #c1922b 36%,
      #f0df91 52%,
      #cea03e 68%,
      #e8cf70 84%,
      #b27f22 100%
    );
}

.customAssetTermsBody h3 {
  margin: 16px 0 6px;
  font-size: 13px;
}

.customAssetTermsBody p,
.customAssetTermsBody ul {
  margin: 0 0 10px;
}

.customAssetUploadPreview {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 12px;
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.customAssetUploadPreview img,
.customAssetUploadPreview audio {
  max-width: 100%;
}

.customAssetUploadPreview img {
  max-height: 320px;
  object-fit: contain;
}

.customAssetUploadFileName {
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 700;
}

.customAssetClickwrap {
  display: grid;
  gap: 9px;
  color: #2c2c2c;
  font-size: 12px;
  line-height: 1.35;
}

.customAssetClickwrap p {
  margin: 0;
  font-weight: 800;
}

.customAssetClickwrap label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

#customAssetTermsAcknowledgeBtn,
#customAssetUploadConfirmBtn {
  justify-self: end;
}

.visualDedupeMessage {
  margin: 0;
  color: #2c2c2c;
  font-size: 13px;
  font-weight: 700;
}

.visualDedupeCompare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.visualDedupePanel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.visualDedupeLabel {
  color: #444444;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.visualDedupePanel img {
  width: 100%;
  height: min(300px, 42vh);
  object-fit: contain;
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.visualDedupePanel audio {
  width: 100%;
  min-height: 44px;
}

.visualDedupeActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .visualDedupeCompare {
    grid-template-columns: 1fr;
  }
}

.backgroundMarker::after,
.backgroundAddTile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  height: 67%;
  border-radius: 6px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10), rgba(246, 246, 246, 0.94)),
    linear-gradient(135deg, rgba(18, 18, 18, 0.96), rgba(72, 72, 72, 0.92));
  transform: scaleY(-1);
  opacity: 0.36;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 3%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 67%,
    transparent 95%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 3%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 67%,
    transparent 95%
  );
}

.backgroundThumb {
  -webkit-user-drag: none;
  user-select: none;
}

.backgroundCaption {
  min-height: 16px;
  margin-top: -24px;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  color: #4a4a4a;
}

.backgroundActions {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

#randomBackgroundBtn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.backgroundReportBtn {
  position: absolute;
  left: calc(50% + 96px);
  top: 50%;
  transform: translateY(-50%);
}

.customisationsBackLink {
  color: #111111;
  font-weight: 750;
}

.customisationsBackLink:hover {
  text-decoration: underline;
}

.customisationsShell .titleNavLinks {
  gap: 6px;
}

.customisationsShell .customisationsBackLink,
.customisationsShell .profileTopLink {
  width: 20px;
  height: 24px;
  justify-content: center;
}

/* Customisations dark container trims */

.customisationsShell {
  --customisations-foil-gold:
    linear-gradient(
      135deg,
      rgba(255, 248, 203, 0.69) 0%,
      rgba(248, 229, 141, 0.69) 9%,
      rgba(215, 167, 33, 0.69) 24%,
      rgba(255, 241, 169, 0.69) 40%,
      rgba(200, 138, 17, 0.69) 56%,
      rgba(246, 214, 94, 0.69) 74%,
      rgba(139, 90, 3, 0.69) 100%
    );
  --customisations-foil-gloss:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.10) 18%,
      rgba(255, 255, 255, 0.02) 34%,
      rgba(0, 0, 0, 0.00) 58%,
      rgba(0, 0, 0, 0.12) 100%
    );
  --customisations-dark-fill: var(--ui-dark-bg);
}

.customisationsShell .boardEditManager,
.customisationsShell .backgroundManager,
.customisationsShell .cursorsManager,
.customisationsShell .musicPreviewPlayer,
.customisationsShell .musicUtilityPopover,
.customisationsShell .musicAlbumArtDialog,
.customisationsShell .musicAlbumArtDialog form,
.customisationsShell .customAssetTermsDialog .customAssetDialogInner {
  border: 2.5px solid transparent !important;
  box-sizing: border-box;
  background:
    linear-gradient(var(--customisations-dark-fill), var(--customisations-dark-fill)) padding-box,
    var(--customisations-foil-gloss) border-box,
    var(--customisations-foil-gold) border-box !important;
  background-clip: padding-box, border-box, border-box !important;
  background-origin: border-box !important;
  background-blend-mode: normal, soft-light, normal;
}

.customisationsShell .boardEditManager::before,
.customisationsShell .boardEditManager::after,
.customisationsShell .backgroundManager::before,
.customisationsShell .backgroundManager::after,
.customisationsShell .cursorsManager::before,
.customisationsShell .cursorsManager::after,
.customisationsShell .musicPreviewPlayer::before,
.customisationsShell .musicPreviewPlayer::after,
.customisationsShell .musicUtilityPopover::before,
.customisationsShell .musicUtilityPopover::after,
.customisationsShell .musicAlbumArtDialog::before,
.customisationsShell .musicAlbumArtDialog::after,
.customisationsShell .musicAlbumArtDialog form::before,
.customisationsShell .musicAlbumArtDialog form::after,
.customisationsShell .customAssetTermsDialog .customAssetDialogInner::before,
.customisationsShell .customAssetTermsDialog .customAssetDialogInner::after {
  display: none !important;
  content: none !important;
}

.customisationsShell .boardEditManager,
.customisationsShell .backgroundManager,
.customisationsShell .cursorsManager {
  border-radius: 12px;
}

.customisationsShell .musicPreviewPlayer {
  border-radius: 8px;
}

.customisationsShell .musicAlbumArtDialog,
.customisationsShell .musicAlbumArtDialog form {
  --customisations-dark-fill: #111111;
}

.customisationsShell .musicAlbumArtDialog,
.customisationsShell .customAssetTermsDialog .customAssetDialogInner {
  border-radius: 12px;
}

.customisationsShell .customAssetTermsDialog .customAssetDialogInner {
  --customisations-dark-fill: #202020;
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  .titlebarMusicSpacer {
    display: none;
  }

  .presetManager,
  .presetIntro,
  .presetWorkspace,
  .presetField,
  .presetSelectRow,
  .presetActions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .presetWorkspace,
  .presetField,
  .presetSelectRow,
  .presetActions {
    width: 100%;
  }

  .presetSelectRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .presetSelectRow > select,
  .presetSelectRow .hypercarrySelectControl {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .presetSelectRow #applyPresetBtn,
  .presetSelectRow #deletePresetBtn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .presetSelectRow .hypercarrySelectButton {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .presetActions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .presetActions input[type="text"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .presetNameActionControl {
    max-width: 100%;
  }

  .musicPreviewNowPlaying,
  .musicPlaylistAlbumArt {
    display: none !important;
  }

  .musicTrackRow.isSelected .musicTrackBtn {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    align-items: center;
    min-height: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .musicTrackBtn.isSelected .musicTrackWaveform,
  .musicTrackBtn.isSelected .musicTrackMetadata {
    display: none;
  }

  .standardPiecesTray,
  .customPiecesTray {
    flex-direction: column;
    align-items: stretch;
  }

  .standardPieceHalf,
  .customPieceHalf {
    width: 100%;
    flex: 0 0 auto;
  }

  .standardPieceDivider,
  .customPieceDivider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}