From 40b0e21d9dfb8865a5015cc614642ebab34934c2 Mon Sep 17 00:00:00 2001
From: claudecode <claudecode@localhost>
Date: Wed, 1 Jul 2026 00:29:18 -0400
Subject: [PATCH] fix: dice view readability and pool builder cleanup

Remove d100 from the dice pool builder (percentile section is
unaffected). Switch die buttons, pool display, and result output
to JetBrains Mono for mechanical/numeric readability, and lay out
the pool builder buttons in a fixed 7-column grid to match the
remaining die count.
---
 public/css/styles.css | 13 ++++++++-----
 public/index.html     |  1 -
 public/js/dice.js     |  4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index d4391b9..abc1e3f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -662,7 +662,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .dice-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(7, 1fr);
   gap: 8px;
   margin-bottom: 12px;
 }
@@ -673,7 +673,7 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 3px;
   background: var(--bg);
   color: var(--text-secondary);
-  font-family: var(--font-heading);
+  font-family: var(--font-mono);
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-align: center;
@@ -707,7 +707,7 @@ h1, h2, h3, h4, h5, h6 {
   border: 1px solid var(--border);
   border-radius: 3px;
   background: var(--bg);
-  font-family: var(--font-heading);
+  font-family: var(--font-mono);
   font-size: 0.95rem;
   letter-spacing: 0.04em;
   color: var(--accent);
@@ -735,6 +735,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .pool-result-groups {
   width: 100%;
+  font-family: var(--font-mono);
   font-style: italic;
   font-size: 0.85rem;
   color: var(--text-secondary);
@@ -746,7 +747,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .pool-group-type {
-  font-family: var(--font-heading);
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -809,11 +810,12 @@ h1, h2, h3, h4, h5, h6 {
   border: 1px solid var(--border);
   border-radius: 3px;
   background: var(--bg);
+  font-family: var(--font-mono);
   text-align: center;
 }
 
 .dice-total {
-  font-family: var(--font-heading);
+  font-family: var(--font-mono);
   font-size: 2.2rem;
   font-weight: 600;
   color: var(--accent);
@@ -822,6 +824,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .dice-breakdown {
   margin-top: 6px;
+  font-family: var(--font-mono);
   font-style: italic;
   font-size: 0.8rem;
   color: var(--text-secondary);
diff --git a/public/index.html b/public/index.html
index c936b9c..0a23eee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -233,7 +233,6 @@
             <button class="die-btn" data-sides="10">d10</button>
             <button class="die-btn" data-sides="12">d12</button>
             <button class="die-btn" data-sides="20">d20</button>
-            <button class="die-btn" data-sides="100">d100</button>
             <button class="die-btn" data-sides="2">d2</button>
           </div>
 
diff --git a/public/js/dice.js b/public/js/dice.js
index 13ffede..3de89a6 100644
--- a/public/js/dice.js
+++ b/public/js/dice.js
@@ -1,9 +1,9 @@
 // Mythic Oracle — Dice: pool builder, custom roll, percentile, ability score
 // Pure frontend — no backend calls.
 
-const dicePool = { 4: 0, 6: 0, 8: 0, 10: 0, 12: 0, 20: 0, 100: 0, 2: 0 };
+const dicePool = { 4: 0, 6: 0, 8: 0, 10: 0, 12: 0, 20: 0, 2: 0 };
 const POOL_MAX = 25;
-const DIE_ORDER = [4, 6, 8, 10, 12, 20, 100, 2];
+const DIE_ORDER = [4, 6, 8, 10, 12, 20, 2];
 
 function addDie(sides) {
   const total = DIE_ORDER.reduce((s, d) => s + dicePool[d], 0);