.container h1 {
   color: black; 
   background-color: lightgray;
   border-radius: 10px;
   padding: 10px;
   font-size: 40px;
}

.container {
   text-align: left;
   max-width: none;
   width: 100%;
   margin: 0 auto;
   padding: 20px 6px;
}

.subtitle {
   margin-top: 8px;
   margin-bottom: 12px;
}

.toolbar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 8px;
}

.toolbar label {
   font-weight: 600;
   color: #333;
}

#toggleShowDraftedButton[hidden],
#clearSearchButton[hidden],
#draftToolbar[hidden],
#myTeamPanel[hidden] {
   display: none !important;
}

#toggleDraftModeButton {
   border: 1px solid #4e8f3a;
   border-radius: 6px;
   background-color: #f1f9ed;
   color: #2f6d1d;
   font-weight: 700;
   padding: 8px 10px;
   margin: 0;
   cursor: pointer;
}

#toggleShowDraftedButton {
   border: 1px solid #6d7f92;
   border-radius: 6px;
   background-color: #f2f5f8;
   color: #2f465f;
   font-weight: 700;
   padding: 8px 10px;
   margin: 0;
   cursor: pointer;
}

#toggleShowDraftedButton:hover {
   background-color: #e5edf5;
}

#toggleShowDraftedButton.active {
   background-color: #2f465f;
   border-color: #2f465f;
   color: #ffffff;
}

#toggleDraftModeButton:hover {
   background-color: #e3f2db;
}

#toggleDraftModeButton.active {
   background-color: #2f6d1d;
   border-color: #2f6d1d;
   color: #ffffff;
}

.search-toolbar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 6px;
}

.search-toolbar label {
   font-weight: 600;
   color: #333;
}

#playerSearchInput {
   border: 1px solid #c8c8c8;
   border-radius: 6px;
   padding: 8px 10px;
   font-size: 14px;
   background-color: #fff;
   min-width: 260px;
}

#clearSearchButton {
   border: 1px solid #4a90e2;
   border-radius: 6px;
   background-color: #f1f7ff;
   color: #235a9f;
   font-weight: 600;
   padding: 8px 10px;
   margin: 0;
   cursor: pointer;
}

#clearSearchButton:hover {
   background-color: #dcecff;
}

#clearSearchButton:disabled {
   opacity: 0.5;
   cursor: default;
}

.search-status {
   flex-basis: 100%;
   min-height: 18px;
   font-size: 12px;
   color: #4c5f73;
}

.draft-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 6px;
   padding: 8px 10px;
   border-radius: 8px;
   border: 1px solid #cfe2bf;
   background: #f8fcf4;
}

.draft-summary {
   text-align: left;
   font-size: 13px;
   color: #2f4d24;
   font-weight: 600;
}

#clearDraftMarksButton {
   border: 1px solid #7e9599;
   border-radius: 6px;
   background-color: #f5f8f8;
   color: #274047;
   font-weight: 600;
   padding: 7px 10px;
   margin: 0;
   cursor: pointer;
}

#clearDraftMarksButton:hover {
   background-color: #e7eeef;
}

#clearDraftMarksButton:disabled {
   opacity: 0.45;
   cursor: default;
}

#positionFilter {
   border: 1px solid #c8c8c8;
   border-radius: 6px;
   padding: 8px 10px;
   font-size: 14px;
   background-color: #fff;
}

.sign-in-hint {
   margin: 4px 0;
   font-size: 13px;
   font-weight: 600;
   color: #5a6a7a;
}

.view-hint {
   min-height: 20px;
   margin: 0;
   font-size: 13px;
   color: #4d4d4d;
}

.tier-toolbar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 8px 0;
}

.tier-toolbar button {
   border: 1px solid #4a90e2;
   border-radius: 6px;
   background-color: #f1f7ff;
   color: #235a9f;
   font-weight: 600;
   padding: 8px 10px;
   margin: 0;
   cursor: pointer;
}

.tier-toolbar button:hover {
   background-color: #dcecff;
}

.ranking-list {
   list-style: none;
   list-style-type: none;
   padding: 0;
   margin: 12px 0 0;
   background: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   counter-reset: list-counter;
}

.ranker-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   column-gap: 0;
   align-items: start;
   width: 100%;
}

.ranker-layout.draft-mode-active {
   grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
   column-gap: 28px;
}

.board-panel {
   min-width: 0;
   width: 100%;
}

.my-team-panel {
   border: 1px solid #d5dde6;
   border-radius: 10px;
   background: #fbfdff;
   padding: 12px;
   text-align: left;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   position: sticky;
   top: 12px;
   width: 100%;
}

.my-team-panel h2 {
   margin: 0;
   font-size: 20px;
   color: #1e3550;
}

.my-team-summary {
   margin-top: 8px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-size: 13px;
   color: #29445f;
   font-weight: 600;
}

.my-team-position-counts {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
}

.my-team-count-chip {
   border-radius: 999px;
   padding: 4px 8px;
   background: #e8f1fb;
   color: #224a74;
   font-size: 12px;
   font-weight: 700;
}

.my-team-list {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.my-team-list-item {
   border: 1px solid #dbe5ef;
   border-radius: 8px;
   background: #ffffff;
   padding: 8px 9px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}

.my-team-player-main {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}

.my-team-player-name {
   font-size: 14px;
   font-weight: 700;
   color: #1f3449;
}

.my-team-player-meta {
   font-size: 12px;
   color: #516273;
}

.my-team-position-tag {
   border-radius: 999px;
   padding: 3px 8px;
   background: #ecf3ff;
   color: #2c5c98;
   font-size: 11px;
   font-weight: 800;
   white-space: nowrap;
}

.my-team-empty {
   border: 2px dashed rgba(191, 154, 74, 0.4);
   border-radius: 12px;
   background: rgba(191, 154, 74, 0.04);
   padding: 24px 16px;
   font-size: 13.5px;
   color: #7f6a6f;
   text-align: center;
   line-height: 1.5;
}

.ranking-item {
   padding: 8px 14px;
   background: white;
   border: 1px solid #e0e0e0;
   margin: 3px 5px;
   border-radius: 5px;
   cursor: move;
   transition: all 0.2s ease;
   user-select: none;
   font-size: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   gap: 8px;
   min-width: 0;
}

.ranking-item.drafted-self {
   background: #eef8ea;
   border-color: #b9ddb0;
}

.ranking-item.drafted-other {
   background: #f5f5f5;
   border-color: #d8d8d8;
}

.ranking-item.is-drafted .player-name {
   text-decoration: line-through;
   color: #4f5d4a;
}

.ranking-item .draft-status-pill {
   font-size: 11px;
   font-weight: 700;
   border-radius: 999px;
   padding: 4px 9px;
   white-space: nowrap;
   margin-left: 6px;
}

.ranking-item .draft-status-pill.self {
   background: #d6ebcf;
   color: #214d12;
}

.ranking-item .draft-status-pill.other {
   background: #e7e7e7;
   color: #444;
}

.draft-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 5px;
   margin-left: auto;
   flex-shrink: 0;
}

.draft-action-button {
   border: 1px solid #95a5ad;
   border-radius: 999px;
   background: #ffffff;
   color: #39515a;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 8px;
   margin: 0;
   cursor: pointer;
}

.draft-action-button:hover {
   background: #f0f5f7;
}

.draft-action-button.active-self {
   border-color: #3e8c27;
   background: #3e8c27;
   color: #ffffff;
}

.draft-action-button.active-other {
   border-color: #6e7b80;
   background: #6e7b80;
   color: #ffffff;
}

.draft-action-button.clear {
   border-color: #be6c6c;
   color: #8f2f2f;
   background: #fff6f6;
}

.draft-action-button.clear:hover {
   background: #ffeaea;
}

