/* Hockey HQ Draft Day v3.1 — darker liquid glass and responsive workspace pass */

/* Live Peek is an optical layer above the board, not a second navy panel. */
.draft-main {
  container-type: inline-size;
}

@media (width >= 961px) {
  .draft-main,
  .draft-main.peek-collapsed {
    align-items: stretch;
    isolation: isolate;
  }

  .draft-main > .board-card,
  .draft-main.peek-collapsed > .board-card {
    position: relative;
    z-index: 1;
  }

  .draft-main > .live-peek,
  .draft-main.peek-collapsed > .live-peek {
    position: relative;
    top: auto;
    right: auto;
    align-self: stretch;
    justify-self: end;
    width: clamp(400px, 30vw, 480px);
    max-width: min(480px, 44vw);
    height: auto;
    min-height: 0;
    margin: 16px 0 0;
    z-index: 36;
  }

  .draft-main > .live-peek.collapsed,
  .draft-main.peek-collapsed > .live-peek.collapsed {
    width: 58px;
    max-width: 58px;
    height: auto;
    min-height: 0;
  }

  /* Keep every board control clickable when the glass is collapsed. */
  .draft-main.peek-collapsed .board-toolbar {
    padding-right: 86px;
  }
}

.live-peek {
  overflow: hidden;
  border: 1px solid rgba(226, 247, 255, .28);
  border-top-color: rgba(245, 252, 255, .54);
  border-left-color: rgba(244, 252, 255, .64);
  border-right-color: rgba(132, 202, 244, .16);
  border-bottom-color: rgba(97, 166, 207, .20);
  background:
    radial-gradient(115% 22% at 22% -2%, rgba(255, 255, 255, .070), transparent 70%),
    linear-gradient(104deg, rgba(255, 255, 255, .032), transparent 16%, transparent 76%, rgba(188, 231, 255, .015)),
    rgba(227, 244, 255, .012);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(103%) contrast(108%);
  backdrop-filter: blur(22px) saturate(160%) brightness(103%) contrast(108%);
  border-radius: 48px 16px 16px 48px;
  box-shadow:
    -30px 24px 62px -38px rgba(0, 4, 10, .74),
    -12px 0 34px -24px rgba(204, 240, 255, .58),
    10px 18px 42px -30px rgba(0, 4, 10, .72),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .24),
    inset -1.5px -1.5px 0 rgba(45, 106, 145, .18),
    inset 15px 0 24px -23px rgba(239, 251, 255, .62);
  transition:
    width .42s cubic-bezier(.22, .8, .24, 1),
    max-width .42s cubic-bezier(.22, .8, .24, 1),
    border-radius .32s ease,
    background .32s ease,
    box-shadow .32s ease,
    transform .42s cubic-bezier(.22, .8, .24, 1);
}

/* Reflected light plus a concentrated highlight along the curved edge. */
.live-peek::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 32% at 18% -5%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(25% 72% at -3% 50%, rgba(226, 248, 255, .11), transparent 78%),
    linear-gradient(111deg, rgba(255, 255, 255, .075), transparent 21%, transparent 78%, rgba(120, 205, 255, .025));
  mix-blend-mode: screen;
}

/* The double rim makes the pane read as physical glass. */
.live-peek::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(229, 248, 255, .13);
  border-top-color: rgba(255, 255, 255, .24);
  border-left-color: rgba(255, 255, 255, .30);
  border-radius: 44px 13px 13px 44px;
  box-shadow:
    inset 2px 1px 7px -5px rgba(255, 255, 255, .95),
    inset -2px -1px 8px -6px rgba(74, 150, 194, .50),
    0 1px 0 rgba(255, 255, 255, .035);
}

.live-peek > * {
  position: relative;
  z-index: 2;
}

.live-peek.collapsed {
  border-radius: 30px 16px 16px 30px;
  background:
    radial-gradient(85% 24% at 30% 0%, rgba(255, 255, 255, .09), transparent 75%),
    rgba(224, 244, 255, .016);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(104%) contrast(108%);
  backdrop-filter: blur(22px) saturate(160%) brightness(104%) contrast(108%);
  box-shadow:
    -20px 12px 44px -27px rgba(0, 4, 10, .78),
    -8px 0 23px -18px rgba(221, 247, 255, .72),
    inset 1.5px 1px 0 rgba(255, 255, 255, .24),
    inset -1px -1px 0 rgba(59, 122, 163, .20);
}

