/* ── Deeds ───────────────────────────────────────────────────────────────────
   A surveyor's desk on a phone held upright. Four bands, top to bottom: the
   other desks, your desk, your hand, and the strip of buttons that ends a turn.
   When somebody files something at you, a window covers the lot of it, because
   that is the only decision that matters until it is answered.

   Everything here is a token. The ten parcel hues are mixed in the card art
   (src/games/deeds/cards.js) out of the four table inks, never stated raw, so
   the whole deck follows the theme; this sheet only ever states neutrals.     */

/* Three bands and one rule: THE HAND NEVER MOVES. Everybody's land scrolls
   between the turn strip and the hand, because the desks grow all game and the
   phone does not; the cards you are holding and the buttons that end your turn
   are always in the same place under your thumb. */
.dd-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--sat) + var(--space-4)) var(--space-4) calc(var(--sab) + var(--space-3));
  background: var(--bg);
  position: relative;         /* the pending window is anchored to the screen */
}
.dd-board {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dd-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── the top strip: whose turn, how many plays are left, the two piles ───── */

.dd-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
}
.dd-turn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.dd-turn.is-you { color: var(--accent); }

.dd-plays { display: inline-flex; gap: var(--space-2); }
.dd-dot {
  width: 7px; height: 7px;
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-full);
}
.dd-dot.is-used { background: var(--accent); border-color: var(--accent); }

.dd-piles { display: inline-flex; gap: var(--space-4); }
.dd-pile { position: relative; display: inline-flex; }
.dd-pile-n {
  position: absolute; right: -2px; bottom: -4px;
  padding: 0 var(--space-1);
  font-size: var(--text-2xs);
  color: var(--dim);
  background: var(--bg);
}
.dd-pile-none {
  display: block;
  width: 28px; height: 39px;
  border: var(--hairline) dashed var(--line-2);
  border-radius: var(--radius-sm);
}

/* ── a desk: somebody's bank and their rows of land, all of it public ────── */

.dd-rivals { display: flex; flex-direction: column; gap: var(--space-3); }

.dd-rival, .dd-mine {
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.dd-rival.is-turn { border-color: var(--accent-line); background: var(--accent-dim); }
.dd-rival.is-out { opacity: 0.45; }
.dd-mine { background: var(--surface-2); }

/* A rival's head is a button: tap it and their parcels unfold from pills into
   the same lot-by-lot rows you read your own land in. Their land is public and
   the game turns on counting it, so it must be readable — just not all at once
   on a screen this size. */
.dd-rival-head, .dd-mine-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
}
.dd-who {
  flex: 1;
  font-size: var(--text-lg);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-hand-n, .dd-won {
  font-size: var(--text-xs);
  color: var(--dim);
}
.dd-hand-n::after { content: ' in hand'; }
.dd-rival.is-turn .dd-won { color: var(--accent); }

.dd-bank { display: inline-flex; align-items: center; gap: var(--space-2); }
.dd-bank-n { font-size: var(--text-md); color: var(--text); }
.dd-bank-cards { display: inline-flex; gap: 1px; }
.dd-coin {
  min-width: 13px;
  padding: 0 var(--space-1);
  font-size: var(--text-2xs);
  text-align: center;
  color: var(--dim);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
}

/* ── somebody else's land, folded into pills ─────────────────────────────── */

.dd-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dd-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
}
.dd-pill.is-done { border-color: var(--success-line); background: var(--surface-2); }
.dd-pill-n { font-size: var(--text-2xs); color: var(--dim); }
.dd-pill.is-done .dd-pill-n { color: var(--text); }
.dd-pill-b { font-size: var(--text-2xs); color: var(--accent); }

/* ── a row of land. One row per parcel, and a parcel is a row — the split is
      the whole strategy, so the screen never merges two rows of one name. ── */

.dd-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.dd-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
}
.dd-row:disabled { cursor: default; }
.dd-row.is-done { border-color: var(--success-line); }
.dd-row-mark { display: inline-flex; flex: none; }
.dd-row-name { flex: 1; font-size: var(--text-base); }
.dd-row-n { font-size: var(--text-xs); color: var(--dim); }
.dd-row-rent { font-size: var(--text-md); color: var(--accent); }
.dd-built {
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--dim);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
}
.dd-empty {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--mute);
}

