/* Blue Wave Baseball - the Challenge Board page (duel.js, P1c).
   Same panel language as career.css and academy.css: navy cards, thin aqua lines,
   yellow accents. The rating bars are the Scouting Center's (.ac-bar, academy.css). */

.career-view[data-view="duel"] {
  --dl-ok: #35c97f;
  --dl-bad: #ff8a75;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dl { display: flex; flex-direction: column; gap: 0.8rem; padding-bottom: 0.6rem; }

.dl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dl-head h3 { margin: 0.1rem 0 0.2rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.dl-head p { margin: 0; color: var(--cr-text-dim); font-size: 0.8rem; max-width: 36rem; }
.dl-record { flex: none; text-align: right; padding: 0.35rem 0.7rem; border: 1px solid var(--cr-line); border-radius: 0.45rem; background: var(--cr-inset); }
.dl-record small { display: block; color: var(--cr-text-dim); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dl-record b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.dl-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.8rem 0.9rem; border: 1px solid var(--cr-line); border-radius: 0.5rem; background: var(--cr-panel); }
.dl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 1.6rem; }
.dl-card-head h4 { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-card-foot { display: flex; justify-content: flex-end; }

.dl-rating { display: inline-flex; align-items: baseline; gap: 0.25rem; color: #ffd65a; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-rating small { color: var(--cr-text-dim); font-size: 0.66rem; font-weight: 700; }

.dl-hitters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.dl-hitter { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.6rem; border-radius: 0.4rem; background: var(--cr-inset); min-width: 0; }
.dl-hitter strong { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-pitcher { margin: 0; color: var(--cr-text-dim); font-size: 0.74rem; }
.dl-pitcher span { opacity: 0.7; }

.dl-note { margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.4rem; border: 1px solid var(--cr-line); background: var(--cr-inset); font-size: 0.82rem; }
.dl-note.warn { border-color: #ff8a75; color: #ffd3cb; }
.dl-note.ok { border-color: var(--dl-ok); color: #c8f3dc; }

.dl-wait .dl-big { margin: 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-wait .dl-big span { color: var(--cr-text-dim); font-size: 0.8rem; font-weight: 600; }
.dl-line { margin: 0; font-size: 0.86rem; }
.dl-hint { margin: 0; color: var(--cr-text-dim); font-size: 0.76rem; line-height: 1.45; }
.dl-why { margin: 0; color: #ffd3cb; font-size: 0.82rem; }
.dl-empty { margin: 0; padding: 0.6rem 0; color: var(--cr-text-dim); font-size: 0.86rem; }
.dl-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dl-left { font-variant-numeric: tabular-nums; font-weight: 800; color: #9fe0ff; }

.dl-result .dl-line { font-size: 1rem; font-weight: 700; }
.dl-result.win { border-color: var(--dl-ok); }
.dl-result.loss { border-color: #ff8a75; }

.dl-tabs { display: flex; gap: 0.4rem; }
.dl-tabs button { padding: 0.45rem 0.9rem; border: 1px solid var(--cr-line); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.dl-tabs button[aria-selected="true"] { border-color: var(--yellow); background: rgba(243, 199, 68, 0.14); color: #ffd65a; }

.dl-sort { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--cr-text-dim); }
.dl-sort select { padding: 0.25rem 0.4rem; border: 1px solid var(--cr-line); border-radius: 0.35rem; background: var(--cr-inset); color: #fff; font: inherit; font-size: 0.78rem; }

.dl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dl-row {
  display: grid; grid-template-columns: minmax(7rem, 1.4fr) 4rem 6rem minmax(7rem, 1.5fr) 3.6rem auto; align-items: center; gap: 0.7rem;
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--cr-line); border-radius: 0.45rem; background: var(--cr-inset);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.dl-row:hover { border-color: var(--yellow); background: rgba(16, 65, 99, 0.6); }
.dl-row.mine { opacity: 0.8; }
.dl-row small { display: block; color: var(--cr-text-dim); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dl-row b { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.dl-who strong { display: block; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-who small { text-transform: none; letter-spacing: 0; font-size: 0.7rem; }
.dl-rule b { font-size: 0.78rem; font-weight: 700; }

.dl-chip { justify-self: end; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--cr-line); font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.dl-chip.ok { border-color: var(--dl-ok); color: #b9f0d3; }
.dl-chip.over { border-color: #ff8a75; color: #ffd3cb; }
.dl-chip.no { color: var(--cr-text-dim); }
.dl-chip.mine { color: #ffd65a; border-color: var(--yellow); }

.dl-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.dl-recent li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
.dl-recent em { font-style: normal; color: #ffd65a; font-variant-numeric: tabular-nums; }
.dl-recent i { color: var(--cr-text-dim); font-style: normal; }

.dl-detail-name { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.4rem; text-transform: none; letter-spacing: 0; color: #fff; }
.dl-detail-name small { color: var(--cr-text-dim); font-family: inherit; font-size: 0.78rem; font-weight: 600; }
.dl-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.dl-side { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; border: 1px solid var(--cr-line); border-radius: 0.45rem; }
.dl-side-head { display: flex; justify-content: space-between; align-items: baseline; }
.dl-side .dl-hitters { grid-template-columns: 1fr; }
.dl-verdict { margin: 0; padding: 0.5rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--cr-line); font-size: 0.88rem; font-weight: 700; }
.dl-verdict.ok { border-color: var(--dl-ok); color: #c8f3dc; }
.dl-verdict.no { border-color: #ff8a75; color: #ffd3cb; }

.dl-form { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 1rem; align-items: start; }
.dl-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.dl-field > span, .dl-field > legend { padding: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dl-field input[type="text"] { padding: 0.55rem 0.7rem; border: 1px solid var(--cr-line); border-radius: 0.4rem; background: var(--cr-inset); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-field input[type="text"]:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }
.dl-radio { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; cursor: pointer; }
.dl-radio input { margin-top: 0.2rem; accent-color: #f3c744; }
.dl-radio b { display: block; font-size: 0.86rem; }
.dl-radio small { display: block; color: var(--cr-text-dim); font-size: 0.72rem; }
.dl-x { margin-top: 0.3rem; max-width: 12rem; }
.dl-x[hidden] { display: none; }
.dl-sum { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.dl-sum b { color: #ffd65a; }

@media (max-width: 760px) {
  .dl-head { flex-direction: column; }
  .dl-hitters { grid-template-columns: 1fr; }
  .dl-versus { grid-template-columns: 1fr; }
  .dl-form { grid-template-columns: 1fr; }
  .dl-row { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .dl-row .dl-rule { grid-column: 1 / -1; }
}