/* Blue Wave Baseball - the Challenge Board match (duel-play.js, duel-game.js).
 *
 * The match is played on the game's own screen. This file only styles the thin layer over it: the
 * scoreboard by round, the pot and Leave (top left, where the game's title and back arrow are), the
 * "you are batting" card, and the ready / result / disconnected cards. Before the first pitch there is
 * no game screen yet, so the layer is solid (dp-solid); once the game is up it is see-through.
 */

.dp-layer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
.dp-layer[hidden] { display: none; }
.dp-layer.dp-solid { pointer-events: auto; background: radial-gradient(ellipse at 50% 20%, #0d3a66 0%, #051b33 70%); touch-action: none; }
.dp-layer.dp-dim::before { content: ""; position: absolute; inset: 0; background: rgba(3, 20, 38, 0.72); }

/* Top left: Leave, the scoreboard, the pot. The game's own back arrow and title are hidden meanwhile. */
.dp-top {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 0.8rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(60, 181, 234, 0.55);
  border-radius: 0.6rem;
  background: rgba(3, 39, 65, 0.94);
  box-shadow: 0 10px 32px rgba(0, 20, 35, 0.32);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.dp-solid .dp-top { left: 50%; transform: translateX(-50%); width: min(30rem, calc(100% - 2rem)); }
.dp-score { grid-column: 1 / -1; min-width: 0; }
.dp-score table { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; }
.dp-score th, .dp-score td { padding: 0.12rem 0.65rem; text-align: right; font-size: 0.85rem; }
.dp-score thead th, .dp-score thead td { color: #7fb6d9; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dp-score tbody th { text-align: left; font-weight: 800; padding-left: 0.2rem; white-space: nowrap; }
.dp-score tr.me th { color: #ffd65a; }
.dp-score tr.batting { background: rgba(243, 199, 68, 0.16); }
.dp-score tr.batting th i { margin-right: 0.3rem; color: #f3c744; font-style: normal; font-size: 0.7rem; }
.dp-score em { margin-left: 0.4rem; color: #ff8a75; font-size: 0.66rem; font-style: normal; font-weight: 700; }
.dp-score td.tot { font-weight: 800; font-size: 1rem; color: #fff; }
.dp-pot { font-size: 0.8rem; }
.dp-pot b { color: #ffd65a; font-variant-numeric: tabular-nums; }
.dp-pot small { display: block; color: #9fb4c4; font-size: 0.66rem; }
.dp-leave { justify-self: end; padding: 0.4rem 0.8rem; border: 1px solid #7bcdf4; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.dp-leave[hidden] { display: none; }
.dp-leave.armed { border-color: #ff8a75; color: #ffd3cb; }

/* Who is being watched / what is happening, under the top panel. */
.dp-banner {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(3, 39, 65, 0.88);
  border: 1px solid rgba(60, 181, 234, 0.45);
  color: #cfe6f5;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
}
.dp-banner[hidden] { display: none; }

/* "Round 2 of 3 - you are batting", over the field for the first seconds of an at-bat. */
.dp-intro { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem 1.6rem; border-radius: 0.7rem; background: rgba(5, 27, 51, 0.88); border: 1px solid rgba(243, 199, 68, 0.6); text-align: center; pointer-events: none; }
.dp-intro[hidden] { display: none; }
.dp-intro small { color: #7fb6d9; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dp-intro strong { font-size: 1.5rem; }
.dp-intro span { color: #ffd65a; font-size: 0.9rem; font-weight: 700; }
.dp-intro.show { animation: dp-pop2 0.3s ease-out both; }
@keyframes dp-pop2 { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* The ready card, the result and the disconnected card. */
.dp-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; pointer-events: auto; touch-action: auto; }
.dp-card[hidden] { display: none; }
.dp-wait, .dp-result { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; width: min(30rem, 100%); padding: 1.2rem 1.4rem; border: 1px solid rgba(123, 205, 244, 0.5); border-radius: 0.7rem; background: rgba(0, 41, 78, 0.97); text-align: center; user-select: text; -webkit-user-select: text; }
.dp-wait h2, .dp-result h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; }
.dp-result.win h2 { color: #ffd65a; }
.dp-result.loss h2 { color: #ffb4a7; }
.dp-money { margin: 0; font-size: 1.05rem; font-weight: 700; }
.dp-fine { margin: 0; color: #9fb4c4; font-size: 0.78rem; line-height: 1.45; }
.dp-ready { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; font-size: 0.86rem; color: #9fb4c4; }
.dp-ready li.yes { color: #9be0b9; font-weight: 800; }
.dp-rounds { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dp-rounds th, .dp-rounds td { padding: 0.25rem 0.9rem; text-align: right; font-size: 0.86rem; }
.dp-rounds tbody th { text-align: left; font-weight: 700; color: #cfe6f5; }
.dp-rounds thead th { color: #7fb6d9; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.dp-rounds tr.tot { border-top: 1px solid rgba(123, 205, 244, 0.4); font-weight: 800; }
.dp-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.dp-card-actions button { min-height: 2.6rem; padding: 0.55rem 1.2rem; border: 1px solid #7bcdf4; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.dp-card-actions .dp-ready-btn, .dp-card-actions .dp-done, .dp-card-actions .dp-retry { border: 0; background: #f3c744; color: #082b45; }
.dp-card-actions button:disabled { opacity: 0.55; cursor: default; }

/* While a match is on the game screen: the game's own title and back arrow give way to the scoreboard
   and Leave (a match is left through Leave, never through the menu). The watcher has no swing button
   and no timing bar. */
body.dp-play .game-menu-button,
body.dp-play .game-title-mark { display: none; }
body.dp-watch .swing-button,
body.dp-watch .tbar { display: none; }
body.dp-open { overflow: hidden; }

@media (max-width: 700px) {
  .dp-top { top: 0.4rem; left: 0.4rem; max-width: calc(100% - 0.8rem); padding: 0.35rem 0.5rem; gap: 0.2rem 0.5rem; }
  .dp-score th, .dp-score td { padding: 0.1rem 0.4rem; font-size: 0.78rem; }
  .dp-pot small { display: none; }
  .dp-banner { bottom: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-intro.show { animation: none; opacity: 1; }
}