poker-irongrid 1.4.0 → 2.0.0

package/README.md

@@ -217,6 +217,21 @@ 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,

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,19 +290,18 @@ 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 by hand (colors in `autoColors`, set by
-     * applyEquityBands, don't count); 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
-     * @param {Map<string, string>|null} autoColors - Colors applyEquityBands set (combo -> color)
      * @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[], autoColors?: Map<string, string> | null): Promise<{
+    calculateEquity(hands?: any, heroCards?: string[], boardCards?: string[], deadCards?: string[], colors?: string[]): Promise<{
         hero: number | null;
         villain: number | null;
         combos: number;
@@ -267,16 +312,17 @@ export class PokerGridManager {
      * 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, or still holding the color this method gave them, are recolored, so
-     * hand-applied colors stay. Colors this method set are removed from combos that are no longer in
-     * `byCombo` (deselected, dead, or no equity).
+     * 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>): {
+    applyEquityBands(hands: any, byCombo: any, colors: string[], autoColors?: Map<string, string>, baseColors?: Map<string, string>): {
         hands: any;
         autoColors: Map<string, string>;
         changed: boolean;
@@ -286,6 +332,17 @@ export class PokerGridManager {
      * @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,32 +760,26 @@ 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 by hand (colors in `autoColors`, set by
-   * applyEquityBands, don't count); 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
-   * @param {Map<string, string>|null} autoColors - Colors applyEquityBands set (combo -> color)
    * @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, autoColors = null) {
+  async calculateEquity(hands = this.hands, heroCards = this.heroCards, boardCards = this.boardCards, deadCards = this.deadCards, colors = this.colors) {
     if (heroCards?.length !== 2) return null;
     const board = boardCards || [];
     const otherDead = (deadCards || []).filter(card => !heroCards.includes(card) && !board.includes(card));
     const blocked = new Set([...heroCards, ...board, ...otherDead]);
 
-    const colorOf = (h) => (hands[h] || []).find(item => typeof item === 'string' && item.startsWith('hsl('));
-    const coloredByHand = (h) => {
-      const color = colorOf(h);
-      return !!color && !(autoColors && autoColors.get(h) === color);
-    };
     const villainHands = Object.keys(hands || {}).filter(h =>
       isCombo(h) &&
-      (coloredByHand(h) || this.isSelected(hands[h])) &&
+      (this.hasExplicitColor(hands[h]) || this.isSelected(hands[h])) &&
       !blocked.has(h.substring(0, 2)) && !blocked.has(h.substring(2, 4))
     );
 
@@ -729,16 +829,17 @@ export class PokerGridManager {
    * 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, or still holding the color this method gave them, are recolored, so
-   * hand-applied colors stay. Colors this method set are removed from combos that are no longer in
-   * `byCombo` (deselected, dead, or no equity).
+   * 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()) {
+  applyEquityBands(hands, byCombo, colors, autoColors = new Map(), baseColors = new Map()) {
     const next = new Map();
     const newHands = { ...hands };
     let changed = false;
@@ -754,7 +855,7 @@ export class PokerGridManager {
       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) return; // colored by hand
+        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);
@@ -764,7 +865,7 @@ export class PokerGridManager {
     // 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, null);
+      if (colorOf(newHands[h]) === color) setColor(h, baseColors.get(h) || null);
     });
 
     return { hands: changed ? newHands : hands, autoColors: next, changed };
@@ -783,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
@@ -1087,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

@@ -29,20 +29,6 @@
     return index + 1 + (split ? (index >= 5 ? 1 : 0) + (index >= 9 ? 1 : 0) : 0);
   }
 
-  /**
-   * Hairline frame around each 3x3 block (subgrid): inset shadows on the block's edge cells, so cells stay
-   * flush with their neighbours and only the blocks are outlined.
-   */
-  function blockFrame(row, col, split) {
-    if (!split) return '';
-    const shadows = [];
-    if (row === 0 || row === 5 || row === 9) shadows.push(`inset 0 var(--irongrid-border-width) 0 var(--irongrid-color-border)`);
-    if (row === 4 || row === 8 || row === 12) shadows.push(`inset 0 calc(-1 * var(--irongrid-border-width)) 0 var(--irongrid-color-border)`);
-    if (col === 0 || col === 5 || col === 9) shadows.push(`inset var(--irongrid-border-width) 0 0 var(--irongrid-color-border)`);
-    if (col === 4 || col === 8 || col === 12) shadows.push(`inset calc(-1 * var(--irongrid-border-width)) 0 0 var(--irongrid-color-border)`);
-    return shadows.length ? `box-shadow: ${shadows.join(', ')};` : '';
-  }
-
   /** The grid cell under a point (or null), from the cells' own positions, so it works with any spacing. */
   function cellAtPoint(gridElement, x, y) {
     const cells = gridElement.querySelectorAll('[data-row]');
@@ -82,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;
@@ -445,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)}; {blockFrame(rowIndex, 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)}
@@ -455,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)}; {blockFrame(rowIndex, 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}
@@ -496,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; 
@@ -530,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; 
@@ -548,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); 
     } 
   }