.tier-divider {
   margin: 8px 5px 4px;
   padding: 8px 10px;
   border-radius: 8px;
   list-style: none;
   background: linear-gradient(90deg, #e9f3ff 0%, #f6faff 100%);
   border: 1px solid #c8dcf3;
   color: #264a74;
   font-weight: 700;
   text-align: left;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: default;
   position: relative;
}

.ranking-item.drop-target-before::before,
.tier-divider.drop-target-before::before {
   content: '';
   position: absolute;
   left: 10px;
   right: 10px;
   top: -6px;
   height: 3px;
   border-radius: 999px;
   background: #1976d2;
   pointer-events: none;
}

.ranking-item.search-match {
   border-color: #b7d3f2;
   background: #f8fcff;
}

.ranking-item.search-nonmatch {
   opacity: 0.42;
}

.ranking-item.search-active-match {
   opacity: 1;
   outline: 2px solid #f59e0b;
   outline-offset: 1px;
   box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.ranking-list.drop-target-end::after {
   content: '';
   display: block;
   margin: 8px 14px 10px;
   height: 3px;
   border-radius: 999px;
   background: #1976d2;
}

.ranking-item.just-dropped,
.tier-divider.just-dropped {
   animation: drop-snap 220ms cubic-bezier(0.22, 1, 0.36, 1),
      drop-highlight 1200ms ease-out;
}

@keyframes drop-snap {
   0% {
      transform: scale(0.985) translateY(2px);
   }

   60% {
      transform: scale(1.01) translateY(-1px);
   }

   100% {
      transform: scale(1) translateY(0);
   }
}

@keyframes drop-highlight {
   0% {
      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.35), 0 6px 14px rgba(25, 118, 210, 0.18);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(25, 118, 210, 0), 0 0 0 rgba(25, 118, 210, 0);
   }
}

.tier-divider .tier-drag-handle {
   font-size: 14px;
   letter-spacing: 1px;
   color: #5b7490;
   cursor: grab;
   user-select: none;
   padding: 2px 6px;
   border-radius: 4px;
}

.tier-divider .tier-drag-handle:hover {
   background: #d9e8f8;
}

.tier-divider .tier-label-input {
   border: 1px solid #b8d0ea;
   border-radius: 5px;
   background: #ffffff;
   color: #1f3f63;
   font-size: 13px;
   font-weight: 600;
   padding: 5px 7px;
   flex: 1 1 auto;
   min-width: 0;
}

.tier-divider .tier-label-input:focus {
   outline: 2px solid #a9c9ec;
   outline-offset: 1px;
}

.tier-divider .tier-delete-button {
   margin: 0 0 0 auto;
   border: 1px solid #c85757;
   border-radius: 4px;
   background: #fff1f1;
   color: #8e1f1f;
   font-weight: 700;
   line-height: 1;
   font-size: 12px;
   padding: 5px 8px;
   cursor: pointer;
}

.tier-divider .tier-delete-button:hover {
   background: #ffdcdc;
}

.tier-divider.dragging-tier {
   opacity: 0.6;
}

.ranking-item::marker {
   display: none;
}

.rank-number {
   font-weight: bold;
   font-size: 16px;
   color: #2196F3;
   min-width: 26px;
   text-align: center;
   margin-right: 10px;
   background-color: #e3f2fd;
   padding: 3px 8px;
   border-radius: 4px;
}

.player-info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
   margin-left: 15px;
   min-width: 0;
   gap: 1px;
}

.player-name-row {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   max-width: 100%;
}

.player-ppg-inline {
   font-size: 11px;
   font-weight: 700;
   color: #5a6878;
   white-space: nowrap;
   padding: 1px 6px;
   border-radius: 6px;
   background: rgba(0, 0, 0, 0.05);
   flex-shrink: 0;
}

.player-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #dde3e8;
   color: #2f3b45;
   font-weight: 700;
   font-size: 13px;
}

.player-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.player-avatar.no-image {
   border: 1px solid #cfd8dc;
}

.player-name {
   font-weight: 500;
   font-size: 14px;
   color: #333;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.player-team {
   font-size: 12px;
   color: #666;
   margin-top: 2px;
}

.player-stats {
   font-size: 12px;
   color: #455a64;
   margin-top: 2px;
}

.player-meta-badges {
   display: flex;
   gap: 6px;
   margin-top: 3px;
   flex-wrap: wrap;
}

.player-meta-badge {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.03em;
   padding: 2px 7px;
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.06);
   color: #5a6878;
   white-space: nowrap;
}

.overall-rank {
   background-color: #f1f3f5;
   color: #424242;
   padding: 4px 10px;
   border-radius: 14px;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   margin-left: 8px;
}

.category-tag {
   background-color: #2196F3;
   color: white;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   margin-left: 10px;
}

.ranking-item[data-category="QB"] .category-tag {
   background-color: #4caf50;
}

.ranking-item[data-category="RB"] .category-tag,
.ranking-item[data-category="HB"] .category-tag {
   background-color: #2196F3;
}

.ranking-item[data-category="WR"] .category-tag {
   background-color: #c7001f;
}

.ranking-item[data-category="TE"] .category-tag {
   background-color: #9c27b0;
}

.ranking-item[data-category="N/A"] .category-tag {
   background-color: #607d8b;
}

.ranking-item:hover {
   background: #f0f0f0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ranking-item.drafted-self:hover {
   background: #e3f2dc;
}

.ranking-item.drafted-other:hover {
   background: #ececec;
}

.ranking-item.dragging {
   opacity: 0.5;
   background: #e3f2fd;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
   .container h1 {
      font-size: 28px;
   }

   .ranking-item {
      padding: 12px;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-start;
   }

   .player-info {
      margin-left: 8px;
      min-width: 140px;
   }

   .player-avatar {
      width: 38px;
      height: 38px;
   }

   .tier-toolbar {
      justify-content: center;
   }

   .search-toolbar {
      justify-content: stretch;
   }

   .search-toolbar label {
      width: 100%;
      text-align: left;
   }

   #playerSearchInput,
   #clearSearchButton {
      width: 100%;
   }

   #toggleDraftModeButton {
      width: 100%;
   }

   #toggleShowDraftedButton {
      width: 100%;
   }

   .search-status {
      text-align: left;
   }

   .draft-toolbar {
      flex-wrap: wrap;
      align-items: stretch;
   }

   .draft-summary,
   #clearDraftMarksButton {
      width: 100%;
   }

   #clearDraftMarksButton {
      min-height: 36px;
   }

   .tier-toolbar button {
      width: 100%;
   }

   .ranker-layout {
      grid-template-columns: 1fr;
   }

   .my-team-panel {
      position: static;
   }

   .tier-divider {
      gap: 6px;
   }

   .tier-divider .tier-label-input {
      font-size: 12px;
   }

   .draft-actions {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
   }
}

/* Professional red-gold-white visual refresh */
.container {
   text-align: left;
   max-width: none;
   width: 100%;
   margin: 0 auto;
   padding: 0 2px 16px;
}

.container h1 {
   margin: 0;
   color: #fffdf8;
   background:
      linear-gradient(135deg, rgba(142, 24, 34, 0.98) 0%, rgba(95, 15, 21, 0.96) 62%),
      radial-gradient(circle at 85% 18%, rgba(219, 172, 57, 0.22) 0%, rgba(219, 172, 57, 0) 42%);
   border: 1px solid #cfaa4f;
   border-radius: 20px;
   padding: 16px 18px;
   font-size: clamp(30px, 4vw, 44px);
   letter-spacing: 0.01em;
   line-height: 1.05;
   box-shadow: 0 14px 28px rgba(72, 9, 13, 0.24);
}

.subtitle {
   margin: 10px 2px 14px;
   color: #6d3a40;
   font-size: 15px;
   font-weight: 600;
}

.toolbar,
.search-toolbar,
.draft-toolbar,
.tier-toolbar {
   border: 1px solid #e6ccb0;
   border-radius: 14px;
   background: linear-gradient(145deg, #ffffff 0%, #fff9ee 100%);
   padding: 10px;
   box-shadow: 0 8px 18px rgba(95, 15, 21, 0.08);
}

.toolbar,
.search-toolbar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 10px;
}

.draft-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 10px;
   border-color: #dcb373;
   background: linear-gradient(145deg, #fffaf1 0%, #fef4df 100%);
}

.tier-toolbar {
   margin: 10px 0;
}