.live-peek.collapsed::after {
  border-radius: 27px 13px 13px 27px;
}

.peek-expand {
  width: 58px;
  min-height: 420px;
  font-size: 9px;
  letter-spacing: .16em;
}

.peek-expand:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(114, 201, 255, .025));
}

.peek-expand b {
  font-size: 23px;
}

.live-peek-head {
  height: 89px;
  padding: 14px 22px 12px 28px;
  gap: 16px;
  border-bottom: 1px solid rgba(205, 235, 252, .24);
  background: linear-gradient(180deg, rgba(255, 255, 255, .040), rgba(255, 255, 255, .010));
  box-shadow: 0 18px 34px -30px rgba(0, 4, 10, .62);
}

.live-peek-head .eyebrow {
  color: #9adfff;
  font-size: 9px;
  letter-spacing: .14em;
}

.live-peek-head strong {
  margin-top: 7px;
  font-size: 22px;
  letter-spacing: .04em;
}

.peek-actions {
  gap: 9px;
}

.peek-actions button {
  width: 44px;
  height: 44px;
  border-color: rgba(222, 244, 255, .30);
  border-radius: 14px;
  background: rgba(255, 255, 255, .030);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  font-size: 18px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .13),
    inset -1px -1px 0 rgba(67, 131, 171, .13),
    0 8px 20px -14px rgba(0, 5, 10, .70);
}

.live-peek-context {
  height: 76px;
  padding: 14px 28px;
  color: #b6ccda;
  border-bottom-color: rgba(199, 230, 248, .18);
  background: rgba(255, 255, 255, .012);
  font-size: 12px;
  line-height: 1.48;
}

.live-peek-columns {
  height: 50px;
  grid-template-columns: 40px 54px minmax(0, 1fr) 56px;
  padding: 0 20px;
  border-bottom-color: rgba(206, 235, 252, .22);
  background: rgba(255, 255, 255, .012);
  color: #88a8bc;
  font-size: 9px;
}

.live-peek-list {
  height: auto;
  max-height: none;
  overflow: visible;
}

.peek-row {
  min-height: 90px;
  height: 90px;
  grid-template-columns: 40px 54px minmax(0, 1fr) 56px;
  gap: 10px;
  padding: 0 20px;
  border-bottom-color: rgba(193, 225, 244, .13);
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.peek-row:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, .065), rgba(114, 201, 255, .025));
  box-shadow: inset 3px 0 rgba(192, 232, 255, .46);
}

.peek-row.selected {
  background: linear-gradient(90deg, rgba(255, 255, 255, .075), rgba(114, 201, 255, .040));
  box-shadow: inset 4px 0 var(--blue), inset 0 1px rgba(255, 255, 255, .045);
}

.peek-rank { font-size: 16px; }

.peek-avatar {
  width: 48px;
  height: 48px;
  box-shadow: 0 0 0 1px rgba(197, 232, 252, .24), 0 8px 20px rgba(0, 8, 16, .18);
}

