*,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  body {
      font-family: inherit, sans-serif;
  }

  .draft-widget {
      background: #1d1d1d;
      width: 100%;
      overflow: hidden;
  }

  /* ─── STATUS BANNER ────────────────────────────────────── */
  .status-banner {
      padding: 12px 18px;
      text-align: center;
      font-size: clamp(12px, 2.8vw, 18px);
      letter-spacing: 0.04em;
      line-height: 1.3;
  }

  @keyframes live-sweep {
      0%   { left: -60%; }
      100% { left: 110%; }
  }

  .status-banner.mode-clock {
      background: #252525;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #434343;
  }

  .status-banner.mode-clock::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -60%;
      width: 60%;
      height: 2px;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.75), transparent);
      animation: live-sweep 2.2s linear infinite;
  }

  .status-banner.mode-clock .label {
      color: #ffffff;
  }

  .status-banner.mode-clock .value {
      color: rgba(255, 255, 255, 0.85);
  }

  .status-banner.mode-hidden {
      display: none;
  }

  .status-banner.mode-pick {
      background: #252525;
      border-bottom: 1px solid #434343;
  }

  .status-banner.mode-pick .label {
      color: #ff4444;
  }

  .status-banner.mode-pick .value {
      color: #ffffff;
  }

  .status-banner .label {
      font-weight: 700;
  }

  .status-banner .value {
      font-weight: 400;
  }

  /* ─── INFO ROW ─────────────────────────────────────────── */
  .info-row {
      display: flex;
      align-items: stretch;
      background: #252525;
  }

  .info-left {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 26px 20px;
      border-right: 1px solid #333;
      flex-shrink: 0;
  }

  .draft-logo-shield {
      width: 54px;
      height: 54px;
      object-fit: contain;
  }

  .draft-dates p {
      font-size: 11px;
      color: #888;
      text-transform: uppercase;
      line-height: 1.5;
  }

  .draft-dates strong {
      color: #ccc;
  }

  /* ─── PICKS SCROLL ─────────────────────────────────────── */
  .picks-scroll {
      display: flex;
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
      -webkit-overflow-scrolling: touch;
  }

  .picks-scroll::-webkit-scrollbar {
      display: none;
  }

  .picks-scroll.grabbing {
      cursor: grabbing;
  }

  /* ─── PICK CARD ────────────────────────────────────────── */
  .pick-card {
      flex-shrink: 0;
      width: 270px;
      border-right: 1px solid #333;
      display: flex;
      flex-direction: column;
  }
  .pick-card:hover{
    background-color: #1d1d1d;
}
  .pick-card:last-child {
      border-right: none;
  }

  .pick-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px 5px;
      border-bottom: 1px solid #333;
  }

  .pick-card-label {
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      white-space: nowrap;
  }

  .pick-card-num {
      font-size: 10px;
      color: #555;
  }

  .pick-card-via {
      font-size: 11px;
      font-weight: 600;
      color: #7f7f7f;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
  }
  .pick-card-via-icon {
      font-size: 11px;
      line-height: 1;
  }

  .pick-headshot-wrap {
      position: relative;
      flex-shrink: 0;
      display: flex;
  }

  .pick-info-icon {
      position: absolute;
      bottom: 4px;
      left: -20px;
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.45);
  }

  /* Row layout: info left, photo right */
  .pick-card-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 10px 12px;
      gap: 10px;
      min-height: 0;
  }

  .pick-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
  }

  .pick-name {
      font-size: 15px;
      font-weight: 600;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .pick-position {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      background: #004c54;
      padding: 2px 5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      align-self: flex-start;
  }

  .pick-school-row {
      display: flex;
      align-items: center;
      gap: 4px;
  }

  .pick-school-logo {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex-shrink: 0;
      background-color: rgb(255, 255, 255);
      padding: 2px;
      border-radius: 2px;
  }

  .pick-school-name {
      font-size: 12px;
      color: #ccc;
      white-space: nowrap;
      /* overflow: hidden; */
      /* text-overflow: ellipsis; */
  }

  /* Player headshot — right side */
  .pick-headshot {
      width: 60px;
      height: 60px;
      object-fit: cover;
      object-position: top center;
      background: #f1f1f1;
      border: 2px solid #333;
      flex-shrink: 0;
  }

  .pick-card.current .pick-headshot {
      border-color: #004c54;
      background-color: #f1f1f1;
  }

  /* Eagles logo (OTC / empty state) */
  .pick-logo {
      width: 42px;
      height: 34px;
      object-fit: contain;
      border-radius: 50%;
      flex-shrink: 0;
  }

  /* Placeholder state */
  .pick-headshot-placeholder {
      width: 56px;
      height: 56px;
      background: #2a2a2a;
      border: 1px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .pick-school-logo-placeholder {
      width: 14px;
      height: 14px;
      background: #333;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .pick-placeholder {
      color: #444 !important;
      font-style: italic;
  }

  .pick-placeholder-pos {
      background: #2a2a2a !important;
      color: #444 !important;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      align-self: flex-start;
  }

  .pick-dash {
      font-size: 12px;
      color: #444;
  }

  .pick-otc {
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.3;
  }

  @keyframes teal-sweep {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
  }

  /* Current / on the clock card */
  .pick-card.current {
      background: linear-gradient(135deg, #004c54, #002c30, #004c54);
      background-size: 300% 300%;
      animation: teal-sweep 6s ease infinite;
  }

  .pick-card.current .pick-card-header {
      border-bottom-color: #004c54;
  }

  .pick-card.current .pick-card-label {
      color: #ffffff;
  }

  .pick-card.current .pick-card-num {
      color: #6ecfc9;
  }

  /* ─── RESPONSIVE ───────────────────────────────────────── */
  /* ─── MODAL ────────────────────────────────────────────── */
  @keyframes modal-overlay-in {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  @keyframes modal-overlay-out {
      from { opacity: 1; }
      to   { opacity: 0; }
  }
  @keyframes modal-card-in {
      from { opacity: 0; transform: scale(0.94) translateY(12px); }
      to   { opacity: 1; transform: scale(1)    translateY(0); }
  }
  @keyframes modal-card-out {
      from { opacity: 1; transform: scale(1)    translateY(0); }
      to   { opacity: 0; transform: scale(0.94) translateY(12px); }
  }

  .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  .modal-overlay.open {
      display: flex;
      animation: modal-overlay-in 0.2s ease forwards;
  }

  .modal-overlay.open .modal {
      animation: modal-card-in 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  }

  .modal-overlay.closing {
      display: flex;
      animation: modal-overlay-out 0.18s ease forwards;
  }

  .modal-overlay.closing .modal {
      animation: modal-card-out 0.18s ease forwards;
  }

  .modal {
      background: #f2f2f2;
      border: none;
      border-radius: 20px;
      width: 100%;
      max-width: 480px;
      position: relative;
      overflow: hidden;
      font-family: 'Inter', sans-serif;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  }

  .modal-hero {
      position: relative;
      width: 100%;
      height: 275px;
      overflow: hidden;
  }

  .modal-action-shot {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
  }

  .modal-hero-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(242,242,242,0) 30%, #f2f2f2 100%);
  }

  .modal-content {
      padding: 0 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      z-index: 2;
      background: rgba(255,255,255,0.88);
      border: none;
      border-radius: 50%;
      color: #222;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }

  .modal-close:hover {
      background: #ffffff;
      color: #000;
  }

  .modal-pick-label {
      font-size: 11px;
      font-weight: 600;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.06em;
  }

  .modal-name {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #111111;
      line-height: 1.1;
  }

  .modal-meta-row {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .modal-position {
      font-size: 11px;
      font-weight: 600;
      color: #ffffff;
      background: #004c54;
      padding: 3px 9px;
      border-radius: 20px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      flex-shrink: 0;
  }

  .modal-school-name {
      font-size: 13px;
      color: #444;
  }

  .modal-school-logo {
      width: 18px;
      height: 18px;
      object-fit: contain;
      background: #fff;
      padding: 2px;
      border-radius: 2px;
      flex-shrink: 0;
  }

  .modal-bio {
      font-size: 13px;
      line-height: 1.65;
      color: #444;
      margin: 0;
  }

  .modal-btn {
      display: block;
      width: 100%;
      padding: 13px 0;
      background: #004c54;
      color: #ffffff;
      font-family: 'Oswald', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      border: none;
      border-radius: 12px;
      cursor: pointer;
  }

  .modal-btn:hover {
      background: #006672;
  }

  /* ─── MODAL VITALS ────────────────────────────────────── */
  .modal-vitals-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
  }

  .modal-vital {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 14px;
      border-radius: 8px;
      background: linear-gradient(135deg, #004c54, #002c30, #004c54);
      background-size: 300% 300%;
      animation: teal-sweep 5s ease infinite;
      min-width: 56px;
  }

  .modal-vital-label {
      font-size: 9px;
      font-weight: 700;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
  }

  .modal-vital-value {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.3;
  }

  /* ─── RESPONSIVE ───────────────────────────────────────── */
  @media (max-width: 480px) {
      .info-left {
          padding: 8px 10px;
          gap: 8px;
      }

      .draft-dates {
          display: none;
      }

      .pick-card {
          width: 260px;
      }

      .pick-headshot {
          width: 66px;
          height: 80px;
      }
  }