/* Rules added while playing the finished game screen through end to end: the small corrections that only
   show up once there is a real table in front of you. The bulk of the look lives in /style.css. */

/* ------------------------------------------------------------------ money on a narrow shelf */

.bills .more { align-self: center; color: var(--ink-3); font-weight: 800; letter-spacing: 0.1em; }
.tray .bills .more { color: rgba(246, 239, 220, 0.6); }

/* ------------------------------------------------------------------ the side rail */

/* The opponents scroll when the dock is tall; a fade and a word say there is more below. */
.opps { scroll-behavior: smooth; scroll-snap-type: y proximity; scroll-padding: 12px 0 6px; }
.opps::-webkit-scrollbar { width: 6px; }
.opps::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }
/* Scrolling lands on a whole card, never halfway through someone's name and cash. */
.opp { scroll-snap-align: start; }
/* game.js adds .more while the column overflows and .at-end once it is scrolled to the bottom. */
.opps.more::after {
  content: 'more below'; flex: none; align-self: stretch; position: sticky; bottom: -6px; z-index: 3;
  /* A flex item still takes a row gap however negative its margin is, so the margin swallows the gap as
     well: otherwise switching the cue on grows the content by 8px and keeps the cue on. */
  height: 34px; margin-top: calc(-34px - 8px); margin-bottom: 0; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 239, 220, 0.8);
  background: linear-gradient(rgba(36, 24, 13, 0), rgba(36, 24, 13, 0.88) 55%, rgba(36, 24, 13, 0.96));
  transition: opacity 0.2s;
}
.opps.more.at-end::after { opacity: 0; }

/* ------------------------------------------------------------------ the dock scrolls: say so */

.dock-body { scrollbar-width: thin; scrollbar-color: rgba(22, 19, 14, 0.3) transparent; }
.dock-body::-webkit-scrollbar { width: 6px; }
.dock-body::-webkit-scrollbar-thumb { background: rgba(22, 19, 14, 0.28); border-radius: 3px; }
/* A short rail can push a secondary button (pay the fine, use the jail card) under the footer with nothing to
   show for it. game.js adds .more/.at-end here too; the fade names the way out. */
.dock-body.more::after {
  content: 'scroll for more'; flex: none; align-self: stretch; position: sticky; bottom: -12px; z-index: 3;
  height: 30px; margin-top: calc(-30px - 10px); pointer-events: none; /* ...and the gap with it: see .opps */
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  background: linear-gradient(rgba(246, 239, 220, 0), var(--card) 60%);
  transition: opacity 0.2s;
}
.dock-body.more.at-end::after { opacity: 0; }

/* A cue is not enough for the button that unblocks you: at 1366x768 with three opponents the dock body is
   133px and a debt panel is 348px, so "Raise funds for me" sat entirely below the fold. game.js opens such a
   panel already scrolled to its action; this says there is wording above it, as the other fade says below. */
.dock-body.more::before {
  content: ''; flex: none; align-self: stretch; position: sticky; top: -12px; z-index: 3;
  height: 22px; margin-bottom: calc(-22px - 10px); pointer-events: none;
  background: linear-gradient(var(--card), rgba(246, 239, 220, 0));
  opacity: 0; transition: opacity 0.2s;
}
.dock-body.more.off-top::before { opacity: 1; }

