poker-irongrid 1.3.0 → 2.0.0

package/README.md

@@ -85,6 +85,7 @@ npm install poker-irongrid
 | `defaultColor` | `string` | `'hsl(0, 0%, 100%)'` | Default background color for uncolored hands |
 | `defaultSelectedColor` | `string` | `'hsl(0, 0%, 85%)'` | Default color for selected hands without explicit color |
 | `evaluator` | `boolean` | `false` | Show hero's live equity against the hands on the grid (requires hero cards) |
+| `equityColors` | `boolean` | `true` | With `evaluator`, color villain hands by hero's equity against each combo: equal-width bands, one per color (`colors[0]` = hero's lowest equity). Hands you color yourself keep their color |
 | `subgrid` | `boolean` | `false` | Split the grid into 3x3 blocks (A–T, 9–6, 5–2) with space after the T and 6 rows/columns; spacing set by `--irongrid-subgrid-gap` (default `6px`) |
 | `preflopTableUrl` | `string \| null` | `null` | URL of poker-bitvaljs's `bench/preflop-table.bin` for exact preflop equity (Monte Carlo without it) |
 
@@ -216,13 +217,32 @@ The component includes comprehensive filtering options:
 - Visual distinction between colored and uncolored hands
 - Color statistics display
 
+### Design (2.0)
+
+- **Grid:** small tiles with rounded corners and 2px gaps (`--irongrid-cell-gap`, `--irongrid-cell-radius`),
+  two-character labels (AK above the diagonal is suited, below is offsuit). Hands in the range are filled with
+  their color (lighter when only some combos are in); hands outside it get a faint suited / offsuit / pair tint
+  (`--irongrid-cell-suited-bg`, `--irongrid-cell-offsuit-bg`, `--irongrid-cell-paired-bg`) and grey text.
+  Selected colored hands get a ring (`--irongrid-cell-ring-color`). With `subgrid`, the 3x3 blocks are set apart.
+- **Loading a range** (range select) fills a fresh grid with the first color; nothing is selected.
+- **Controls** (`showControls`): color chips showing each color's share of the range (%), combos (#) or hero's
+  equity (Eq), and × to clear; the share selected with All / Invert; a **Made × Draw** table (made hand by draw:
+  none, straight, flush, combo, backdoor flush) or **Made × Equity** (hero's equity against the hands, in 20%
+  bands); rank filters; and a suit matrix with Suited / Offsuit. Draws must use a hole card (poker-extval with
+  `holeCards`). Clicking any table, rank or suit cell selects its hands (ctrl/cmd adds, shift removes); a color
+  chip then colors the selection.
+
 ### Equity Evaluation
 
 When `evaluator={true}`, hero's equity is calculated live (asynchronously) whenever the hero cards,
 board, dead cards or the hands on the grid change; there is no button to press.
 - The summary shows hero vs. villain equity against every selected or colored combo
 - The color buttons' **Eq** mode shows hero's equity against each color's hands
-- Both come from one poker-bitvaljs `compareRangeHands` call: exact on the flop, turn and river
+- With `equityColors` (default), the villain hands are colored by hero's equity against each combo, in
+  one equal-width band per color (6 colors: 0–16.7%, 16.7–33.3%, … 83.3–100%, `colors[0]` lowest), so the
+  color buttons show each band's count, share and equity. Hands you color yourself keep their color; band
+  colors follow the selection and go away without hero cards
+- All of it comes from one poker-bitvaljs `compareRangeHands` call: exact on the flop, turn and river
   (a few ms), Monte Carlo preflop and on 1-2 card boards
 - Pass `preflopTableUrl` for exact, near-instant preflop equity (the table is ~1.1 MB, fetched once):
 

package/dist/poker-grid/PokerGridManager.d.ts