.ranker-publisher-card {
   margin: 12px 0 8px;
   padding: 14px;
   border: 1px solid #e1c28b;
   background: linear-gradient(165deg, #fffdf7 0%, #fff3dd 100%);
   box-shadow: 0 12px 24px rgba(95, 15, 21, 0.12);
}

.ranker-publisher-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
}

.ranker-publisher-head h2 {
   margin: 0;
   color: #7f131d;
   font-size: 20px;
}

.ranker-publisher-actions {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

#rankerPublisherCollapseButton {
   min-width: 90px;
}

.ranker-publisher-card.is-collapsed {
   padding-bottom: 10px;
}

.ranker-publisher-card.is-collapsed .ranker-publisher-body {
   display: none;
}

.ranker-publisher-card.is-collapsed #rankerSaveDraftButton,
.ranker-publisher-card.is-collapsed #rankerPublishButton {
   display: none;
}

.ranker-publisher-info {
   margin: 8px 0 12px;
   color: #6f4146;
   font-size: 13px;
   font-weight: 600;
}

.ranker-publisher-grid {
   display: grid;
   grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
   gap: 9px 12px;
   align-items: start;
}

.ranker-publisher-grid label {
   color: #582328;
   font-size: 13px;
   font-weight: 700;
   padding-top: 8px;
}

.ranker-publisher-grid input,
.ranker-publisher-grid select,
.ranker-publisher-grid textarea {
   border: 1px solid #d8b984;
   border-radius: 10px;
   background: #fffdf8;
   color: #3f272b;
   padding: 9px 11px;
   font-size: 14px;
   min-height: 40px;
}

.ranker-publisher-grid textarea {
   min-height: 90px;
   resize: vertical;
}

.ranker-publisher-grid input:focus,
.ranker-publisher-grid select:focus,
.ranker-publisher-grid textarea:focus {
   outline: 2px solid #dbac39;
   outline-offset: 1px;
   border-color: #b9881a;
}

#rankerPublisherStatus {
   margin-top: 10px;
}

.toolbar label,
.search-toolbar label {
   font-weight: 700;
   color: #5a2127;
}

#positionFilter,
#playerSearchInput {
   border: 1px solid #d9b37b;
   border-radius: 10px;
   padding: 9px 11px;
   font-size: 14px;
   background: #fffdf8;
   min-height: 40px;
}

#playerSearchInput {
   min-width: 260px;
}

#positionFilter:focus,
#playerSearchInput:focus,
.tier-divider .tier-label-input:focus {
   outline: 2px solid #dbac39;
   outline-offset: 1px;
   border-color: #b9881a;
}

:root[data-theme="dark"] #positionFilter:focus,
:root[data-theme="dark"] #playerSearchInput:focus {
   outline: none;
   border-color: #bf9a4a;
   box-shadow: 0 0 0 2px rgba(191, 154, 74, 0.35), 0 0 12px rgba(191, 154, 74, 0.15);
}

:root:not([data-theme="dark"]) #positionFilter:focus,
:root:not([data-theme="dark"]) #playerSearchInput:focus {
   outline: none;
   border-color: #c7001f;
   box-shadow: 0 0 0 2px rgba(199, 0, 31, 0.2), 0 0 10px rgba(199, 0, 31, 0.08);
}

#toggleShowDraftedButton[hidden],
#clearSearchButton[hidden],
#draftToolbar[hidden],
#myTeamPanel[hidden] {
   display: none !important;
}