/* ── the rail: the one question the table is asking you right now ────────── */

.dd-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--hairline) solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-dim);
}
.dd-ask {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.dd-act {
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
}
.dd-act.is-go { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dd-act.is-off { color: var(--mute); background: transparent; }

/* ── the hand. Nobody else ever sees a card in here. ─────────────────────── */

.dd-hand { margin-top: auto; }
.dd-holds { cursor: pointer; }

/* ── the strip that ends a turn ──────────────────────────────────────────── */

.dd-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.dd-btn {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
}
.dd-btn.is-loud { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dd-btn:disabled { opacity: 0.4; }
.dd-hint {
  flex: 1;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--dim);
}

/* ── the pending window ──────────────────────────────────────────────────────
   A filing is the only thing in this game that can arrive while you are doing
   something else, and the only thing that can be argued with. So it is not a
   toast and not a badge: it sits over the table until it is answered, and it
   shows every target, because an objection excuses one player and no others. */

.dd-window {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--sab) + var(--space-4));
  max-height: 76%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--hairline) solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dd-win-head { display: flex; align-items: center; gap: var(--space-3); }
.dd-filed { flex: 1; font-size: var(--text-base); color: var(--dim); }
.dd-win-cards { display: inline-flex; gap: var(--space-2); }

.dd-targets { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.dd-target {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
}
.dd-target.is-you { border-color: var(--accent-line); }
.dd-target.is-void { opacity: 0.5; }
.dd-stage {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.dd-owed { font-size: var(--text-md); color: var(--accent); }

/* the chain, one seal per objection: odd cancels, even lets it through */
.dd-chain { display: inline-flex; gap: var(--space-1); }
.dd-seal {
  width: 9px; height: 9px;
  border: 1.5px solid var(--red);
  border-radius: var(--radius-full);
}

.dd-answer { display: flex; gap: var(--space-3); }

/* ── settling up ─────────────────────────────────────────────────────────── */

.dd-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.dd-note { font-size: var(--text-xs); color: var(--dim); }
.dd-assets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dd-asset {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text);
  background: var(--surface-2);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
}
.dd-asset.is-sel { border-color: var(--accent); background: var(--accent-dim); }
.dd-asset-n { font-size: var(--text-md); color: var(--accent); }
.dd-asset-nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-pay-foot { display: flex; align-items: center; gap: var(--space-3); }
.dd-total { flex: 1; font-size: var(--text-md); color: var(--dim); }
.dd-total.is-ok { color: var(--success-text); }

/* ── the card faces ──────────────────────────────────────────────────────────
   Drawn in src/games/deeds/cards.js; these are the type sizes it draws into.
   A face has to hold at 44px — where only the mark and the corner value are
   drawn — and at 160px, where the name and the rent ladder appear.           */

.dd-card .dd-name {
  font-family: var(--font-sans);
  font-size: 9px;
  fill: var(--tt-card-ink);
}
.dd-card .dd-sub, .dd-card .dd-body {
  font-family: var(--font-sans);
  font-size: 6.5px;
  fill: var(--tt-card-ink);
  opacity: 0.66;
}
.dd-card .dd-figure {
  font-family: var(--font-mono);
  font-size: 34px;
  fill: var(--tt-card-ink);
}
.dd-card .dd-rent {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--tt-card-ink);
  opacity: 0.7;
}
.dd-card .dd-rent.is-full { opacity: 1; }
.dd-card .dd-rent-n {
  font-family: var(--font-mono);
  font-size: 5.5px;
  fill: var(--tt-card-ink);
  opacity: 0.45;
}
.dd-card .dd-rule { stroke: var(--tt-card-line); stroke-width: 1; fill: none; }

.dd-chip { display: block; overflow: visible; }
.dd-back-mark { stroke: var(--tt-card-line); }

/* ── landscape and wider screens ─────────────────────────────────────────────
   The desks and the hand are the two things that want room; on a phone turned
   sideways they sit next to each other rather than the hand being pushed off
   the bottom of a 390px-tall window. */
@media (min-width: 620px) {
  .dd-screen { max-width: var(--wrap); margin: 0 auto; }
  .dd-rivals { flex-direction: row; flex-wrap: wrap; }
  .dd-rival { flex: 1 1 240px; }
}