tweak

index.html

@@ -52,7 +52,6 @@
             <option value="terrain">Terrain</option>
             <option value="resources">Resources</option>
             <option value="ethnicity">Ethnicity</option>
-            <option value="pheromone">Trade trails</option>
             <option value="pressure">Population pressure</option>
             <option value="polities">Polities</option>
             <option value="technology">Technology</option>
@@ -68,6 +67,7 @@
           <div><dt>Ethnicities</dt><dd id="ethnicities">0</dd></div>
           <div><dt>Cities</dt><dd id="cities">0</dd></div>
           <div><dt>States</dt><dd id="polities">0</dd></div>
+          <div><dt>Wars</dt><dd id="wars">0</dd></div>
           <div><dt>Trade routes</dt><dd id="routes">0</dd></div>
           <div><dt>Farming knowledge</dt><dd id="farmingKnowledge">0.000</dd></div>
           <div><dt>Metallurgy knowledge</dt><dd id="metallurgyKnowledge">0.000</dd></div>
@@ -92,7 +92,7 @@
       <section class="panel history-panel">
         <div class="history-header">
           <h2>State lifespans</h2>
-          <span id="historyRange">—</span>
+          <span id="historyRange">-</span>
         </div>
         <canvas id="stateGraph" width="300" height="720" aria-label="State lifespan graph"></canvas>
       </section>

styles.css

@@ -284,7 +284,9 @@ canvas#world {
   position: absolute;
   z-index: 3;
   min-width: 180px;
-  max-width: 260px;
+  max-width: min(300px, calc(100% - 16px));
+  max-height: calc(100% - 16px);
+  overflow: auto;
   padding: 8px 10px;
   border: 1px solid #435057;
   border-radius: 6px;
@@ -292,7 +294,7 @@ canvas#world {
   color: var(--text);
   font-size: 11px;
   line-height: 1.35;
-  pointer-events: none;
+  pointer-events: auto;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
 }