.peek-name-line { gap: 7px; }
.peek-name-line strong { font-size: 16px; line-height: 1.15; }
.peek-name-line .team-logo { width: 19px; height: 19px; }
.peek-player small { margin-top: 4px; color: #95b0c1; font-size: 11px; }

.peek-player em {
  margin-top: 5px;
  padding: 3px 7px;
  border-color: rgba(146, 218, 255, .22);
  background: rgba(255, 255, 255, .025);
  color: #98dcff;
  font-size: 10px;
}

.peek-move { font-size: 12px; }

/* Let the toolbar choose two rows before its controls become cramped. */
.board-toolbar { flex-wrap: wrap; }

.board-toolbar > :first-child {
  flex: 1 1 270px;
  min-width: 220px;
}

.board-toolbar > .filter-tools {
  flex: 1 1 630px;
  min-width: 0;
}

.filter-tools > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filter-tools input {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}

/* Stable VORP geometry: labels may wrap but values never collide. */
.draft-layout .focus-vorp {
  min-width: 0;
  width: min(100%, 360px);
  grid-template-columns: minmax(128px, 1.25fr) minmax(92px, .9fr) minmax(92px, .9fr);
  gap: 6px 16px;
}

.draft-layout .focus-vorp > span > span {
  min-height: 2.25em;
  white-space: normal;
  line-height: 1.12;
}

.draft-layout .focus-vorp .focus-vorp-primary > strong { font-size: 34px; }
.draft-layout .focus-vorp .focus-vorp-rate > strong,
.draft-layout .focus-vorp .focus-vorp-usable > strong { font-size: 23px; }

/* Full row only when the selected-player card itself can hold it. */
@container (min-width: 1381px) {
  .player-focus {
    grid-template-columns: auto minmax(190px, 1fr) auto minmax(340px, 360px) minmax(185px, 210px) auto;
    gap: clamp(14px, 1.2vw, 22px);
  }
}

/* Medium workspace: identity and metrics above, actions and market below. */
@container (min-width: 900px) and (max-width: 1380px) {
  .player-focus {
    grid-template-columns: auto minmax(220px, 1fr) minmax(340px, 380px);
    align-items: center;
  }

  .player-focus .player-avatar { grid-column: 1; grid-row: 1 / 3; }
  .player-focus .focus-copy { grid-column: 2; grid-row: 1; }
  .player-focus .focus-stat { grid-column: 3; grid-row: 1; }
  .player-focus .focus-pick-button { grid-column: 2; grid-row: 2; width: 100%; }
  .player-focus .focus-market { grid-column: 3; grid-row: 2; width: 100%; }
  .player-focus .target-button { grid-column: 2 / 4; grid-row: 3; justify-self: end; }
}

/* Narrow workspace: stack decision blocks instead of compressing them. */
@container (max-width: 899px) {
  .player-focus {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 15px 18px;
  }

  .player-focus .player-avatar { grid-column: 1; grid-row: 1; }
  .player-focus .focus-copy { grid-column: 2; grid-row: 1; min-width: 0; }

  .player-focus .focus-pick-button,
  .player-focus .focus-stat,
  .player-focus .focus-market,
  .player-focus .target-button {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  .player-focus .focus-pick-button { grid-row: 2; }
  .player-focus .focus-stat { grid-row: 3; }
  .player-focus .focus-market { grid-row: 4; }
  .player-focus .target-button { grid-row: 5; }

  .player-focus .focus-market,
  .player-focus .focus-stat {
    border-left: 0;
    padding-left: 0;
  }

  .draft-layout .focus-vorp { width: 100%; max-width: 520px; }
}

@container (max-width: 1100px) {
  .board-toolbar { align-items: flex-start; }
  .board-toolbar > .filter-tools { flex-basis: 100%; justify-content: flex-start; }
}

@media (width >= 961px) and (width <= 1200px) {
  .draft-main > .live-peek,
  .draft-main.peek-collapsed > .live-peek {
    width: 390px;
    max-width: 42vw;
  }

  .draft-main > .live-peek.collapsed,
  .draft-main.peek-collapsed > .live-peek.collapsed {
    width: 56px;
    max-width: 56px;
  }
}

@media (width <= 960px) {
  .live-peek,
  .live-peek.collapsed {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin-top: 12px;
    border-radius: 24px;
  }

  .live-peek::after,
  .live-peek.collapsed::after { border-radius: 21px; }

  .peek-expand { width: 100%; min-height: 48px; }
  .live-peek-list { max-height: 700px; overflow-y: auto; }
  .peek-row { min-height: 78px; height: 78px; }
}

@media (width <= 700px) {
  .player-focus { padding: 18px 16px; }

  .draft-layout .focus-vorp {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
  }

  .draft-layout .focus-vorp .focus-vorp-primary > strong { font-size: 29px; }
  .draft-layout .focus-vorp .focus-vorp-rate > strong,
  .draft-layout .focus-vorp .focus-vorp-usable > strong { font-size: 20px; }

  .draft-main.peek-collapsed .board-toolbar { padding-right: 18px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .live-peek,
  .live-peek.collapsed { background: rgba(8, 28, 44, .94); }
}

@media (prefers-reduced-motion: reduce) {
  .live-peek,
  .peek-row,
  .peek-actions button { transition-duration: .01ms !important; }
}