Switch hand ranges to Poker Skill's 6-max charts with 3bet/call frames

- Replace the Yokosawa ranges with the 6-max opening ranges (UTG, HJ, CO,
  SB, BTN). Colors keep the old order: navy (strong UTG), red UTG, yellow
  HJ, green CO, blue SB, white BTN. SB is narrower than BTN, so blue sits
  one tier above white; the purple-frame category is gone.
- Show the "BTN vs CO open" chart on the range page as frames: light blue
  for 3bet, yellow for call.
- Grade BTN facing an unlimped CO open by those frames in reviews; other
  spots keep the color-tier rule (BB defends down to green).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

admin/range.js

@@ -3,7 +3,7 @@
   'use strict';
 
   const $ = (id) => document.getElementById(id);
-  const { RANKS, CATEGORIES, handAt, categoryOf, labelOf } = window.HandRange;
+  const { RANKS, CATEGORIES, FACING_ACTIONS, handAt, categoryOf, labelOf, facingOf, facingAction } = window.HandRange;
 
   function swatch(id) {
     const s = document.createElement('span');
@@ -11,6 +11,13 @@
     return s;
   }
 
+  // レイズを受けたときの対応の枠（3bet は水色、コールは黄）
+  function frameSwatch(id) {
+    const s = document.createElement('span');
+    s.className = `swatch-dot swatch-frame facing-${id}`;
+    return s;
+  }
+
   // ---------- タブ ----------
   function showView(name) {
     $('view-range').hidden = name !== 'range';
@@ -28,6 +35,11 @@
     item.append(swatch(c.id), c.label);
     $('legend').append(item);
   }
+  for (const a of FACING_ACTIONS) {
+    const item = document.createElement('span');
+    item.append(frameSwatch(a.id), `レイズを受けたら${a.label}`);
+    $('legend').append(item);
+  }
 
   for (let r = 0; r < 13; r++) {
     for (let c = 0; c < 13; c++) {
@@ -35,9 +47,10 @@
       const cat = categoryOf(hand);
       const b = document.createElement('button');
       b.type = 'button';
-      b.className = `range-cell cat-${cat}`;
+      const facing = facingOf(hand);
+      b.className = `range-cell cat-${cat}${facing ? ` facing-${facing}` : ''}`;
       b.textContent = hand;
-      b.title = `${hand}：${labelOf(cat)}`;
+      b.title = `${hand}：${labelOf(cat)}${facing ? `／レイズを受けたら${facingAction(facing).label}` : ''}`;
       b.addEventListener('click', () => select(b, hand, cat));
       $('matrix').append(b);
     }
@@ -54,10 +67,17 @@
     const label = document.createElement('div');
     label.className = 'sel-label';
     label.append(swatch(cat), labelOf(cat));
+    const facing = facingOf(hand);
+    const vs = document.createElement('div');
+    vs.className = 'sel-label';
+    if (facing) vs.append(frameSwatch(facing), `レイズを受けたら${facingAction(facing).label}`);
+    else vs.append('レイズを受けたらフォールド');
     const note = document.createElement('div');
     note.className = 'hint';
-    note.textContent = cat === 'purple' ? '灰色＋紫枠。クイズの答えは「紫枠」です。' : 'このハンドの分類です。';
-    box.append(name, label, note);
+    note.textContent =
+      (cat === 'gray' ? 'どのポジションからもオープンしない手です。' : `${labelOf(cat)} からオープンできる一番狭い分類です。`) +
+      '枠は CO のオープンを BTN で受けたときの対応です。';
+    box.append(name, label, vs, note);
   }
 
   $('start-from-range').addEventListener('click', () => {