/* The duel against a person: boards on a canvas, controls in the DOM.
   The same --dock and --rail allowances as the arcade keep every button clear
   of the platform's own bar. */
#duelScr {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  padding: max(6px, env(safe-area-inset-top)) calc(max(8px, env(safe-area-inset-right)) + var(--rail)) calc(max(8px, env(safe-area-inset-bottom)) + var(--dock)) max(8px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 30%, #0b3a55 0%, #06263a 55%, #031521 100%);
  color: #e8f2f8;
}
#duelScr.hidden { display: none; }
body.duel-on #hud, body.duel-on #fireBtn, body.duel-on #pauseBtn { display: none !important; }

.dtop { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.dscore { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 700; color: #cfe8f3; }
.dscore span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; }
.dscore #dFoe.off { opacity: .5; }
.dscore #dFoe.off::after { content: ' (away)'; font-weight: 500; }
.dscore b { font-size: 18px; color: #ffe07a; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.dbtn {
  flex: none; min-height: 38px; padding: 8px 14px;
  font: 700 13px system-ui, sans-serif; color: #cfe8f3; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(160,215,235,.32); border-radius: 10px;
}
.dbtn:disabled { opacity: .45; cursor: default; }
.dbtn.big {
  color: #06212f; font-weight: 800; letter-spacing: .05em; font-size: 15px;
  background: linear-gradient(180deg, #ffe07a, #f0b73f); border: none;
  box-shadow: 0 4px 0 #9a6f18;
}
.dbtn.big:disabled { background: #6b6a58; box-shadow: 0 4px 0 #3e3d31; color: #2a2a22; opacity: .8; }
.dbtn.warn { color: #ffb4a8; border-color: rgba(255,140,120,.4); }

.dstatus {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px; padding: 8px 12px; min-height: 38px;
  font-size: 14px; line-height: 1.3; color: #d3e7f0;
  background: rgba(3,18,28,.55); border: 1px solid rgba(140,210,235,.18); border-radius: 10px;
}
.dstatus #dStatusTxt { flex: 1; }
.dstatus.go { color: #fff2c4; border-color: rgba(255,224,122,.55); background: rgba(60,48,10,.35); }
.dstatus.bad { color: #ffc2b8; border-color: rgba(255,130,110,.5); }
.dstatus b { font-variant-numeric: tabular-nums; color: #9fe8ff; font-size: 15px; }
.dstatus b.low { color: #ff9c8a; }

#dStage { position: relative; flex: 1; min-height: 0; margin: 4px 0; }
#duelCv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.dcard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, 100%); max-height: 100%; overflow: auto;
  padding: 16px; text-align: center;
  background: linear-gradient(180deg, rgba(9,44,64,.97), rgba(5,26,40,.98));
  border: 1px solid rgba(140,210,235,.3); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  z-index: 2;
}
.dcard.hidden { display: none; }
.dcard .sub { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.4; }
.dcard button.big { margin-top: 8px; }
.dcard button.big.alt { background: linear-gradient(180deg, #9fe8ff, #4fb9df); box-shadow: 0 5px 0 #1f6f8e, 0 8px 18px rgba(0,0,0,.35); }
.dcard .how { margin: 10px 0; }
.dcard .bigscore { margin: 6px 0; }
#dOverTitle.lost { color: #ff9c8a; }
.dnote { margin: 6px 0 4px; padding: 8px 10px; font-size: 12.5px; line-height: 1.35; color: #ffe6b0; background: rgba(90,60,10,.35); border-radius: 8px; }
.dnote.hidden { display: none; }
button.small.hidden { display: none; }

.dinvite {
  display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; padding: 8px 10px;
  font-size: 12.5px; color: #cfe8f3;
  background: rgba(3,18,28,.6); border: 1px dashed rgba(160,215,235,.4); border-radius: 10px;
}
.dinvite.hidden { display: none; }
.dinvite code {
  display: block; padding: 5px 7px; font-size: 11.5px; color: #9fe8ff;
  background: rgba(0,0,0,.25); border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-user-select: all; user-select: all;
}
.dinvite .drow { display: flex; gap: 8px; }
.dinvite .drow .dbtn { flex: 1; }

.dbar { display: flex; gap: 8px; min-height: 0; }
.dbar:empty { display: none; }
.dbar .dbtn { flex: 1; min-height: 46px; font-size: 14px; }

/* the second button on the title: the duel */
button.big.duelb {
  margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, #9fe8ff, #4fb9df);
  box-shadow: 0 5px 0 #1f6f8e, 0 8px 18px rgba(0,0,0,.35);
}
button.big.duelb:active { box-shadow: 0 2px 0 #1f6f8e; }
button.big.duelb small { font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .8; }

@media (max-height: 460px) {
  .dtop { min-height: 32px; }
  .dbtn { min-height: 32px; padding: 5px 10px; }
  .dstatus { padding: 5px 10px; min-height: 30px; font-size: 13px; margin: 2px 0; }
  .dbar .dbtn { min-height: 38px; }
  .dinvite { padding: 5px 8px; font-size: 11.5px; }
  button.big.duelb { margin-top: 6px; }
  button.big.duelb small { display: none; }
}
/* On a low wide screen the controls go to the side so the boards keep the height */
@media (max-height: 520px) and (orientation: landscape) {
  #duelScr { display: grid; grid-template-columns: 1fr minmax(170px, 26%); grid-template-rows: auto auto 1fr auto; column-gap: 10px; }
  .dtop { grid-column: 1 / 3; }
  .dstatus { grid-column: 2; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; }
  #dStage { grid-column: 1; grid-row: 2 / 5; margin: 2px 0 0; }
  .dinvite { grid-column: 2; grid-row: 3; align-self: start; }
  .dinvite .drow { flex-direction: column; }
  .dbar { grid-column: 2; grid-row: 4; flex-direction: column; }
}