/* ==========================================================================
   DM SCREEN — the Dungeon Master's control desk on the Live Table. The same
   parchment/ink vocabulary as the shared board, but set apart as "the DM's side
   of the book": a gilt-edged panel with its own header, the round-loop run bar,
   and a per-combatant control roster. Token spacing only, zero inline styles,
   44px tap targets on the phone, AA in both light + candlelight (all colour is
   drawn from painted tokens, which already carry both themes). Reduced motion is
   handled globally in base.css.
   ========================================================================== */

.dm-screen{
  border:1px solid var(--rule);
  border-top:3px solid var(--gold-deep);
  border-radius:10px;
  background:var(--panel);
  padding:var(--s3);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}

.dm-screen-head{
  display:flex;
  align-items:baseline;
  gap:var(--s2) var(--s3);
  flex-wrap:wrap;
}
.dm-screen-head > h2{margin:0}
.dm-screen-head .login-kicker{width:100%;color:var(--gold-deep)}
.dm-seat-party{margin-left:auto;flex:0 0 auto}

/* ---------- the round-loop run bar ---------- */
.dm-runbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s2);
  padding:var(--s2) var(--s3);
  border:1px solid var(--rule-soft);
  border-radius:8px;
  background:var(--panel-2);
}
.dm-round{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:2px var(--s2);
  border-radius:6px;
}
.dm-round .label{color:var(--ink-faint)}
.dm-round b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);line-height:1}
.dm-round.is-live{
  background:color-mix(in srgb, var(--gold) 16%, var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-deep) 45%, transparent);
}
.dm-whose{
  font-family:var(--font-scribal);font-style:italic;
  color:var(--gold-deep);
  margin-right:auto;
}
.dm-runbar-turn{display:inline-flex;gap:var(--s2)}
.dm-endenc{color:var(--rubric)}

/* ---------- combatant control roster ---------- */
.dm-roster{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--s2);
}
.dm-cbt{
  border:1px solid var(--rule);
  border-radius:9px;
  background:var(--panel-2);
  padding:var(--s2) var(--s3);
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
.dm-cbt.is-monster{background:color-mix(in srgb, var(--rubric) 5%, var(--panel-2))}
.dm-cbt.is-turn{
  border-color:color-mix(in srgb, var(--gold-deep) 60%, var(--rule));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}

.dm-cbt-line{
  display:flex;
  align-items:center;
  gap:var(--s2);
  flex-wrap:wrap;
}
.dm-order-ctl{display:inline-flex;gap:4px;flex:0 0 auto}
.dm-init{display:inline-flex;flex-direction:column;gap:2px;flex:0 0 auto}
.dm-init .label{color:var(--ink-faint)}
.dm-cbt-name{
  font-family:var(--font-body);
  color:var(--ink);
  flex:1 1 8ch;min-width:6ch;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.dm-kind{color:var(--rubric);text-transform:uppercase}
.dm-kind--pc{color:var(--verdigris)}
.dm-cbt-ap{display:inline-flex;align-items:center;gap:var(--s2);flex:0 0 auto}

/* gilded AP pips + steppers (the desk's own, sized for a fast tap) */
.dm-ap-pips{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
.dm-pip{
  width:11px;height:11px;transform:rotate(45deg);
  border:1px solid var(--gold-deep);background:var(--panel);border-radius:2px;
}
.dm-pip.is-full{background:linear-gradient(180deg,var(--gold-hi),var(--gold));box-shadow:var(--pip-glow)}
.dm-ap-step{display:inline-flex;gap:4px}

/* small square control buttons — parchment chips with an ink glyph. 44px tap
   targets everywhere the DM taps mid-combat; the dense --field-compact size is
   reserved for true desktop (≥760px), per the token doctrine in tokens.css. */
.dm-apbtn,.dm-mini{
  min-width:var(--field);height:var(--field);
  padding:0 8px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--panel);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1rem;line-height:1;
  cursor:pointer;
}
.dm-apbtn{width:var(--field);padding:0}
.dm-mini:hover,.dm-apbtn:hover{background:var(--panel-2)}
.dm-mini:active,.dm-apbtn:active{transform:translateY(1px)}
.dm-mini:disabled{opacity:.45;cursor:default}
.dm-turn{color:var(--gold-deep)}
.dm-remove{color:var(--rubric);margin-left:auto}

/* monster vitals control row */
.dm-cbt-vitals{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--s2) var(--s3);
  padding-top:var(--s2);
  border-top:1px solid var(--rule-soft);
}
.dm-hp{font-family:var(--font-body);color:var(--ink);white-space:nowrap}
.dm-hp b{font-size:1.15rem}
.dm-hp small{color:var(--ink-faint)}
.dm-hp.is-down b{color:var(--rubric)}
.dm-temp{color:var(--ward)}
.dm-dmg-heal{display:inline-flex;align-items:center;gap:4px}
.dm-hit{color:var(--rubric)}
.dm-heal{color:var(--verdigris)}

.dm-field{display:inline-flex;flex-direction:column;gap:2px}
.dm-field--inline{flex-direction:row;align-items:center;gap:var(--s1)}
.dm-field .label{color:var(--ink-faint)}
.dm-field--wide{flex:1 1 14ch}
.dm-field--grow{flex:1 1 12ch}

/* number + text fields — inked wells */
.dm-num,.dm-text{
  min-height:var(--field);
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--panel);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:4px 8px;
}
.dm-num{width:5ch;text-align:center}
/* strip the native spinner so 2+ digit defaults (HP 10 / AC 12 / AP 6) aren't
   clipped behind the arrows — same reset the rest of the app's number wells use */
.dm-num::-webkit-inner-spin-button,.dm-num::-webkit-outer-spin-button{appearance:none;margin:0}
.dm-text{width:100%}
.dm-num:focus,.dm-text:focus{outline:2px solid var(--gold-deep);outline-offset:1px;border-color:var(--gold-deep)}

/* ---------- add-a-foe form ---------- */
.dm-add{
  border:1px dashed var(--rule);
  border-radius:9px;
  background:var(--panel-2);
  padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
}
.dm-sub{margin:0;color:var(--ink-faint)}
.dm-add-grid{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s3);
}
.dm-add-btn{flex:0 0 auto}

/* ---------- true desktop (≥760px): the dense-table compaction the token
   doctrine allows; touch tablets + phones keep the 44px controls above ------ */
@media (min-width:760px){
  .dm-apbtn,.dm-mini{min-width:var(--field-compact);height:var(--field-compact)}
  .dm-apbtn{width:var(--field-compact)}
  .dm-num,.dm-text{min-height:var(--field-compact)}
}

/* ---------- phone: let the wide fields and the whose-turn line reflow ------- */
@media (max-width:520px){
  .dm-whose{margin-right:0;width:100%;order:5}
  .dm-field--grow,.dm-field--wide{flex:1 1 100%}
}