adding classification and division yard updates, train collisions, engine and car updates, turnout improvements.

src/web/play.html

@@ -33,6 +33,15 @@ header button:hover{border-color:#4d6fa8}
    explicitly not a target. Previously the hand was a list of bare names and the Department slots a
    second list, so nothing looked like a card at all. */
 .cardrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px}
+/* THE YARDS. Rolling stock is finite and the Classification Yard only comes back when the Division
+   Yard is bare, so a player has to be able to watch the supply run down. */
+.yard{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 6px}
+.stock{background:#1c2129;border:1px solid #39424e;border-radius:4px;padding:2px 7px;font-size:11px}
+.stock b{color:#e6e9ee}
+.stock .ld{color:#8fd6a0}
+.stock .mt{color:#9fb6d8}
+.stock.none{opacity:.4}
+.yard.bare{outline:1px dashed #e0a060;outline-offset:3px;border-radius:4px;padding:3px}
 .handcard{background:#242c36;border:1px solid var(--line);border-radius:5px;
   padding:5px 8px;font-size:11px;min-width:96px;position:relative}
 .handcard:focus{outline:2px solid #4d6fa8;outline-offset:1px}
@@ -213,6 +222,13 @@ ol.tc-phases{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:w
       <h3>Department Cards (face up)</h3><div id="depts" class="cardrow ref">—</div>
     </section>
     <section><h2 class="big">Your Track Supply</h2><div id="supply"></div></section>
+    <section><h2 class="big">The Yards</h2>
+      <h3>Division Yard <span class="dim" id="divtot"></span></h3>
+      <div id="divyard" class="yard"></div>
+      <h3>Classification Yard <span class="dim" id="clstot"></span></h3>
+      <div id="clsyard" class="yard"></div>
+      <div class="dim" id="yardnote"></div>
+    </section>
     <section><h2>Blocked — why nothing is moving</h2><ul class="blocked" id="blocked"></ul></section>
     <section><h2>Facilities</h2><div id="facs"></div></section>
   </div>