@@ -226,6 +226,52 @@ export class PokerGridManager {
      * @returns {Promise<Object>} Matching hands
      */
     getHandsByDraw(targetDraw: string, hands?: any, boardCards?: string[], boardLength?: number): Promise<any>;
+    /** The color of a hand's values (its hsl entry), or null. */
+    colorOf(values: any): any;
+    /**
+     * Combos in the range: those with a color or selected (dead combos are expected to be filtered out already).
+     * @param {Object} hands - Hands object (visible hands)
+     * @returns {string[]}
+     */
+    getRangeCombos(hands?: any): string[];
+    /**
+     * Select combos with the usual modifiers: plain replaces the selection, ctrl/cmd adds, shift removes.
+     * @param {Object} hands - Hands object
+     * @param {string[]} combos - Combos to select
+     * @param {{ctrl?: boolean, shift?: boolean}} modifiers
+     * @returns {Object} Updated hands object
+     */
+    selectCombos(hands: any, combos: string[], modifiers?: {
+        ctrl?: boolean;
+        shift?: boolean;
+    }): any;
+    /**
+     * Invert the selection within the range.
+     * @param {Object} hands - Hands object
+     * @returns {Object} Updated hands object
+     */
+    invertRangeSelection(hands: any): any;
+    /**
+     * Classify combos on a board for the Made x Draw table: made hand (row) and draw (column), from
+     * poker-extval with the hole cards, so draws must use a hole card. Cached per board.
+     * Made: highCard, onePair, twoPair, trips, straight, flush, fullHouse, quads, straightFlush.
+     * Draw (flop/turn only): combo (flush + straight draw), flush, straight, backdoor (backdoor flush draw,
+     * flop only), none.
+     * @param {string[]} combos - Combos
+     * @param {string[]} boardCards - Board (3-5 cards)
+     * @returns {Map<string, {made: string, draw: string}>}
+     */
+    classifyCombos(combos: string[], boardCards?: string[]): Map<string, {
+        made: string;
+        draw: string;
+    }>;
+    classifyCacheBoard: any;
+    classifyCache: Map<any, any>;
+    /** Uncached classifyCombos for one combo, or null if the cards clash. */
+    classifyCombo(combo: any, boardCards: any): {
+        made: string;
+        draw: string;
+    };
     /**
      * Apply color to hands.
      * @param {Object} hands - Current hands object
@@ -244,27 +290,59 @@ export class PokerGridManager {
     /**
      * Hero's equity against the villain hands on the grid, overall and per color, from one
      * poker-bitvaljs compareRangeHands call (each villain combo's result against hero's hand).
-     * Villain hands are the combos that are selected or colored; hands holding a dead, board or
-     * hero card are left out.
+     * Villain hands are the combos in the range (colored or selected); hands holding a dead, board or hero
+     * card are left out.
      * @param {Object} hands - Hands object
      * @param {string[]} heroCards - Hero cards (two)
      * @param {string[]} boardCards - Board cards (0-5)
      * @param {string[]} deadCards - Dead cards (may include hero and board cards)
      * @param {string[]} colors - Colors array
-     * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object}|null>}
-     *   Equities in percent (null when hero meets no villain combo); null without two hero cards.
+     * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object, byCombo: Object}|null>}
+     *   Equities in percent (null when hero meets no villain combo); byCombo is hero's equity against each
+     *   villain combo. Null without two hero cards.
      */
     calculateEquity(hands?: any, heroCards?: string[], boardCards?: string[], deadCards?: string[], colors?: string[]): Promise<{
         hero: number | null;
         villain: number | null;
         combos: number;
         byColor: any;
+        byCombo: any;
     } | null>;
+    /**
+     * Color villain combos by hero's equity against them: one equal-width band per color, colors[0] for
+     * hero's lowest equity (villain's strongest hands) up to the last color for hero's highest. With 6
+     * colors the bands are 0-16.7%, 16.7-33.3%, ... 83.3-100%.
+     * Only combos without a color, still holding the color this method gave them, or holding their base
+     * color (e.g. from loading a range) are recolored, so hand-applied colors stay. Combos this method colored
+     * that are no longer in `byCombo` (dead, or no equity) go back to their base color, or lose the color.
+     * @param {Object} hands - Hands object
+     * @param {Object} byCombo - Hero's equity (%) against each villain combo, from calculateEquity
+     * @param {string[]} colors - Colors, one per band
+     * @param {Map<string, string>} autoColors - Colors set by earlier calls (combo -> color)
+     * @param {Map<string, string>} baseColors - Colors combos had before banding (combo -> color)
+     * @returns {{hands: Object, autoColors: Map<string, string>, changed: boolean}}
+     */
+    applyEquityBands(hands: any, byCombo: any, colors: string[], autoColors?: Map<string, string>, baseColors?: Map<string, string>): {
+        hands: any;
+        autoColors: Map<string, string>;
+        changed: boolean;
+    };
     /**
      * Hero's equity against each color's hands, rounded (0 when a color has no hands).
      * @returns {Promise<Object>} Color equities object
      */
     calculateColorEquities(hands?: any, heroCards?: any, boardCards?: any, deadCards?: any, colors?: any): Promise<any>;
+    /**
+     * Load a predefined range as a fresh grid: every combo gets `color` and nothing is selected.
+     * @param {string} rangeName - Range name
+     * @param {Array} ranges - Ranges array
+     * @param {string} color - Color for the range's combos
+     * @returns {{hands: Object, rangeName: string|null}}
+     */
+    loadRange(rangeName: string, ranges: any[], color: string): {
+        hands: any;
+        rangeName: string | null;
+    };
     /**
      * Apply predefined range.
      * @param {string} rangeName - Range name

package/dist/poker-grid/PokerGridManager.js

@@ -617,6 +617,112 @@ export class PokerGridManager {
     return this.rangeManagerToMatching(drawOnlyRm, hands);
   }
 
+  // ==================== Range Views (design) ====================
+
+  /** The color of a hand's values (its hsl entry), or null. */
+  colorOf(values) {
+    return (values || []).find(item => typeof item === 'string' && item.startsWith('hsl(')) || null;
+  }
+
+  /**
+   * Combos in the range: those with a color or selected (dead combos are expected to be filtered out already).
+   * @param {Object} hands - Hands object (visible hands)
+   * @returns {string[]}
+   */
+  getRangeCombos(hands = this.hands) {
+    return Object.keys(hands || {}).filter(h => isCombo(h) && (this.hasExplicitColor(hands[h]) || this.isSelected(hands[h])));
+  }
+
+  /**
+   * Select combos with the usual modifiers: plain replaces the selection, ctrl/cmd adds, shift removes.
+   * @param {Object} hands - Hands object
+   * @param {string[]} combos - Combos to select
+   * @param {{ctrl?: boolean, shift?: boolean}} modifiers
+   * @returns {Object} Updated hands object
+   */
+  selectCombos(hands, combos, modifiers = {}) {
+    const newHands = modifiers.ctrl || modifiers.shift ? { ...hands } : this.unselectAll(hands);
+    combos.forEach(h => {
+      const values = (newHands[h] || []).filter(item => item !== 'selected');
+      newHands[h] = modifiers.shift ? values : [...values, 'selected'];
+    });
+    return newHands;
+  }
+
+  /**
+   * Invert the selection within the range.
+   * @param {Object} hands - Hands object
+   * @returns {Object} Updated hands object
+   */
+  invertRangeSelection(hands) {
+    const newHands = { ...hands };
+    this.getRangeCombos(hands).forEach(h => {
+      const values = newHands[h] || [];
+      newHands[h] = values.includes('selected') ? values.filter(item => item !== 'selected') : [...values, 'selected'];
+    });
+    return newHands;
+  }
+
+  /**
+   * Classify combos on a board for the Made x Draw table: made hand (row) and draw (column), from
+   * poker-extval with the hole cards, so draws must use a hole card. Cached per board.
+   * Made: highCard, onePair, twoPair, trips, straight, flush, fullHouse, quads, straightFlush.
+   * Draw (flop/turn only): combo (flush + straight draw), flush, straight, backdoor (backdoor flush draw,
+   * flop only), none.
+   * @param {string[]} combos - Combos
+   * @param {string[]} boardCards - Board (3-5 cards)
+   * @returns {Map<string, {made: string, draw: string}>}
+   */
+  classifyCombos(combos, boardCards = this.boardCards) {
+    const result = new Map();
+    if (!boardCards || boardCards.length < 3) return result;
+    const key = boardCards.join('');
+    if (this.classifyCacheBoard !== key) {
+      this.classifyCacheBoard = key;
+      this.classifyCache = new Map();
+    }
+    combos.forEach(h => {
+      if (!this.classifyCache.has(h)) {
+        this.classifyCache.set(h, this.classifyCombo(h, boardCards));
+      }
+      const value = this.classifyCache.get(h);
+      if (value) result.set(h, value);
+    });
+    return result;
+  }
+
+  /** Uncached classifyCombos for one combo, or null if the cards clash. */
+  classifyCombo(combo, boardCards) {
+    const hole = [combo.substring(0, 2), combo.substring(2, 4)];
+    if (hole.some(card => boardCards.includes(card))) return null;
+    try {
+      const evaluation = Object.values(evaluateHand([...boardCards, ...hole], { holeCards: hole }))[0];
+      if (!evaluation) return null;
+      let made = 'highCard';
+      if (evaluation.isStraightFlush || evaluation.isRoyalFlush) made = 'straightFlush';
+      else if (evaluation.isFourOfAKind) made = 'quads';
+      else if (evaluation.isFullHouse) made = 'fullHouse';
+      else if (evaluation.isFlush) made = 'flush';
+      else if (evaluation.isStraight) made = 'straight';
+      else if (evaluation.isThreeOfAKind) made = 'trips';
+      else if (evaluation.isTwoPair) made = 'twoPair';
+      else if (evaluation.isPair) made = 'onePair';
+
+      let draw = 'none';
+      if (boardCards.length < 5) {
+        const flushDraw = !!evaluation.isFlushDraw;
+        const straightDraw = !!evaluation.isStraightDraw;
+        if (flushDraw && straightDraw) draw = 'combo';
+        else if (flushDraw) draw = 'flush';
+        else if (straightDraw) draw = 'straight';
+        else if (boardCards.length === 3 && evaluation.isBackdoorFlushDraw) draw = 'backdoor';
+      }
+      return { made, draw };
+    } catch (error) {
+      return null;
+    }
+  }
+
   // ==================== Color Methods ====================
 
   /**
@@ -654,15 +760,16 @@ export class PokerGridManager {
   /**
    * Hero's equity against the villain hands on the grid, overall and per color, from one
    * poker-bitvaljs compareRangeHands call (each villain combo's result against hero's hand).
-   * Villain hands are the combos that are selected or colored; hands holding a dead, board or
-   * hero card are left out.
+   * Villain hands are the combos in the range (colored or selected); hands holding a dead, board or hero
+   * card are left out.
    * @param {Object} hands - Hands object
    * @param {string[]} heroCards - Hero cards (two)
    * @param {string[]} boardCards - Board cards (0-5)
    * @param {string[]} deadCards - Dead cards (may include hero and board cards)
    * @param {string[]} colors - Colors array
-   * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object}|null>}
-   *   Equities in percent (null when hero meets no villain combo); null without two hero cards.
+   * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object, byCombo: Object}|null>}
+   *   Equities in percent (null when hero meets no villain combo); byCombo is hero's equity against each
+   *   villain combo. Null without two hero cards.
    */
   async calculateEquity(hands = this.hands, heroCards = this.heroCards, boardCards = this.boardCards, deadCards = this.deadCards, colors = this.colors) {
     if (heroCards?.length !== 2) return null;
@@ -678,7 +785,7 @@ export class PokerGridManager {
 
     const byColor = {};
     (colors || []).forEach(c => { byColor[c] = null; });
-    if (villainHands.length === 0) return { hero: null, villain: null, combos: 0, byColor };
+    if (villainHands.length === 0) return { hero: null, villain: null, combos: 0, byColor, byCombo: {} };
 
     // Preflop, wait for the table if one is loading (otherwise the result would be Monte Carlo)
     if (board.length === 0 && preflopTableLoad) await preflopTableLoad;
@@ -708,12 +815,60 @@ export class PokerGridManager {
     };
 
     const hero = heroEquityAgainst(villainHands);
+    const byCombo = {};
+    villainHands.forEach(h => { byCombo[h] = heroEquityAgainst([h]); });
     (colors || []).forEach(color => {
       const colorHands = villainHands.filter(h => hands[h].includes(color));
       byColor[color] = colorHands.length > 0 ? heroEquityAgainst(colorHands) : null;
     });
 
-    return { hero, villain: hero === null ? null : 100 - hero, combos: villainHands.length, byColor };
+    return { hero, villain: hero === null ? null : 100 - hero, combos: villainHands.length, byColor, byCombo };
+  }
+
+  /**
+   * Color villain combos by hero's equity against them: one equal-width band per color, colors[0] for
+   * hero's lowest equity (villain's strongest hands) up to the last color for hero's highest. With 6
+   * colors the bands are 0-16.7%, 16.7-33.3%, ... 83.3-100%.
+   * Only combos without a color, still holding the color this method gave them, or holding their base
+   * color (e.g. from loading a range) are recolored, so hand-applied colors stay. Combos this method colored
+   * that are no longer in `byCombo` (dead, or no equity) go back to their base color, or lose the color.
+   * @param {Object} hands - Hands object
+   * @param {Object} byCombo - Hero's equity (%) against each villain combo, from calculateEquity
+   * @param {string[]} colors - Colors, one per band
+   * @param {Map<string, string>} autoColors - Colors set by earlier calls (combo -> color)
+   * @param {Map<string, string>} baseColors - Colors combos had before banding (combo -> color)
+   * @returns {{hands: Object, autoColors: Map<string, string>, changed: boolean}}
+   */
+  applyEquityBands(hands, byCombo, colors, autoColors = new Map(), baseColors = new Map()) {
+    const next = new Map();
+    const newHands = { ...hands };
+    let changed = false;
+    const colorOf = (values) => (values || []).find(item => typeof item === 'string' && item.startsWith('hsl('));
+    const setColor = (h, color) => {
+      const kept = (newHands[h] || []).filter(item => !(typeof item === 'string' && item.startsWith('hsl(')));
+      newHands[h] = color ? [...kept, color] : kept;
+      changed = true;
+    };
+
+    if (colors && colors.length > 0) {
+      const bandWidth = 100 / colors.length;
+      Object.entries(byCombo || {}).forEach(([h, equity]) => {
+        if (equity === null || equity === undefined || Number.isNaN(equity)) return;
+        const current = colorOf(newHands[h]);
+        if (current && autoColors.get(h) !== current && baseColors.get(h) !== current) return; // colored by hand
+        const color = colors[Math.min(colors.length - 1, Math.floor(equity / bandWidth))];
+        next.set(h, color);
+        if (current !== color) setColor(h, color);
+      });
+    }
+
+    // Combos that lost their equity color (no longer villain hands, or no equity)
+    autoColors.forEach((color, h) => {
+      if (next.has(h) || !newHands[h]) return;
+      if (colorOf(newHands[h]) === color) setColor(h, baseColors.get(h) || null);
+    });
+
+    return { hands: changed ? newHands : hands, autoColors: next, changed };
   }
 
   /**
@@ -729,6 +884,21 @@ export class PokerGridManager {
 
   // ==================== Range Methods ====================
 
+  /**
+   * Load a predefined range as a fresh grid: every combo gets `color` and nothing is selected.
+   * @param {string} rangeName - Range name
+   * @param {Array} ranges - Ranges array
+   * @param {string} color - Color for the range's combos
+   * @returns {{hands: Object, rangeName: string|null}}
+   */
+  loadRange(rangeName, ranges, color) {
+    const selectedRange = ranges.find(r => r.name === rangeName);
+    if (!selectedRange) return { hands: {}, rangeName: null };
+    const hands = {};
+    new RangeManager(selectedRange.abbreviation).toArray().forEach(h => { hands[h] = [color]; });
+    return { hands, rangeName };
+  }
+
   /**
    * Apply predefined range.
    * @param {string} rangeName - Range name
@@ -1033,8 +1203,8 @@ export class PokerGridManager {
         newSelection[h] = (newSelection[h] || []).filter(item => item !== 'selected');
       });
     } else {
-      // Normal: Apply color to selected hands
-      newSelection = this.applyColor(newSelection, color, selectedHands);
+      // Normal: Apply color to selected hands, then clear the selection
+      newSelection = this.unselectAll(this.applyColor(newSelection, color, selectedHands));
     }
     
     return newSelection;

package/dist/poker-grid/components/Grid.svelte

@@ -68,25 +68,52 @@
     return manager ? manager.getCellInfo(rowIndex, colIndex) : { hand: '', display: '', type: '' };
   }
 
-  function getGradient(hand) {
-    return manager ? manager.getGradient(hand, hands, deadCards) : `linear-gradient(to right, ${defaultColor})`;
+  /**
+   * How a cell looks: in range (combos colored or selected), the range color, lighter when only some of the
+   * hand's live combos are in the range; out of range, a faint suited/offsuit/pair tint. Selected colored
+   * combos get a ring.
+   */
+  /** Out-of-range tints (theme variables, with defaults). */
+  const TINTS = {
+    suited: 'var(--irongrid-cell-suited-bg, #eef0f9)',
+    offsuit: 'var(--irongrid-cell-offsuit-bg, #f6f3ee)',
+    paired: 'var(--irongrid-cell-paired-bg, #f1f2f4)'
+  };
+
+  function cellLook(hand, type, handsMap, dead) {
+    const combos = getCombinations(hand);
+    const live = combos.filter(c => !dead.includes(c.substring(0, 2)) && !dead.includes(c.substring(2, 4)));
+    const counts = new Map();
+    let inRange = 0;
+    let selected = 0;
+    let coloredSelected = 0;
+    live.forEach(c => {
+      const values = handsMap[c] || [];
+      const color = manager ? manager.colorOf(values) : null;
+      const isSelected = values.includes('selected');
+      if (!color && !isSelected) return;
+      inRange++;
+      if (isSelected) selected++;
+      if (color && isSelected) coloredSelected++;
+      const key = color || defaultSelectedColor;
+      counts.set(key, (counts.get(key) || 0) + 1);
+    });
+    if (live.length === 0) return { background: TINTS[type], inRange: false, dead: true, ring: '' };
+    if (inRange === 0) return { background: TINTS[type], inRange: false, dead: false, ring: '' };
+    let dominant = null;
+    counts.forEach((n, color) => { if (!dominant || n > counts.get(dominant)) dominant = color; });
+    const strength = Math.round(45 + 55 * (inRange / live.length));
+    const ring = coloredSelected === 0 ? '' : selected === inRange ? 'full' : 'partial';
+    return { background: `color-mix(in srgb, ${dominant} ${strength}%, white)`, inRange: true, dead: false, ring };
   }
-  $: handsLength = Object.keys(hands).length;
-  $: handsString = JSON.stringify(hands);
-  $: gradients = (() => {
+
+  $: looks = (() => {
     const result = {};
-    try {
-      const totalKeys = Object.keys(hands || {}).length;
-      const selected = Object.keys(hands || {}).filter(k => Array.isArray(hands[k]) && hands[k].includes('selected')).length;
-      void totalKeys;
-      void selected;
-    } catch (e) {
-      // Ignore gradient recompute errors
-    }
-    ranks.forEach((rowRank, rowIndex) => {
-      ranks.forEach((colRank, colIndex) => {
+    const dead = deadCards || [];
+    ranks.forEach((_, rowIndex) => {
+      ranks.forEach((__, colIndex) => {
         const cellInfo = getCellInfo(rowIndex, colIndex);
-        result[cellInfo.hand] = getGradient(cellInfo.hand);
+        result[cellInfo.hand] = cellLook(cellInfo.hand, cellInfo.type, hands || {}, dead);
       });
     });
     return result;
@@ -431,7 +458,11 @@
           <button
             type="button"
             class="grid-cell {isDragging ? 'dragging' : ''} {interactive ? '' : showTips ? 'non-interactive show-tips' : 'non-interactive'}"
-            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
+            class:in-range={looks[cellInfo.hand].inRange}
+            class:dead={looks[cellInfo.hand].dead}
+            class:ring-full={looks[cellInfo.hand].ring === 'full'}
+            class:ring-partial={looks[cellInfo.hand].ring === 'partial'}
+            style="background: {looks[cellInfo.hand].background} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
             data-row={rowIndex}
             data-col={colIndex}
             onclick={(e) => handleClick(e, cellInfo)}
@@ -441,18 +472,20 @@
             onkeydown={(e) => handleKeyDown(e, cellInfo)}
             title={cellInfo.display}
           >
-            <span class="cell-text">{cellInfo.display}</span>
+            <span class="cell-text">{cellInfo.hand.substring(0, 2)}</span>
           </button>
         {:else}
           <div
             class="grid-cell non-interactive"
-            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
+            class:in-range={looks[cellInfo.hand].inRange}
+            class:dead={looks[cellInfo.hand].dead}
+            style="background: {looks[cellInfo.hand].background} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
             data-row={rowIndex}
             data-col={colIndex}
             role="presentation"
             title={cellInfo.display}
           >
-            <span class="cell-text">{cellInfo.display}</span>
+            <span class="cell-text">{cellInfo.hand.substring(0, 2)}</span>
           </div>
         {/if}
       {/each}
@@ -482,33 +515,29 @@
   .poker-grid { 
     display: grid; 
     grid-template-columns: repeat(13, 1fr); 
-    grid-template-rows: repeat(13, 1fr); 
-    gap: 0; 
-    border: var(--irongrid-border-width) solid var(--irongrid-color-border); 
+    grid-template-rows: repeat(13, auto); 
+    gap: var(--irongrid-cell-gap, 2px); 
   }
   /* 3x3 blocks: spacer tracks after T and 6 (A-T | 9-6 | 5-2) */
   .poker-grid.subgrid {
-    grid-template-columns: repeat(5, 1fr) var(--irongrid-subgrid-gap, 6px) repeat(4, 1fr) var(--irongrid-subgrid-gap, 6px) repeat(4, 1fr);
-    grid-template-rows: repeat(5, auto) var(--irongrid-subgrid-gap, 6px) repeat(4, auto) var(--irongrid-subgrid-gap, 6px) repeat(4, auto);
-    border: none;
+    grid-template-columns: repeat(5, 1fr) var(--irongrid-subgrid-gap, 4px) repeat(4, 1fr) var(--irongrid-subgrid-gap, 4px) repeat(4, 1fr);
+    grid-template-rows: repeat(5, auto) var(--irongrid-subgrid-gap, 4px) repeat(4, auto) var(--irongrid-subgrid-gap, 4px) repeat(4, auto);
   }
   .grid-cell { 
     aspect-ratio: 1; 
+    min-width: 0;
     display: flex; 
     align-items: center; 
     justify-content: center; 
     cursor: pointer; 
-    transition: opacity var(--irongrid-transition-fast); 
-    min-height: var(--irongrid-grid-min-cell-height); 
-    border-right: var(--irongrid-border-width) solid var(--irongrid-color-border); 
-    border-bottom: var(--irongrid-border-width) solid var(--irongrid-color-border); 
+    border-radius: var(--irongrid-cell-radius, 3px); 
+    transition: background-color var(--irongrid-transition-fast), box-shadow var(--irongrid-transition-fast); 
     user-select: none; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
   }
   button.grid-cell { 
-    background: none; 
     border: none; 
     padding: 0; 
     margin: 0; 
@@ -516,11 +545,14 @@
     color: inherit; 
     text-align: inherit; 
   }
-  .grid-cell:nth-child(13n) { 
-    border-right: none; 
+  .grid-cell.ring-full { 
+    box-shadow: inset 0 0 0 2px var(--irongrid-cell-ring-color, #1f2937); 
   }
-  .grid-cell:nth-child(n + 157) { 
-    border-bottom: none; 
+  .grid-cell.ring-partial { 
+    box-shadow: inset 0 0 0 1px var(--irongrid-cell-ring-color, #1f2937); 
+  }
+  .grid-cell.dead { 
+    opacity: 0.45; 
   }
   .grid-cell.dragging { 
     cursor: crosshair; 
@@ -534,48 +566,22 @@
     pointer-events: auto; 
   }
   .cell-text { 
-    font-size: var(--irongrid-font-size-base); 
-    font-weight: var(--irongrid-font-weight-semibold); 
-    color: var(--irongrid-color-text-primary); 
+    font-size: var(--irongrid-cell-font-size, 0.8125rem); 
+    font-weight: 500; 
+    letter-spacing: 0.01em; 
+    color: var(--irongrid-cell-muted-text, #a3a8b3); 
     pointer-events: none; 
     text-rendering: optimizeLegibility; 
     -webkit-font-smoothing: antialiased; 
     -moz-osx-font-smoothing: grayscale; 
   }
-  @media (max-width: 768px) { 
-    .poker-grid-container { 
-      padding: var(--irongrid-spacing-sm); 
-    } 
-    .poker-grid { 
-      gap: 0; 
-    } 
-    .grid-cell { 
-      min-height: var(--irongrid-grid-min-cell-height-tablet); 
-    } 
-    .cell-text { 
-      font-size: var(--irongrid-font-size-sm); 
-    } 
+  .grid-cell.in-range .cell-text { 
+    font-weight: 700; 
+    color: var(--irongrid-color-text-primary); 
   }
   @media (max-width: 480px) { 
-    .poker-grid-container { 
-      padding: var(--irongrid-grid-container-padding); 
-    } 
-    .grid-cell { 
-      min-height: var(--irongrid-grid-min-cell-height-mobile); 
-    } 
-    .cell-text { 
-      font-size: var(--irongrid-font-size-xxs); 
-    } 
-  }
-  @media (max-width: 375px) { 
-    .poker-grid-container { 
-      padding: var(--irongrid-grid-container-padding-small); 
-    } 
-    .grid-cell { 
-      min-height: var(--irongrid-grid-min-cell-height-small); 
-    } 
     .cell-text { 
-      font-size: var(--irongrid-font-size-xs); 
+      font-size: var(--irongrid-cell-font-size-mobile, 0.6875rem); 
     } 
   }