Fix d100 multi-roll, Linux select styling, and color-scheme support

- d100 rolls now show correct number of percentile + d10 pairs (e.g. 3d100 = 6 dice)
- Add color-scheme: dark/light per theme for native browser controls
- Style select option elements explicitly for Linux Chrome compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

client/src/components/DiceTray.tsx

@@ -132,6 +132,16 @@ function buildNotation(expression: string, rolls: number[]): string | null {
 
   if (rolls.length === 0) return null;
 
+  // d100: show percentile die (tens) + d10 (ones) per roll
+  // notation format: "3d100+3d10@t1,t2,t3,o1,o2,o3"
+  if (sides === 100) {
+    const n = rolls.length;
+    const tens = rolls.map((v) => Math.floor(v / 10) * 10 || 100);
+    const ones = rolls.map((v) => v % 10 || 10);
+    const values = [...tens, ...ones].join(",");
+    return `${n}d100+${n}d10@${values}`;
+  }
+
   const count = rolls.length;
   const values = rolls.join(",");
 

client/src/components/InfoPanel.module.css

@@ -86,6 +86,11 @@
   font-family: "Alegreya", Georgia, serif;
 }
 
+.editSelect option {
+  background: var(--bg-modal);
+  color: var(--text-primary);
+}
+
 .editRow {
   display: flex;
   gap: 0.5rem;

client/src/pages/CampaignView.module.css

@@ -216,6 +216,11 @@
   font-family: "Alegreya", Georgia, serif;
 }
 
+.formSelect option {
+  background: var(--bg-modal);
+  color: var(--text-primary);
+}
+
 .formActions {
   display: flex;
   gap: 0.5rem;

client/src/theme.css

@@ -7,6 +7,8 @@
    ============================================================ */
 
 :root {
+  color-scheme: dark;
+
   /* --- Color components (for rgba() usage) --- */
   --gold-rgb: 201, 168, 76;
   --shadow-rgb: 0, 0, 0;
@@ -59,6 +61,8 @@
    Light Parchment — warm beige, like reading by daylight
    ============================================================ */
 [data-theme="light-parchment"] {
+  color-scheme: light;
+
   --gold-rgb: 140, 110, 40;
   --shadow-rgb: 80, 60, 30;
   --danger-rgb: 200, 60, 45;
@@ -101,6 +105,8 @@
    White — clean, minimal, near-white
    ============================================================ */
 [data-theme="white"] {
+  color-scheme: light;
+
   --gold-rgb: 154, 125, 48;
   --shadow-rgb: 0, 0, 0;
   --danger-rgb: 200, 60, 45;