/* ------------------------------------------------------------------ the notes (ui/tutorial.js, round 10) */
.tour-focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.coach { position: fixed; z-index: 70; width: min(340px, calc(100vw - 24px)); background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 0 0 4px rgba(230, 180, 80, 0.55), 0 20px 44px rgba(0, 0, 0, 0.55); padding: 14px 16px 12px; }
.coach[hidden] { display: none; }
.coach.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.coach.sheet { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
.coach-count { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.coach-count em { font-style: normal; margin-left: 8px; opacity: 0.8; }
.coach h3 { font-size: 1.12rem; font-weight: 800; margin: 3px 0 6px; }
.coach-text { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.coach .btns { margin-top: 12px; justify-content: space-between; }

/* ------------------------------------------------------------------ the rail has no dead space */

/* The panel reaches the bottom of the rail rather than stopping short and leaving bare dark board: the action on top,
   and at the foot the last three things that happened and the tools (round 8, the owner: it was crowded). */
.dock-body { flex: 1 1 auto; }
/* The action takes the room it needs; the feed takes the rest, down to nothing (round 8, the owner). */
.dock-body.with-feed { flex: 0 1 auto; }
.dock-feed { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; gap: 8px; width: 100%; padding: 7px 14px 8px; border-top: 1.5px dashed var(--line); text-align: left; color: var(--ink-3); cursor: pointer; }
.dock-feed ol { flex: 1; min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.dock-feed li { flex: none; }
.dock-feed ol { -webkit-mask-image: linear-gradient(transparent, #000 1.4em); mask-image: linear-gradient(transparent, #000 1.4em); } /* the oldest line fades out rather than being sliced */
.dock-feed li { font-size: 0.78rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-feed li:last-child { color: var(--ink); font-weight: 600; }
.dock-feed > .ic { flex: none; width: 16px; height: 16px; opacity: 0.5; margin-bottom: 2px; }
.dock-feed:hover { background: #fbf5e4; }
.dock-feed:hover > .ic { opacity: 0.9; }
/* How this works: the ? at the end of the dock's header (it had a footer of its own). */
.dock-head .dock-help { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -8px -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.75; }
.dock-head .dock-help:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.dock-head .dock-help .ic { width: 19px; height: 19px; }

/* ------------------------------------------------------------------ deed rack readability */

/* Cards in a rack are read and tapped, so they sit side by side rather than fanned. */
.rack .fam, .pile .mini, .tray-deeds .fam { flex: none; }
.deed-nav .btn { flex: 1 1 0; }

/* Eight deeds do not fit the shelf: snap by family, and fade the right edge so the overflow is unmissable. */
.tray-deeds { scroll-behavior: smooth; scroll-snap-type: x proximity; }
.tray-deeds .fam { scroll-snap-align: end; }
.tray-deeds::-webkit-scrollbar { height: 6px; }
.tray-deeds::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
.tray-deeds.more::after {
  content: '›'; flex: none; align-self: stretch; position: sticky; right: -12px; z-index: 3;
  width: 40px; margin-left: -40px; margin-right: -12px; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 3px;
  font-size: 1.5rem; font-weight: 800; line-height: 1; color: rgba(246, 239, 220, 0.85);
  background: linear-gradient(90deg, rgba(10, 53, 38, 0), rgba(10, 53, 38, 0.92) 62%);
  transition: opacity 0.2s;
}
.tray-deeds.more.at-end::after { opacity: 0; }

/* In the tray column the same shelf wraps and scrolls downward, so the cue has to point that way too. */
@media (min-width: 1200px) {
  /* No snapping down a wrapped rack: the shelf's x-snap would otherwise park it 10px past the first row. */
  .tray-deeds { scroll-snap-type: none; }
  /* A tray column at 1366 is 238px inside and a three-lot family with its "3/3" badge is 259: the badge was
     cut off against a rack that scrolls the other way. The family wraps instead, badge under the cards. */
  .tray-deeds .fam, .tray-deeds .fam-cards { flex-wrap: wrap; max-width: 100%; }
  .tray-deeds .fam { row-gap: 3px; }
  /* A set of three in one row (round 8, the owner): the deeds narrow with the column, down to about 46px on a
     1280px screen, and the "3/3" sits on the set's corner instead of beside it. */
  .tray-deeds { container-type: inline-size; padding-inline: 7px !important; }
  .tray-deeds .fam { position: relative; padding: 0; }
  /* ... on a grid of columns spread evenly across the shelf and filled from the left (round 8, the owner: "left
     aligned ... they spread out evenly"): three columns at 1280px, more where the shelf is wider. A set spans as many
     columns as it has deeds and is never split across rows; all four railroads take a row of their own. */
  .tray > .tray-deeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(52px, calc((100% - 14px) / 3)), 1fr)); gap: 14px 7px !important; justify-items: center; align-content: start; }
  .tray-deeds .fam { display: grid; grid-template-columns: subgrid; grid-column: span 1; justify-items: center; row-gap: 7px; }
  .tray-deeds .fam.n2 { grid-column: span 2; }
  .tray-deeds .fam.n3 { grid-column: span 3; }
  .tray-deeds .fam.n4 { grid-column: 1 / -1; }
  .tray-deeds .fam-cards { display: contents; }
  .tray-deeds .empty, .tray-deeds.more::after { grid-column: 1 / -1; }
  .tray-deeds .fam-count { position: absolute; z-index: 5; top: -9px; right: -5px; }
  /* Shaped like the spaces on the board (1 wide, 1.58 deep, the colour bar the top 21%: scene/layout.js), with room
     between them (round 8, the owner). */
  .tray-deeds .fam-cards { gap: 7px; }
  .tray-deeds .mini { --w: min(52px, calc((100cqw - 14px) / 3)); width: var(--w); height: calc(var(--w) * 1.58); aspect-ratio: auto; }
  .tray-deeds .mini .band { height: calc(var(--w) * 0.332); }
  .tray-deeds .mini .nm { font-size: 0.5rem; }
  .tray-deeds .mini .pr { font-size: 0.54rem; padding-bottom: 2px; }
  /* "MORTGAGED" is wider than these cards (the owner: it spilled out): the faded band and the red hatching say it. */
  .tray-deeds .mini.mortgaged .pr { visibility: hidden; }
  .tray-deeds::-webkit-scrollbar { width: 6px; }
  .tray-deeds.more::after {
    content: 'more below'; flex: 1 0 100%; position: sticky; right: auto; bottom: -10px; z-index: 3;
    width: auto; height: 30px; margin: -30px 0 0; padding-bottom: 1px;
    display: flex; align-items: flex-end; justify-content: center;
    font-size: 0.62rem; letter-spacing: 0.16em;
    background: linear-gradient(rgba(10, 53, 38, 0), rgba(10, 53, 38, 0.92) 62%);
  }
}

/* ------------------------------------------------------------------ auction */

/* The whole panel has to clear the dock without pushing the bid row under the footer, so it runs tight. */
.auction { gap: 7px; }
.auction .explain { padding: 5px 9px; font-size: 0.82rem; line-height: 1.3; }
/* "Bids in" is answering "who", so each chip carries a name, not only a 22px pawn. */
.bidder b { font-size: 0.74rem; font-weight: 700; max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bidder { padding: 1px 5px 1px 3px; gap: 3px; }
.bidder .tok-sm { height: 18px; }
.bidders { gap: 4px; }

/* What a debtor is holding up, and what the clock in the header will do to them. */
.held { display: flex; flex-direction: column; gap: 6px; border-bottom: 1.5px dashed var(--line); padding-bottom: 9px; }
.held-lot { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; line-height: 1.3; }
.held-lot .ic { flex: none; margin-top: 2px; }
/* The label is the point of the countdown, so the heading yields first if the header runs out of room. */
.clock-note { flex: none; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; margin-left: auto; white-space: nowrap; }
.dock-head { gap: 6px; }
.dock-head .clock-note + .timer { margin-left: 4px; }
.dock-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Three things in a 306px header truncated the heading to "YOU OW…": it gives up size before it gives up words. */
.dock-head:has(.clock-note) h2 { font-size: 0.86rem; letter-spacing: 0.04em; }

/* Your own jail turn, said out loud wherever you are looking. */
.lead.jailed { display: flex; gap: 8px; align-items: flex-start; background: var(--ink); color: var(--card); border-radius: 8px; padding: 7px 10px; font-size: 0.92rem; }
.lead.jailed .ic { flex: none; margin-top: 2px; color: var(--gold); }
.bidrow .moneyfield { flex: 1 1 82px; min-width: 0; }
.bidrow .btn { flex: 0 0 auto; padding-inline: 0.8em; white-space: nowrap; }
.bidcash { flex: 1 0 100%; color: var(--ink-3); font-size: 0.78rem; margin-top: -2px; }

/* ------------------------------------------------------------------ my own seat in the tray */

/* Opponents wear their state on their card; so does your own seat now. */
.tray-tags { display: flex; gap: 5px; margin-top: 3px; }
.tray-tags .tag { font-size: 0.62rem; padding: 0 5px; }
/* Nothing else says the board itself is tappable, and on touch there is no cursor or hover label to say it. */
.tray-tip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 1px 5px 1px 6px;
  border: 1px dashed rgba(246, 239, 220, 0.35); border-radius: 99px; background: transparent;
  color: rgba(246, 239, 220, 0.72); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.tray-tip:hover { color: var(--card); border-color: rgba(246, 239, 220, 0.6); }
.tray-tip .ic { width: 13px; height: 13px; } .tray-tip .ic:last-child { opacity: 0.7; }

/* ------------------------------------------------------------------ the drawn card */

/* Nothing competes with a card that is being read. */
body:has(.cardlayer.show) .replay { opacity: 0; transition: opacity 0.2s; }

/* ------------------------------------------------------------------ the deed sheet's right column */

/* The card is 300px wide; the column beside it used to hold one owner chip and then half a sheet of bare
   cream. It now carries the rest of the family and the rent that is actually being charged. */
.deed-group { display: flex; flex-direction: column; gap: 8px; }
.deed-group .rule-h { margin: 4px 0 0; }
.group-lots { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.group-lots li { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 68px; }
.group-lots li.here .mini { box-shadow: 0 0 0 2.5px var(--gold), 0 2px 4px rgba(0, 0, 0, 0.45); }
.lot-who { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; font-size: 0.66rem; font-weight: 700; line-height: 1.2; }
.lot-who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-who .tok-sm { height: 15px; }
.lot-who em { font-style: italic; font-weight: 500; color: var(--ink-3); }
.rent-now { display: flex; gap: 8px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 7px 11px; }
.rent-now .ic { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 2px; }
.rent-now > span { display: flex; flex-direction: column; min-width: 0; }
.rent-now small { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.rent-now b { font-size: 1.25rem; font-weight: 800; color: var(--good); line-height: 1.1; }
.rent-now span span { font-size: 0.8rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ deed pips */

/* Railroads and utilities have no colour of their own: an unmarked chip reads as a slot that failed to
   load, so they wear their glyph instead. */
.pip.plainlot { background: linear-gradient(var(--band) 0 38%, var(--card-2) 38%); }
.pip .ic { position: absolute; left: 50%; top: 58%; width: 10px; height: 10px; transform: translate(-50%, -50%); color: var(--ink); stroke-width: 2.4; }
.pip.m .ic { color: var(--ink-3); }

/* ------------------------------------------------------------------ the net-worth chart */

/* Left with the legend, not pushed right: the sheet's close button floats over that corner. */
.legend .zeroless { color: var(--ink-3); font-size: 0.74rem; font-style: italic; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 899px) {
  /* There is no rail to fill on a phone: the dock ends where its buttons end, and the ledger is a tap away. */
  .dock-feed { display: none; }

  /* Seven stacks of notes do not fit a phone: shrink them and let the row clip rather than push the page wide. */
  .tray-cash { min-width: 0; overflow: hidden; }
  .tray-cash .bills { gap: 8px; min-width: 0; }
  .tray-cash .stack { width: 36px; height: 24px; }
  .tray-cash .note { width: 33px; height: 19px; }
  .tray-cash .note b { font-size: 0.56rem; }
  .tray-cash .stack em { font-size: 0.56rem; }

  /* The card, who drew it and "tap to put it away" need to stack without touching. */
  .cardveil { gap: 36px; }
  .drawn-who { bottom: -24px; font-size: 0.78rem; }

  /* The board hint is a button (tap it to dismiss it for good), so it obeys the 40px thumb bar like the rest.
     It stays visually light: the extra height is padding, not ink. */
  .tray-tip { min-height: 40px; padding: 1px 10px 1px 11px; }
}

/* ------------------------------------------------------------------ a short rail

   The rail carries the camera bar, every opponent and my action dock, and at 1366x768 that is 714px for
   what four opponents (474) and a dock (294) want 768 of. The list scrolls, so nothing was lost, but the
   "more below" fade sat permanently across the fourth player's name and cash, which is the one thing a
   player card exists to show. The cards give up the padding instead: at this height a card is 76px rather
   than 98, four of them fit, and the fade only appears in the games that really do have more. */
@media (min-width: 900px) and (max-height: 920px) {
  .opps { gap: 8px; padding: 10px 12px 4px 13px; }
  .opp { padding: 3px 10px 4px 13px; border-radius: 9px; }
  .opp-main { min-height: 32px; gap: 8px; }
  .opp-main .tok-md { height: 30px; }
  .opp-money b { font-size: 1.04rem; }
  .opp-row { padding-top: 3px; }
  .opp-foot { padding-top: 3px; }
  .opp-pips { min-height: 16px; }
  /* What the four cards give up, the dock takes: its panel then holds the whole of a turn without a fade.
     The ledger tail asks for nothing here — it grows into whatever the actions leave and no further, rather
     than costing 17px it cannot use and raising a "scroll for more" over the roll button. */
  .dock-body { padding: 9px 14px; gap: 8px; }
  .dock-feed { padding-block: 5px 6px; }
}

/* However few or many they are, the cue never lands on the last card's own name: the list keeps a strip of
   panel under it for the fade to sit on. (Not on a phone, where the opponents are a strip that scrolls
   sideways and the cue never appears at all.) */
@media (min-width: 900px) { .opps.more { padding-bottom: 30px; } }

/* ------------------------------------------------------------------ estate modes: + Houses, − Houses, Mortgage, Lift */

/* The tools, the dock's last strip, so the modes, Trade and Done never scroll away: one row of icons (round 8). */
.dock > .estate { flex: none; padding: 8px 10px 10px; border-top: 1.5px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
/* In the dock, Mortgage and Lift side by side and Trade under them; in the tray, Build and Sell (round 8, the owner). */
.dock-tools { display: flex; flex-direction: column; gap: 6px; }
.tool-pair { display: flex; gap: 6px; }
.tool { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px;
  border: 1.5px solid var(--ink); border-radius: 9px; background: var(--paper); box-shadow: 0 2px 0 var(--ink); color: var(--ink); line-height: 1.1; }
.tool .ic { flex: none; width: 19px; height: 19px; }
.tool-t { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
/* In the dock the word sits dead centre with the icon just before it (round 8, the owner: Trade looked off-centre). */
.dock-tools > .tool { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 8px; }
.dock-tools > .tool > .ic { justify-self: end; }
.tool b { font-size: 0.86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tool small { font-size: 0.64rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* The tray's pair: icon over word, so two fit the narrow column. */
.tray-tools { flex: none !important; gap: 6px !important; padding: 7px !important; align-items: stretch !important; } /* both the same size (the owner) */
/* Build and Sell in the tray, Mortgage and Lift in the dock: icon over word, all on the button's centre line (the
   owner: beside the word, the lock pulled it off centre). */
.tray-tools .tool, .tool-pair .tool { flex-direction: column; gap: 2px; padding: 5px 4px 4px; min-height: 50px; }
.tray-tools .tool-t, .tool-pair .tool-t { align-items: center; }
.tray-tools .tool b, .tool-pair .tool b { font-size: 0.78rem; }
.tray-tools .tool small, .tool-pair .tool small { font-size: 0.6rem; }
.tool:hover:not(:disabled) { background: #fff6d8; }
.tool:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.tool:disabled { border-style: dashed; box-shadow: none; opacity: 0.6; cursor: not-allowed; }
.tool[aria-pressed='true'] { background: #ffd35a; box-shadow: 0 0 0 3px rgba(255, 211, 90, 0.45), 0 2px 0 var(--ink); }
.tool.sell[aria-pressed='true'], .tool.mortgage[aria-pressed='true'] { background: #9be8a4; box-shadow: 0 0 0 3px rgba(126, 224, 138, 0.45), 0 2px 0 var(--ink); }
.tool[aria-pressed='true'] small { color: var(--ink-2); }
.tool .badge { position: absolute; top: -8px; right: -6px; }
/* In an auction: one compact row, icon over word, so the bid box keeps the room. */
.dock-tools.row { flex-direction: row; }
.dock-tools.row .tool-pair { display: contents; }
.dock-tools.row .tool { display: flex; flex-direction: column; gap: 1px; padding: 4px 3px 3px; min-height: 42px; }
.dock-tools.row .tool-t { align-items: center; }
.dock-tools.row .tool b { font-size: 0.74rem; }
.dock-tools.row .tool small { display: none; } /* why a greyed tool is off: in its tooltip here */
.dock > .estate:has(.dock-tools.row) { padding-block: 6px 7px; }
.estate-now { display: flex; align-items: center; gap: 10px; }
.estate-now p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.estate-now p > b { font-size: 0.92rem; }
.estate-now p > span { font-size: 0.8rem; color: var(--ink-2); }
.estate-total { font-variant-numeric: tabular-nums; }
.estate-now .btn { flex: none; min-width: 72px; min-height: 40px; }
/* The lit lots again as a row of chips: on a phone a lot on the board is 27px wide, too small to hit reliably. */
.estate-lots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.estate-lots:empty { display: none; }
.estate-lot { flex: none; min-height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 9px 3px 12px; position: relative;
  border: 1.5px solid var(--ink); border-radius: 7px; background: #fff6d8; font-size: 0.74rem; line-height: 1.1; text-align: left; overflow: hidden; }
.estate-lot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--band); border-right: 1.5px solid var(--ink); }
.estate-lot.gain { background: #e3f7e5; }
.estate-lot b { display: inline-flex; align-items: center; gap: 3px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.estate-lot b i { width: 9px; height: 9px; background: #2f8f3f; border: 1.2px solid var(--ink); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.estate-lot b i.hotel { width: 12px; background: linear-gradient(#ffe9a6, #e9b934 55%, #b88514); clip-path: none; }
.estate-lot:active { transform: translateY(1px); }
@media (max-width: 899px) {
  .dock > .estate { background: var(--card); }
}