From fbdd9c49eef77bbf81535a2e34f42a44c89d328b Mon Sep 17 00:00:00 2001
From: Aaron Wood <aaron.wood@mac.lan>
Date: Fri, 10 Apr 2026 00:23:25 -0400
Subject: [PATCH] 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         | 10 ++++++++++
 client/src/components/InfoPanel.module.css |  5 +++++
 client/src/pages/CampaignView.module.css   |  5 +++++
 client/src/theme.css                       |  6 ++++++
 4 files changed, 26 insertions(+)

diff --git a/client/src/components/DiceTray.tsx b/client/src/components/DiceTray.tsx
index 9cc3da3..6eb2803 100644
--- a/client/src/components/DiceTray.tsx
+++ b/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(",");
 
diff --git a/client/src/components/InfoPanel.module.css b/client/src/components/InfoPanel.module.css
index 251a023..ebe0fdd 100644
--- a/client/src/components/InfoPanel.module.css
+++ b/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;
diff --git a/client/src/pages/CampaignView.module.css b/client/src/pages/CampaignView.module.css
index 9027498..78f7034 100644
--- a/client/src/pages/CampaignView.module.css
+++ b/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;
diff --git a/client/src/theme.css b/client/src/theme.css
index 58a2023..6e107ff 100644
--- a/client/src/theme.css
+++ b/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;