#toggleDraftModeButton,
#toggleShowDraftedButton,
#clearSearchButton,
#addTierButton,
#clearDraftMarksButton,
#exportRankingsCsvButton,
.tier-toolbar button,
.draft-action-button,
.tier-divider .tier-delete-button,
.tier-divider .tier-label-input {
   transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#toggleDraftModeButton,
#toggleShowDraftedButton,
#clearSearchButton,
#addTierButton,
#clearDraftMarksButton,
#exportRankingsCsvButton,
.tier-toolbar button {
   border-radius: 999px;
   padding: 8px 14px;
   margin: 0;
   font-weight: 700;
   cursor: pointer;
   border: 1px solid #b9881a;
   background: linear-gradient(135deg, #f4dfad 0%, #ddb55c 100%);
   color: #4a171c;
}

#toggleDraftModeButton:hover,
#toggleShowDraftedButton:hover,
#clearSearchButton:hover,
#addTierButton:hover,
#clearDraftMarksButton:hover,
#exportRankingsCsvButton:hover,
.tier-toolbar button:hover {
   transform: none;
   box-shadow: 0 10px 18px rgba(72, 9, 13, 0.2);
}

#toggleDraftModeButton.active,
#toggleShowDraftedButton.active {
   border-color: #7f131d;
   background: linear-gradient(135deg, #bf1f2b 0%, #8e1822 100%);
   color: #fffdf8;
}

.search-status {
   flex-basis: 100%;
   min-height: 18px;
   font-size: 12px;
   color: #7f5a2b;
   font-weight: 600;
}

.draft-summary {
   text-align: left;
   font-size: 13px;
   color: #5e2d12;
   font-weight: 700;
}

.view-hint {
   min-height: 20px;
   margin: 2px 2px 0;
   font-size: 13px;
   color: #663136;
   font-weight: 600;
}

.ranking-list {
   list-style: none;
   list-style-type: none;
   padding: 8px;
   margin: 12px 0 0;
   background: linear-gradient(180deg, rgba(255, 253, 248, 0.94) 0%, rgba(255, 247, 232, 0.95) 100%);
   border-radius: 16px;
   border: 1px solid #e6ccb0;
   box-shadow: 0 16px 30px rgba(95, 15, 21, 0.1);
   counter-reset: list-counter;
   touch-action: pan-y;
}

.ranker-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   column-gap: 0;
   align-items: start;
   width: 100%;
}

.ranker-layout.draft-mode-active {
   grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
   column-gap: 24px;
}

.board-panel {
   min-width: 0;
   width: 100%;
}

.my-team-panel {
   border: 1px solid #dcb373;
   border-radius: 16px;
   background: linear-gradient(165deg, #fffcf6 0%, #fff0d4 100%);
   padding: 14px;
   text-align: left;
   box-shadow: 0 14px 28px rgba(95, 15, 21, 0.14);
   position: sticky;
   top: 12px;
   width: 100%;
}

.my-team-panel h2 {
   margin: 0;
   font-size: 22px;
   color: #7f131d;
}

.my-team-summary {
   margin-top: 9px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-size: 13px;
   color: #6b3f16;
   font-weight: 700;
}

.my-team-position-counts {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
}

.my-team-count-chip {
   border-radius: 999px;
   padding: 4px 8px;
   background: #f2db9f;
   color: #562126;
   font-size: 12px;
   font-weight: 800;
}

.my-team-list {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.my-team-list-item {
   border: 1px solid #e1c596;
   border-radius: 12px;
   background: #fffcf5;
   padding: 9px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}

.my-team-player-main {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}

.my-team-player-name {
   font-size: 14px;
   font-weight: 700;
   color: #4b171c;
}

.my-team-player-meta {
   font-size: 12px;
   color: #7c5d62;
}

.my-team-position-tag {
   border-radius: 999px;
   padding: 3px 8px;
   background: #7f131d;
   color: #fff9ee;
   font-size: 11px;
   font-weight: 800;
   white-space: nowrap;
}

.my-team-empty {
   border: 1px dashed #d8ba8d;
   border-radius: 10px;
   background: #fff9ed;
   padding: 10px;
   font-size: 12px;
   color: #7c5d62;
}

.ranking-item {
   padding: 8px 12px;
   background: linear-gradient(145deg, #ffffff 0%, #fff9ef 100%);
   border: 1px solid #e7cfb2;
   margin: 3px 4px;
   border-radius: 12px;
   cursor: move;
   transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
   user-select: none;
   font-size: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   gap: 8px;
   min-width: 0;
   touch-action: pan-y;
}

.player-drag-handle {
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 10px;
   border: 1px solid #d7b985;
   background: linear-gradient(135deg, #fffaf1 0%, #f5e5c1 100%);
   color: #6f3a40;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 0;
   line-height: 1;
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
}

.player-drag-handle::before {
   content: "\2261";
   font-size: 18px;
   font-weight: 800;
   letter-spacing: 0.05em;
}

.player-drag-handle:hover {
   background: linear-gradient(135deg, #fef5e2 0%, #f0d59a 100%);
}

.ranking-item.dragging .player-drag-handle {
   cursor: grabbing;
}

.ranking-item.drafted-self {
   background: linear-gradient(145deg, #fff6df 0%, #f5e3b9 100%);
   border-color: #dcba74;
}

.ranking-item.drafted-other {
   background: linear-gradient(145deg, #f6ecee 0%, #efdde1 100%);
   border-color: #d8b1b8;
}

.ranking-item.is-drafted .player-name {
   text-decoration: line-through;
   color: #78555a;
}

.ranking-item .draft-status-pill {
   font-size: 11px;
   font-weight: 700;
   border-radius: 999px;
   padding: 4px 9px;
   white-space: nowrap;
   margin-left: 6px;
}

.ranking-item .draft-status-pill.self {
   background: #edd094;
   color: #4d1c22;
}

.ranking-item .draft-status-pill.other {
   background: #e4ced1;
   color: #612f35;
}

.draft-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 5px;
   margin-left: auto;
   flex-shrink: 0;
}

.draft-action-button {
   border: 1px solid #d7b985;
   border-radius: 999px;
   background: #fffaf1;
   color: #593337;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 8px;
   margin: 0;
   cursor: pointer;
}

.draft-action-button:hover {
   transform: none;
   background: #f8e8c5;
}

.draft-action-button.active-self {
   border-color: #ba8f2b;
   background: linear-gradient(135deg, #f0cc7e 0%, #cf9929 100%);
   color: #4a171c;
}

.draft-action-button.active-other {
   border-color: #8e1822;
   background: linear-gradient(135deg, #bf1f2b 0%, #8e1822 100%);
   color: #fffdf8;
}

.draft-action-button.clear {
   border-color: #b16a70;
   color: #7d252e;
   background: #fff4f4;
}

.draft-action-button.clear:hover {
   background: #ffdfe1;
}

.tier-divider {
   margin: 8px 5px 4px;
   padding: 8px 10px;
   border-radius: 10px;
   list-style: none;
   background: linear-gradient(90deg, #fff5db 0%, #fff0d2 100%);
   border: 1px solid #dcba74;
   color: #5c2f33;
   font-weight: 700;
   text-align: left;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: default;
   position: relative;
}

.ranking-item.drop-target-before::before,
.tier-divider.drop-target-before::before {
   content: '';
   position: absolute;
   left: 10px;
   right: 10px;
   top: -6px;
   height: 3px;
   border-radius: 999px;
   background: #dbac39;
   pointer-events: none;
}

.ranking-item.search-match {
   border-color: #d6ab54;
   background: linear-gradient(145deg, #fffef8 0%, #fff8e8 100%);
}

.ranking-item.search-nonmatch {
   opacity: 0.45;
}

.ranking-item.search-active-match {
   opacity: 1;
   outline: 2px solid #bf1f2b;
   outline-offset: 1px;
   box-shadow: 0 0 0 2px rgba(191, 31, 43, 0.2), 0 12px 22px rgba(95, 15, 21, 0.2);
}

.ranking-list.drop-target-end::after {
   content: '';
   display: block;
   margin: 8px 14px 10px;
   height: 3px;
   border-radius: 999px;
   background: #dbac39;
}

.ranking-item.just-dropped,
.tier-divider.just-dropped {
   animation: none;
}

@keyframes drop-snap {
   0% {
      transform: scale(0.985) translateY(2px);
   }

   60% {
      transform: scale(1.01) translateY(-1px);
   }

   100% {
      transform: scale(1) translateY(0);
   }
}

@keyframes drop-highlight {
   0% {
      box-shadow: 0 0 0 2px rgba(191, 31, 43, 0.35), 0 6px 14px rgba(191, 31, 43, 0.18);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(191, 31, 43, 0), 0 0 0 rgba(191, 31, 43, 0);
   }
}

.tier-divider .tier-drag-handle {
   font-size: 14px;
   letter-spacing: 1px;
   color: #865254;
   cursor: grab;
   user-select: none;
   padding: 2px 6px;
   border-radius: 4px;
}

.tier-divider .tier-drag-handle:hover {
   background: #f4dcae;
}

.tier-divider .tier-label-input {
   border: 1px solid #d2b27b;
   border-radius: 8px;
   background: #fffcf5;
   color: #54282d;
   font-size: 13px;
   font-weight: 600;
   padding: 5px 7px;
   flex: 1 1 auto;
   min-width: 0;
}

.tier-divider .tier-delete-button {
   margin: 0 0 0 auto;
   border: 1px solid #b05761;
   border-radius: 999px;
   background: #fff0f2;
   color: #7a1e2b;
   font-weight: 700;
   line-height: 1;
   font-size: 12px;
   padding: 5px 10px;
   cursor: pointer;
}

.tier-divider .tier-delete-button:hover {
   transform: none;
   background: #ffdde2;
}

.tier-divider.dragging-tier {
   opacity: 0.6;
}

.ranking-item::marker {
   display: none;
}

.rank-number {
   font-weight: 800;
   font-size: 14px;
   color: #4b171c;
   min-width: 28px;
   text-align: center;
   margin-right: 6px;
   background: linear-gradient(135deg, #f6dfac 0%, #e0b354 100%);
   padding: 3px 7px;
   border-radius: 10px;
   border: 1px solid #cea048;
}

.player-info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
   margin-left: 10px;
   min-width: 0;
   gap: 1px;
}

.player-name-row {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   max-width: 100%;
}

.player-ppg-inline {
   font-size: 11px;
   font-weight: 700;
   color: #7a520f;
   white-space: nowrap;
   padding: 1px 6px;
   border-radius: 6px;
   background: rgba(191, 154, 74, 0.12);
   flex-shrink: 0;
}

.player-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f3dcc8;
   color: #5f2c31;
   font-weight: 700;
   font-size: 13px;
   border: 1px solid #d8b68d;
}

.player-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.player-avatar.no-image {
   border: 1px solid #d2b99b;
}

.player-name {
   font-weight: 700;
   font-size: 14px;
   color: #4d1c22;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.player-team {
   font-size: 12px;
   color: #7c5f64;
   margin-top: 2px;
}

.player-stats {
   font-size: 12px;
   color: #7a520f;
   margin-top: 2px;
   font-weight: 600;
}

.overall-rank {
   background-color: #f6ebd4;
   color: #6e3f13;
   padding: 4px 10px;
   border-radius: 999px;
   border: 1px solid #dfbe80;
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
   margin-left: 8px;
}

.category-tag {
   color: #fffaf1;
   padding: 4px 12px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
   margin-left: 10px;
   border: 1px solid transparent;
}

.ranking-item[data-category="QB"] .category-tag {
   background-color: #4caf50;
   border-color: #3d8e41;
}

.ranking-item[data-category="RB"] .category-tag,
.ranking-item[data-category="HB"] .category-tag {
   background-color: #2196f3;
   border-color: #1b7fd0;
}

.ranking-item[data-category="WR"] .category-tag {
   background-color: #c7001f;
   border-color: #9f0018;
   color: #ffffff;
}

.ranking-item[data-category="TE"] .category-tag {
   background-color: #9c27b0;
   border-color: #7f1f90;
}

.ranking-item[data-category="N/A"] .category-tag {
   background-color: #607d8b;
   border-color: #4d6672;
}

.ranking-item:hover {
   background: linear-gradient(145deg, #fffef8 0%, #fff4de 100%);
   border-color: #d6a64e;
   transform: none;
   box-shadow: 0 12px 20px rgba(95, 15, 21, 0.15);
}

.ranking-item.drafted-self:hover {
   background: linear-gradient(145deg, #fff2cd 0%, #f5d892 100%);
}

.ranking-item.drafted-other:hover {
   background: linear-gradient(145deg, #f6e4e7 0%, #ebc8ce 100%);
}

.ranking-item.dragging {
   opacity: 0.86;
   background: #ffe5b1;
   box-shadow: 0 12px 22px rgba(95, 15, 21, 0.34);
}

@media (max-width: 1100px) {
   .ranker-layout.draft-mode-active {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 12px;
   }

   .my-team-panel {
      position: static;
   }
}

@media (max-width: 700px) {
   .container h1 {
      font-size: clamp(28px, 8vw, 36px);
      padding: 14px;
   }

   .ranking-item {
      padding: 12px;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-start;
   }

   .player-info {
      margin-left: 8px;
      min-width: 140px;
   }

   .player-avatar {
      width: 38px;
      height: 38px;
   }

    .player-drag-handle {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 12px;
   }

   .toolbar,
   .search-toolbar,
   .draft-toolbar,
   .tier-toolbar,
   .ranker-publisher-card {
      padding: 9px;
   }

   .ranker-publisher-grid {
      grid-template-columns: 1fr;
      gap: 7px;
   }

   .ranker-publisher-grid label {
      padding-top: 0;
   }

   .ranker-publisher-actions {
      width: 100%;
   }

   .ranker-publisher-actions button {
      width: 100%;
   }

   .search-toolbar {
      justify-content: stretch;
   }

   .search-toolbar label {
      width: 100%;
      text-align: left;
   }

   #playerSearchInput,
   #clearSearchButton,
   #toggleDraftModeButton,
   #toggleShowDraftedButton,
   #clearDraftMarksButton,
   .tier-toolbar button {
      width: 100%;
   }

   .draft-toolbar {
      flex-wrap: wrap;
      align-items: stretch;
   }

   .draft-summary,
   #clearDraftMarksButton {
      width: 100%;
   }

   .tier-divider {
      gap: 6px;
   }

   .tier-divider .tier-label-input {
      font-size: 12px;
   }

   .draft-actions {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
   }
}

/* Premium pages should never look draggable. Keep this override at file end so it wins cascade order. */
.premium-tier-divider .tier-drag-handle {
   pointer-events: none;
   cursor: default !important;
}

.premium-tier-divider .tier-drag-handle:hover,
.premium-tier-divider .tier-drag-handle:focus,
.premium-tier-divider .tier-drag-handle:active {
   cursor: default !important;
   background: transparent !important;
}

.draft-summary-dialog {
   width: min(680px, calc(100vw - 24px));
   border: 1px solid #dcb373;
   border-radius: 14px;
   padding: 0;
   background: #fffdf8;
   box-shadow: 0 22px 40px rgba(72, 9, 13, 0.28);
}

.draft-summary-dialog::backdrop {
   background: rgba(27, 12, 14, 0.56);
}

.draft-summary-dialog-content {
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.draft-summary-dialog-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
}

.draft-summary-dialog-head h2 {
   margin: 0;
   color: #7f131d;
   font-size: 24px;
}

.draft-dialog-button {
   border-radius: 12px;
   border: 1px solid #caa15f;
   background: linear-gradient(135deg, #fff5e1 0%, #f3dfb9 100%);
   color: #5f2f35;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.01em;
   padding: 8px 14px;
   cursor: pointer;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.draft-dialog-button:hover {
   transform: none;
   border-color: #b98843;
   box-shadow: 0 8px 16px rgba(110, 45, 53, 0.18);
}

.draft-dialog-button:focus-visible {
   outline: 3px solid rgba(150, 28, 39, 0.25);
   outline-offset: 2px;
}

.draft-dialog-button-confirm {
   border-color: #620f18;
   background: linear-gradient(135deg, #a8222e 0%, #7f131d 100%);
   color: #fff7e2;
}

.draft-dialog-button-confirm:hover {
   border-color: #4a0b12;
   box-shadow: 0 10px 18px rgba(86, 10, 17, 0.32);
}

.draft-dialog-close-button,
.draft-dialog-button-cancel {
   background: linear-gradient(135deg, #fff9ec 0%, #efe0c2 100%);
   color: #6b3f46;
}

.draft-exit-confirm-dialog {
   width: min(520px, calc(100vw - 24px));
}

.draft-exit-confirm-dialog h2 {
   margin: 0;
   color: #7f131d;
   font-size: 24px;
}

.draft-exit-confirm-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 10px;
}

.draft-summary-dialog-text {
   margin: 0;
   color: #6c484e;
   font-size: 14px;
   font-weight: 600;
}

.draft-summary-team-summary {
   margin-top: 0;
}

@media (max-width: 700px) {
   .draft-summary-dialog-content {
      padding: 10px;
   }

   .draft-summary-dialog-head h2 {
      font-size: 20px;
   }

   .draft-summary-dialog-head button {
      width: 100%;
   }

   .draft-exit-confirm-actions .draft-dialog-button {
      width: 100%;
   }
}

.insight-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
   margin: 8px 0 2px;
}

.freshness-badges {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
}

.freshness-badge {
   border: 1px solid #d6dce4;
   border-radius: 999px;
   padding: 4px 10px;
   background: #f9fcff;
   color: #3b5368;
   font-size: 12px;
   font-weight: 700;
}

.freshness-badge.is-warning {
   border-color: #cc7a3c;
   background: #fff5ea;
   color: #8a461a;
}

.rank-column {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   min-width: 50px;
}

.rank-column .rank-number {
   margin-right: 0;
}

.rank-move-chip {
   min-width: 34px;
   text-align: center;
   border-radius: 999px;
   padding: 2px 7px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.01em;
}

.rank-move-chip.up {
   background: #e6f6e3;
   color: #256c1f;
   border: 1px solid #99ca93;
}

.rank-move-chip.down {
   background: #fdeaea;
   color: #8b2323;
   border: 1px solid #e3aaaa;
}

.rank-move-chip.new {
   background: #e6f1ff;
   color: #254f83;
   border: 1px solid #a9c5eb;
}

.player-insight-button {
   border: 1px solid #b8bec6;
   border-radius: 999px;
   background: #ffffff;
   color: #2f4457;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 9px;
   cursor: pointer;
   margin-left: 6px;
}

.player-insight-button:hover {
   background: #eef4fa;
   border-color: #96a8bb;
}

.player-insight-dialog {
   width: min(620px, calc(100vw - 24px));
   border: 1px solid #d9b882;
   border-radius: 14px;
   padding: 0;
   background: #fffdf8;
   box-shadow: 0 22px 40px rgba(72, 9, 13, 0.22);
}

.player-insight-dialog::backdrop {
   background: rgba(27, 12, 14, 0.56);
}

.player-insight-dialog-content {
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.player-insight-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
}

.player-insight-head h2 {
   margin: 0;
   color: #7f131d;
   font-size: 22px;
}

.player-insight-summary {
   margin: 0;
   color: #61434a;
   font-size: 14px;
   font-weight: 600;
}

.player-insight-reasons {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.player-insight-reasons li {
   border: 1px solid #ecd6b2;
   border-radius: 8px;
   background: #fffaf0;
   padding: 8px 10px;
   color: #6d4b4f;
   font-size: 13px;
   font-weight: 600;
}

@media (max-width: 700px) {
   .insight-toolbar {
      align-items: stretch;
   }

   #exportRankingsCsvButton {
      width: 100%;
   }

   .player-insight-head h2 {
      font-size: 20px;
   }

   .player-insight-head button {
      width: 100%;
   }
}

:root[data-theme="dark"] .container h1 {
   border-color: #bf9a4a;
   background:
      linear-gradient(140deg, #000000 0%, #0b0b0b 68%),
      radial-gradient(circle at 88% 16%, rgba(199, 0, 31, 0.22) 0%, rgba(199, 0, 31, 0) 40%);
   color: #ffffff;
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.66);
}

:root[data-theme="dark"] .subtitle,
:root[data-theme="dark"] .toolbar label,
:root[data-theme="dark"] .search-toolbar label,
:root[data-theme="dark"] .view-hint,
:root[data-theme="dark"] .sign-in-hint,
:root[data-theme="dark"] .draft-summary,
:root[data-theme="dark"] .search-status {
   color: #ffffff;
}

:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] .search-toolbar,
:root[data-theme="dark"] .draft-toolbar,
:root[data-theme="dark"] .tier-toolbar,
:root[data-theme="dark"] .ranker-publisher-card,
:root[data-theme="dark"] .my-team-panel,
:root[data-theme="dark"] .ranking-list,
:root[data-theme="dark"] .draft-summary-dialog,
:root[data-theme="dark"] .player-insight-dialog {
   border-color: #bf9a4a;
   background: linear-gradient(155deg, #000000 0%, #080808 100%);
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.66);
}

:root[data-theme="dark"] .ranking-item,
:root[data-theme="dark"] .tier-divider,
:root[data-theme="dark"] .my-team-list-item,
:root[data-theme="dark"] .player-insight-reasons li,
:root[data-theme="dark"] .freshness-badge {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .player-name,
:root[data-theme="dark"] .my-team-player-name,
:root[data-theme="dark"] .ranker-publisher-head h2,
:root[data-theme="dark"] .player-insight-head h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .player-team,
:root[data-theme="dark"] .player-stats,
:root[data-theme="dark"] .my-team-player-meta,
:root[data-theme="dark"] .player-insight-summary,
:root[data-theme="dark"] .ranker-publisher-info,
:root[data-theme="dark"] #rankerPublisherStatus,
:root[data-theme="dark"] .draft-summary-dialog-text {
   color: #ffffff;
}

:root[data-theme="dark"] .player-meta-badge {
   background: rgba(191, 154, 74, 0.15);
   color: #bf9a4a;
}

:root[data-theme="dark"] .player-ppg-inline {
   background: rgba(191, 154, 74, 0.15);
   color: #bf9a4a;
}

:root[data-theme="dark"] #positionFilter,
:root[data-theme="dark"] #playerSearchInput,
:root[data-theme="dark"] .ranker-publisher-grid input,
:root[data-theme="dark"] .ranker-publisher-grid select,
:root[data-theme="dark"] .ranker-publisher-grid textarea,
:root[data-theme="dark"] .tier-divider .tier-label-input {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .player-drag-handle,
:root[data-theme="dark"] .draft-action-button,
:root[data-theme="dark"] .player-insight-button,
:root[data-theme="dark"] #toggleDraftModeButton,
:root[data-theme="dark"] #toggleShowDraftedButton,
:root[data-theme="dark"] #clearSearchButton,
:root[data-theme="dark"] #addTierButton,
:root[data-theme="dark"] #clearDraftMarksButton,
:root[data-theme="dark"] #exportRankingsCsvButton,
:root[data-theme="dark"] .tier-toolbar button,
:root[data-theme="dark"] .draft-dialog-button {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .player-drag-handle:hover,
:root[data-theme="dark"] .draft-action-button:hover,
:root[data-theme="dark"] .player-insight-button:hover,
:root[data-theme="dark"] #toggleDraftModeButton:hover,
:root[data-theme="dark"] #toggleShowDraftedButton:hover,
:root[data-theme="dark"] #clearSearchButton:hover,
:root[data-theme="dark"] #addTierButton:hover,
:root[data-theme="dark"] #clearDraftMarksButton:hover,
:root[data-theme="dark"] #exportRankingsCsvButton:hover,
:root[data-theme="dark"] .tier-toolbar button:hover,
:root[data-theme="dark"] .draft-dialog-button:hover {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] #toggleDraftModeButton.active,
:root[data-theme="dark"] #toggleShowDraftedButton.active,
:root[data-theme="dark"] .draft-action-button.active-self,
:root[data-theme="dark"] .draft-action-button.active-other,
:root[data-theme="dark"] .draft-dialog-button-confirm {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .rank-number,
:root[data-theme="dark"] .overall-rank,
:root[data-theme="dark"] .my-team-count-chip {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .ranking-item[data-category="QB"] .category-tag {
   border-color: #3d8e41;
   background: #4caf50;
   color: #000000;
}

:root[data-theme="dark"] .ranking-item[data-category="RB"] .category-tag,
:root[data-theme="dark"] .ranking-item[data-category="HB"] .category-tag {
   border-color: #1b7fd0;
   background: #2196f3;
   color: #000000;
}

:root[data-theme="dark"] .ranking-item[data-category="WR"] .category-tag {
   border-color: #9f0018;
   background: #c7001f;
   color: #ffffff;
}

:root[data-theme="dark"] .ranking-item[data-category="TE"] .category-tag {
   border-color: #7f1f90;
   background: #9c27b0;
   color: #ffffff;
}

:root[data-theme="dark"] .ranking-item[data-category="N/A"] .category-tag {
   border-color: #4d6672;
   background: #607d8b;
   color: #ffffff;
}

:root[data-theme="dark"] .my-team-position-tag[data-position="QB"] {
   border-color: #3d8e41;
   background: #4caf50;
   color: #000000;
}

:root[data-theme="dark"] .my-team-position-tag[data-position="RB"],
:root[data-theme="dark"] .my-team-position-tag[data-position="HB"] {
   border-color: #1b7fd0;
   background: #2196f3;
   color: #000000;
}

:root[data-theme="dark"] .my-team-position-tag[data-position="WR"] {
   border-color: #9f0018;
   background: #c7001f;
   color: #ffffff;
}

:root[data-theme="dark"] .my-team-position-tag[data-position="TE"] {
   border-color: #7f1f90;
   background: #9c27b0;
   color: #ffffff;
}

:root[data-theme="dark"] .my-team-position-tag[data-position="N/A"] {
   border-color: #4d6672;
   background: #607d8b;
   color: #ffffff;
}

:root[data-theme="dark"] .draft-action-button.clear {
   border-color: #c7001f;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .ranking-item.search-match {
   border-color: #bf9a4a;
   background: #060606;
}

:root[data-theme="dark"] .ranking-item.search-active-match {
   outline-color: #bf9a4a;
   box-shadow: 0 0 0 2px rgba(191, 154, 74, 0.34), 0 12px 22px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .ranking-item.search-nonmatch {
   opacity: 0.66;
}

:root[data-theme="dark"] .ranking-item:hover {
   background: #090909;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .ranking-item.dragging {
   background: #111111;
}

:root[data-theme="dark"] .ranker-publisher-card,
:root[data-theme="dark"] .ranker-publisher-head h2,
:root[data-theme="dark"] .ranker-publisher-info,
:root[data-theme="dark"] .ranker-publisher-grid label,
:root[data-theme="dark"] #rankerPublisherStatus {
   color: #ffffff;
}

/* Keep drag interactions stable: no lift animation or drop snap during reorder. */
.ranking-list.drag-active .ranking-item,
.ranking-list.drag-active .tier-divider {
   transition: none !important;
   animation: none !important;
}

.ranking-item.just-dropped,
.tier-divider.just-dropped {
   animation: none !important;
}

/* Light mode palette lock: #C7001F #000000 #FFFFFF #BF9A4A */
:root:not([data-theme="dark"]) .container h1 {
   background: #c7001f;
   border-color: #bf9a4a;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .subtitle,
:root:not([data-theme="dark"]) .toolbar label,
:root:not([data-theme="dark"]) .search-toolbar label,
:root:not([data-theme="dark"]) .view-hint,
:root:not([data-theme="dark"]) .sign-in-hint,
:root:not([data-theme="dark"]) .draft-summary,
:root:not([data-theme="dark"]) .search-status,
:root:not([data-theme="dark"]) .ranker-publisher-info,
:root:not([data-theme="dark"]) #rankerPublisherStatus,
:root:not([data-theme="dark"]) .ranker-publisher-grid label,
:root:not([data-theme="dark"]) .player-team,
:root:not([data-theme="dark"]) .player-stats,
:root:not([data-theme="dark"]) .my-team-player-meta,
:root:not([data-theme="dark"]) .player-insight-summary,
:root:not([data-theme="dark"]) .draft-summary-dialog-text {
   color: #000000;
}

:root:not([data-theme="dark"]) .player-meta-badge {
   background: rgba(199, 0, 31, 0.08);
   color: #8a1222;
}

:root:not([data-theme="dark"]) .toolbar,
:root:not([data-theme="dark"]) .search-toolbar,
:root:not([data-theme="dark"]) .draft-toolbar,
:root:not([data-theme="dark"]) .tier-toolbar,
:root:not([data-theme="dark"]) .ranker-publisher-card,
:root:not([data-theme="dark"]) .my-team-panel,
:root:not([data-theme="dark"]) .ranking-list,
:root:not([data-theme="dark"]) .draft-summary-dialog,
:root:not([data-theme="dark"]) .player-insight-dialog,
:root:not([data-theme="dark"]) .ranking-item,
:root:not([data-theme="dark"]) .tier-divider,
:root:not([data-theme="dark"]) .my-team-list-item,
:root:not([data-theme="dark"]) .player-insight-reasons li,
:root:not([data-theme="dark"]) .freshness-badge {
   border-color: #bf9a4a;
   background: #ffffff;
   color: #000000;
}

:root:not([data-theme="dark"]) .player-name,
:root:not([data-theme="dark"]) .my-team-player-name,
:root:not([data-theme="dark"]) .ranker-publisher-head h2,
:root:not([data-theme="dark"]) .player-insight-head h2 {
   color: #000000;
}

:root:not([data-theme="dark"]) #positionFilter,
:root:not([data-theme="dark"]) #playerSearchInput,
:root:not([data-theme="dark"]) .ranker-publisher-grid input,
:root:not([data-theme="dark"]) .ranker-publisher-grid select,
:root:not([data-theme="dark"]) .ranker-publisher-grid textarea,
:root:not([data-theme="dark"]) .tier-divider .tier-label-input {
   border-color: #bf9a4a;
   background: #ffffff;
   color: #000000;
}

:root:not([data-theme="dark"]) .player-drag-handle,
:root:not([data-theme="dark"]) .draft-action-button,
:root:not([data-theme="dark"]) .player-insight-button,
:root:not([data-theme="dark"]) #toggleDraftModeButton,
:root:not([data-theme="dark"]) #toggleShowDraftedButton,
:root:not([data-theme="dark"]) #clearSearchButton,
:root:not([data-theme="dark"]) #addTierButton,
:root:not([data-theme="dark"]) #clearDraftMarksButton,
:root:not([data-theme="dark"]) #exportRankingsCsvButton,
:root:not([data-theme="dark"]) .tier-toolbar button,
:root:not([data-theme="dark"]) .draft-dialog-button {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root:not([data-theme="dark"]) .player-drag-handle:hover,
:root:not([data-theme="dark"]) .draft-action-button:hover,
:root:not([data-theme="dark"]) .player-insight-button:hover,
:root:not([data-theme="dark"]) #toggleDraftModeButton:hover,
:root:not([data-theme="dark"]) #toggleShowDraftedButton:hover,
:root:not([data-theme="dark"]) #clearSearchButton:hover,
:root:not([data-theme="dark"]) #addTierButton:hover,
:root:not([data-theme="dark"]) #clearDraftMarksButton:hover,
:root:not([data-theme="dark"]) #exportRankingsCsvButton:hover,
:root:not([data-theme="dark"]) .tier-toolbar button:hover,
:root:not([data-theme="dark"]) .draft-dialog-button:hover {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

:root:not([data-theme="dark"]) #toggleDraftModeButton.active,
:root:not([data-theme="dark"]) #toggleShowDraftedButton.active,
:root:not([data-theme="dark"]) .draft-action-button.active-self,
:root:not([data-theme="dark"]) .draft-action-button.active-other,
:root:not([data-theme="dark"]) .draft-dialog-button-confirm {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

/* ── Compare Players ── */
.compare-add-button {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid #bf9a4a;
   background: #ffffff;
   color: #bf9a4a;
   font-size: 16px;
   font-weight: 900;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   flex-shrink: 0;
   transition: all 0.15s ease;
   line-height: 1;
}

.compare-add-button:hover {
   background: #bf9a4a;
   color: #000000;
}

.compare-add-button.compare-active {
   background: #bf9a4a;
   color: #000000;
   border-color: #bf9a4a;
}

.compare-tray {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 8000;
   background: #fffdf8;
   border-top: 2px solid #bf9a4a;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
   padding: 10px 16px;
}

.compare-tray[hidden] {
   display: none;
}

.compare-tray-inner {
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.compare-tray-label {
   font-weight: 800;
   font-size: 13px;
   color: #000000;
}

.compare-tray-chips {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   flex: 1 1 auto;
}

.compare-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   border: 1px solid #bf9a4a;
   border-radius: 999px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 700;
   color: #000000;
   background: #fff5e3;
}

.compare-chip-remove {
   background: none;
   border: none;
   color: #c7001f;
   font-size: 14px;
   font-weight: 900;
   cursor: pointer;
   padding: 0 2px;
   line-height: 1;
}

.compare-dialog {
   border: 2px solid #bf9a4a;
   border-radius: 14px;
   padding: 0;
   width: min(820px, calc(100vw - 24px));
   max-height: 85vh;
   background: #fffdf8;
   box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
}

.compare-dialog::backdrop {
   background: rgba(27, 12, 14, 0.56);
}

.compare-dialog-content {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   overflow-y: auto;
   max-height: 84vh;
}

.compare-dialog-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.compare-dialog-head h2 {
   margin: 0;
   color: #c7001f;
   font-size: 20px;
}

.compare-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
}

.compare-table th {
   padding: 8px 10px;
   text-align: center;
   font-weight: 800;
   color: #c7001f;
   border-bottom: 2px solid #bf9a4a;
   white-space: nowrap;
}

.compare-table th:first-child {
   text-align: left;
}

.compare-table td {
   padding: 7px 10px;
   text-align: center;
   border-bottom: 1px solid #e3cfb2;
}

.compare-stat-label {
   text-align: left !important;
   font-weight: 700;
   color: #4f2d33;
   white-space: nowrap;
}

.compare-best {
   color: #177449;
   font-weight: 800;
}

:root[data-theme="dark"] .compare-add-button {
   border-color: #bf9a4a;
   background: #000000;
   color: #bf9a4a;
}

:root[data-theme="dark"] .compare-add-button:hover,
:root[data-theme="dark"] .compare-add-button.compare-active {
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .compare-tray {
   background: #000000;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .compare-tray-label {
   color: #ffffff;
}

:root[data-theme="dark"] .compare-chip {
   background: #111111;
   color: #ffffff;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .compare-chip-remove {
   color: #ff6b80;
}

:root[data-theme="dark"] .compare-dialog {
   background: #000000;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .compare-dialog::backdrop {
   background: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .compare-dialog-head h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .compare-table th {
   color: #bf9a4a;
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .compare-table td {
   border-color: #333333;
   color: #ffffff;
}

:root[data-theme="dark"] .compare-stat-label {
   color: #bf9a4a;
}

:root[data-theme="dark"] .compare-best {
   color: #4caf50;
}

@media (max-width: 600px) {
   .compare-table {
      font-size: 11px;
   }
   .compare-table th,
   .compare-table td {
      padding: 5px 6px;
   }
}

:root:not([data-theme="dark"]) .rank-number,
:root:not([data-theme="dark"]) .overall-rank,
:root:not([data-theme="dark"]) .my-team-count-chip {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root:not([data-theme="dark"]) .ranking-item[data-category="QB"] .category-tag {
   border-color: #3d8e41;
   background: #4caf50;
   color: #000000;
}

:root:not([data-theme="dark"]) .ranking-item[data-category="RB"] .category-tag,
:root:not([data-theme="dark"]) .ranking-item[data-category="HB"] .category-tag {
   border-color: #1b7fd0;
   background: #2196f3;
   color: #000000;
}

:root:not([data-theme="dark"]) .ranking-item[data-category="WR"] .category-tag {
   border-color: #9f0018;
   background: #c7001f;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .ranking-item[data-category="TE"] .category-tag {
   border-color: #7f1f90;
   background: #9c27b0;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .ranking-item[data-category="N/A"] .category-tag {
   border-color: #4d6672;
   background: #607d8b;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .my-team-position-tag[data-position="QB"] {
   border-color: #3d8e41;
   background: #4caf50;
   color: #000000;
}

:root:not([data-theme="dark"]) .my-team-position-tag[data-position="RB"],
:root:not([data-theme="dark"]) .my-team-position-tag[data-position="HB"] {
   border-color: #1b7fd0;
   background: #2196f3;
   color: #000000;
}

:root:not([data-theme="dark"]) .my-team-position-tag[data-position="WR"] {
   border-color: #9f0018;
   background: #c7001f;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .my-team-position-tag[data-position="TE"] {
   border-color: #7f1f90;
   background: #9c27b0;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .my-team-position-tag[data-position="N/A"] {
   border-color: #4d6672;
   background: #607d8b;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .draft-action-button.clear {
   border-color: #c7001f;
   background: #ffffff;
   color: #c7001f;
}

:root:not([data-theme="dark"]) .ranking-item.search-active-match {
   outline-color: #c7001f;
   box-shadow: 0 0 0 2px rgba(199, 0, 31, 0.25), 0 10px 18px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .ranking-item[data-category] .category-tag,
:root[data-theme="dark"] .my-team-position-tag[data-position],
:root:not([data-theme="dark"]) .ranking-item[data-category] .category-tag,
:root:not([data-theme="dark"]) .my-team-position-tag[data-position] {
   color: #000000;
}

.toolbar.compact-controls {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: nowrap;
   width: 100%;
   margin-bottom: 10px;
}

.toolbar.compact-controls label {
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
}

.toolbar.compact-controls #positionFilter {
   min-width: 170px;
   max-width: none;
   min-height: 34px;
   padding: 6px 9px;
   flex: 1 1 170px;
}

.toolbar.compact-controls #playerSearchInput {
   min-width: 300px;
   max-width: none;
   min-height: 34px;
   padding: 6px 9px;
   flex: 2 1 360px;
}

.toolbar.compact-controls #addTierButton,
.toolbar.compact-controls #toggleDraftModeButton,
.toolbar.compact-controls #toggleShowDraftedButton,
.toolbar.compact-controls #clearSearchButton {
   min-height: 34px;
   padding: 6px 10px;
   font-size: 12px;
   white-space: nowrap;
}

.toolbar.compact-controls #addTierButton,
.toolbar.compact-controls #toggleDraftModeButton {
   flex: 1 1 180px;
}

.toolbar.compact-controls .search-status {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.ranking-item .category-tag {
   margin-left: auto;
}

.player-name-button {
   appearance: none;
   border: 0;
   background: transparent;
   margin: 0;
   padding: 0;
   font: inherit;
   color: inherit;
   text-align: left;
   cursor: pointer;
   max-width: 100%;
}

.player-name-button:hover {
   text-decoration: underline;
}

.player-name-button:focus-visible {
   outline: 2px solid #bf9a4a;
   outline-offset: 2px;
   border-radius: 4px;
}

:root[data-theme="dark"] .toolbar.compact-controls #addTierButton {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .toolbar.compact-controls #addTierButton:hover {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root:not([data-theme="dark"]) .toolbar.compact-controls #addTierButton {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root:not([data-theme="dark"]) .toolbar.compact-controls #addTierButton:hover {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

@media (max-width: 980px) {
   .toolbar.compact-controls {
      flex-wrap: wrap;
   }

   .toolbar.compact-controls #positionFilter,
   .toolbar.compact-controls #playerSearchInput {
      max-width: 100%;
      flex: 1 1 220px;
   }

   .toolbar.compact-controls #addTierButton,
   .toolbar.compact-controls #toggleDraftModeButton {
      flex: 1 1 220px;
   }
}

/* Tier rows should clearly segment player groups and use a tighter 40-char label width. */
:root:not([data-theme="dark"]) .tier-divider,
:root[data-theme="dark"] .tier-divider {
   border-color: #7f0014;
   background: linear-gradient(135deg, #c7001f 0%, #9f0018 100%);
   box-shadow: 0 10px 18px rgba(199, 0, 31, 0.3);
}

:root:not([data-theme="dark"]) .tier-divider .tier-drag-handle,
:root[data-theme="dark"] .tier-divider .tier-drag-handle {
   color: #ffffff;
   background: rgba(255, 255, 255, 0.14);
   border: 1px solid rgba(255, 255, 255, 0.26);
   font-weight: 800;
}

:root:not([data-theme="dark"]) .tier-divider .tier-drag-handle:hover,
:root[data-theme="dark"] .tier-divider .tier-drag-handle:hover {
   background: rgba(255, 255, 255, 0.26);
}

:root:not([data-theme="dark"]) .tier-divider .tier-label-input,
:root[data-theme="dark"] .tier-divider .tier-label-input {
   flex: 0 1 40ch;
   width: min(40ch, 100%);
   max-width: 40ch;
   min-width: 14ch;
   border-color: #bf9a4a;
   background: rgba(255, 255, 255, 0.12);
   color: #ffffff;
}

:root:not([data-theme="dark"]) .tier-divider .tier-label-input::placeholder,
:root[data-theme="dark"] .tier-divider .tier-label-input::placeholder {
   color: rgba(255, 255, 255, 0.88);
}

:root:not([data-theme="dark"]) .tier-divider .tier-label-input:focus,
:root[data-theme="dark"] .tier-divider .tier-label-input:focus {
   outline: none;
   border-color: #ffffff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 12px rgba(255, 255, 255, 0.1);
}

:root:not([data-theme="dark"]) .tier-divider .tier-delete-button,
:root[data-theme="dark"] .tier-divider .tier-delete-button {
   border-color: #bf9a4a;
   background: rgba(0, 0, 0, 0.24);
   color: #ffffff;
}

:root:not([data-theme="dark"]) .tier-divider .tier-delete-button:hover,
:root[data-theme="dark"] .tier-divider .tier-delete-button:hover {
   background: rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
   .tier-divider {
      flex-wrap: wrap;
      gap: 6px;
   }

   .tier-divider .tier-label-input {
      flex: 1 1 100%;
      max-width: 100%;
      width: 100%;
      order: 3;
   }
}

/* Compact ranking rows so more players are visible without changing information content. */
.ranking-list .ranking-item {
   padding: 10px 12px;
   margin: 3px;
   border-radius: 10px;
   gap: 6px;
   font-size: 14px;
}

.ranking-list .player-drag-handle {
   width: 26px;
   height: 26px;
   min-width: 26px;
   border-radius: 8px;
}

.ranking-list .player-drag-handle::before {
   font-size: 15px;
}

.ranking-list .rank-column {
   min-width: 42px;
   gap: 2px;
}

.ranking-list .rank-number {
   min-width: 30px;
   font-size: 14px;
   padding: 4px 6px;
   border-radius: 8px;
   margin-right: 0;
}

.ranking-list .rank-move-chip {
   min-width: 30px;
   padding: 1px 6px;
   font-size: 10px;
}

.ranking-list .player-info {
   margin-left: 6px;
}

.ranking-list .player-avatar {
   width: 36px;
   height: 36px;
   font-size: 11px;
}

.ranking-list .player-name,
.ranking-list .player-name-button {
   font-size: 14px;
   line-height: 1.2;
}

.ranking-list .player-team,
.ranking-list .player-stats {
   font-size: 11px;
   margin-top: 1px;
   line-height: 1.2;
}

.ranking-list .overall-rank {
   padding: 3px 8px;
   font-size: 11px;
   margin-left: 6px;
}

.ranking-list .category-tag {
   padding: 3px 9px;
   font-size: 11px;
   margin-left: 8px;
}

.ranking-list .draft-actions {
   gap: 4px;
}

.ranking-list .draft-action-button {
   padding: 3px 7px;
   font-size: 10px;
}

@media (max-width: 760px) {
   .ranking-list .ranking-item {
      padding: 9px 10px;
      gap: 5px;
   }

   .ranking-list .player-avatar {
      width: 32px;
      height: 32px;
   }

   .ranking-list .rank-column {
      min-width: 38px;
   }

   .ranking-list .rank-number {
      min-width: 28px;
      font-size: 13px;
      padding: 3px 5px;
   }

   .ranking-list .category-tag,
   .ranking-list .overall-rank {
      font-size: 10px;
      padding: 2px 7px;
   }
}