Separate Flip/Refresh cards, invert loss.svg colors, update card rules

asimone · claude · asimone · commit 4b487aed805a · 2026-04-26T10:33:46.000-04:00
- Split Flip &amp; Refresh into two separate cards with accurate rules from p.36
- Inverted black/white fills in loss.svg (preserves red cross)
- Corrected Flip card rules: front→back→front mechanic
- Added Refresh card with proper recovery rules

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/assets/icons/loss.svg b/assets/icons/loss.svg
@@ -81,27 +81,27 @@
      class="cls-5"
      d="M 16.02,8.27 H 15.96 L 15.39,8.13 a 0.24,0.24 0 0 1 -0.18,-0.29 0.26,0.26 0 0 1 0.3,-0.18 l 0.55,0.13 a 0.23,0.23 0 0 1 0.18,0.29 0.23,0.23 0 0 1 -0.23,0.19"
      id="path19"
-     style="fill:#000000" />
+     style="fill:#ffffff" />
   <path
      class="cls-5"
      d="M 7.53,13.19 H 7.47 L 6.39,12.93 a 0.25,0.25 0 0 1 -0.18,-0.3 0.25,0.25 0 0 1 0.3,-0.18 l 1.07,0.26 A 0.24,0.24 0 0 1 7.76,13 0.23,0.23 0 0 1 7.53,13.19 m 1.08,0 A 0.23,0.23 0 0 1 8.39,13.01 0.24,0.24 0 0 1 8.52,12.69 h 0.06 l 0.86,-0.51 a 0.24,0.24 0 0 1 0.33,0.08 0.24,0.24 0 0 1 -0.08,0.34 l -0.86,0.51 a 0.34,0.34 0 0 1 -0.12,0.06 0.2,0.2 0 0 1 -0.1,0 M 5.39,12.68 H 5.32 L 4.24,12.39 A 0.24,0.24 0 0 1 4.06,12.1 0.23,0.23 0 0 1 4.39,11.94 l 1,0.25 A 0.25,0.25 0 0 1 5.33,12.68 M 3.18,12.16 H 3.16 L 2.09,11.9 A 0.25,0.25 0 0 1 1.91,11.6 0.24,0.24 0 0 1 2.2,11.39 l 1.08,0.26 a 0.24,0.24 0 0 1 0.18,0.29 0.24,0.24 0 0 1 -0.24,0.19 m 7.29,-0.12 a 0.27,0.27 0 0 1 -0.21,-0.12 0.26,0.26 0 0 1 0.09,-0.34 l 0.95,-0.56 a 0.24,0.24 0 0 1 0.33,0.08 0.24,0.24 0 0 1 -0.08,0.34 l -0.95,0.56 a 0.2,0.2 0 0 1 -0.13,0 M 1.07,11.58 H 1.01 L 0.48,11.45 C 0.04,11.35 0,11.1 0,11 a 0.42,0.42 0 0 1 0.17,-0.33 0.24,0.24 0 0 1 0.34,0 0.23,0.23 0 0 1 0,0.25 H 0.56 L 1.1,11.04 A 0.25,0.25 0 0 1 1.04,11.53 M 12.39,10.9 a 0.26,0.26 0 0 1 -0.21,-0.11 0.26,0.26 0 0 1 0.09,-0.34 l 0.95,-0.57 a 0.24438699,0.24438699 0 0 1 0.25,0.42 l -0.95,0.57 a 0.28,0.28 0 0 1 -0.13,0 M 1.25,10.57 A 0.27,0.27 0 0 1 1.04,10.45 0.25,0.25 0 0 1 1.12,10.11 l 1,-0.56 A 0.24,0.24 0 0 1 2.46,9.63 0.25,0.25 0 0 1 2.37,9.97 l -1,0.56 a 0.17,0.17 0 0 1 -0.12,0 M 14.3,9.7 A 0.25,0.25 0 0 1 14.08,9.58 0.25,0.25 0 0 1 14.17,9.25 L 15.12,8.68 A 0.24438699,0.24438699 0 0 1 15.37,9.1 L 14.42,9.67 H 14.3 M 14.39,7.88 H 14.33 L 13.25,7.62 a 0.25,0.25 0 0 1 -0.18,-0.3 0.25,0.25 0 0 1 0.3,-0.18 l 1.07,0.25 a 0.23,0.23 0 0 1 0.18,0.29 0.23,0.23 0 0 1 -0.23,0.19"
      id="path21"
-     style="fill:#000000" />
+     style="fill:#ffffff" />
   <path
      class="cls-5"
      d="m 16.22,8.64 a 0.26,0.26 0 0 1 -0.2,-0.1 0.25,0.25 0 0 1 0,-0.26 v 0 A 0.26,0.26 0 0 1 15.84,7.98 0.24,0.24 0 0 1 16.13,7.8 c 0.37,0.09 0.46,0.28 0.48,0.38 a 0.41,0.41 0 0 1 -0.22,0.41 0.24,0.24 0 0 1 -0.14,0.05"
      id="path23"
-     style="fill:#000000" />
+     style="fill:#ffffff" />
   <path
      class="cls-5"
      d="M 9.04,8.87 A 2.12,2.12 0 0 1 8.04,9.11 2.44,2.44 0 0 1 7.56,9.06 L 0.39,7.39 H 0.25 v 1.7 c 0,0 0,0.13 0.19,0.18 L 7.7,11.01 A 1.49,1.49 0 0 0 8.79,10.85 L 16.18,6.39 A 0.2,0.2 0 0 0 16.31,6.2 V 4.53 Z"
      id="path25"
-     style="fill:#000000" />
+     style="fill:#ffffff" />
   <path
      class="cls-5"
      d="M 16.02,3.46 10.69,2.19 10,2.96 11.39,4.57 11.78,5.06 11.34,5.5 A 3.5,3.5 0 0 1 9.29,6.39 1.06,1.06 0 0 1 8.48,6.06 L 7.85,5.39 C 6.68,6.63 6.55,6.74 6.48,6.8 A 1.25,1.25 0 0 1 5.65,7.12 1.63,1.63 0 0 1 4.39,6.32 L 4.09,5.85 4.48,5.45 5.54,4.23 6.25,3.45 5.9,3.03 0.39,6.32 C 0.16,6.46 0.23,6.63 0.55,6.71 L 7.7,8.39 a 1.52,1.52 0 0 0 1,-0.11 L 16.18,3.82 C 16.41,3.69 16.34,3.51 16.02,3.43"
      id="path27"
-     style="fill:#000000" />
+     style="fill:#ffffff" />
   <path
      class="cls-6"
      d="m 11.28,0.47 c -0.14,-0.22 -0.59,-0.73 -1.06,-0.32 -0.16,0.13 -0.93,1 -1.84,2 L 7.24,0.79 C 6.92,0.44 5.79,1.07 5.46,1.4 L 7.18,3.46 4.96,5.94 c 0.14,0.22 0.59,0.73 1.06,0.33 0.16,-0.14 0.94,-1 1.85,-2 L 9,5.63 C 9.32,5.97 10.46,5.34 10.79,5.01 L 9.06,2.95 11.28,0.47"
diff --git a/index.html b/index.html
@@ -849,7 +849,7 @@ <h2 class="section-header">Card use</h2>
     </div>
     <div class="card-body">
       <p>A <strong>spent</strong> card is placed face-down in your spent pile. Spent cards are returned to your hand when you take a <strong>short rest</strong> (with one card randomly lost) or a <strong>long rest</strong>.</p>
-      <div class="callout"><span class="callout-icon">⚠</span><span>Items with a spent icon are flipped to their inactive side when used and refreshed on a long rest. <em>(p. 38)</em></span></div>
+      <div class="callout"><span class="callout-icon">⚠</span><span>Items with a spent icon are <em>rotated sideways</em> when used. They are recovered the next time you perform a long rest. <em>(p. 36)</em></span></div>
     </div>
   </div>
 
@@ -885,21 +885,33 @@ <h2 class="section-header">Card use</h2>
 
   <h2 class="section-header">Item usage</h2>
 
-  <!-- FLIP / REFRESH -->
+  <!-- FLIP -->
   <div class="card">
     <div class="card-header">
-      <div style="display:flex;gap:6px;flex-shrink:0">
-        <img src="assets/icons/flip.svg" class="badge-img" alt="Flip icon">
-        <img src="assets/icons/refresh.svg" class="badge-img" alt="Refresh icon">
+      <img src="assets/icons/flip.svg" class="badge-img" alt="Flip icon">
+      <div class="card-meta">
+        <div class="card-title">Flip</div>
+        <span class="card-sub">Item usage</span>
       </div>
+    </div>
+    <div class="card-body">
+      <p>Items with a <strong>flip</strong> icon are flipped after use, revealing a different use on the other side. When that other side is then used, the item flips back to its front — ready to use again. The specific timing of when to use the back side is detailed in the card's text.</p>
+      <div class="callout"><span class="callout-icon">⚠</span><span>Characters should always start a scenario with flip items on the side showing the gold or crafting cost. <em>(p. 36)</em></span></div>
+    </div>
+  </div>
+
+  <!-- REFRESH -->
+  <div class="card">
+    <div class="card-header">
+      <img src="assets/icons/refresh.svg" class="badge-img" alt="Refresh icon">
       <div class="card-meta">
-        <div class="card-title">Flip &amp; Refresh</div>
+        <div class="card-title">Refresh</div>
         <span class="card-sub">Item usage</span>
       </div>
     </div>
     <div class="card-body">
-      <p>Items with a <strong>flip</strong> icon are turned to their inactive side when used and must be <strong>refreshed</strong> before they can be used again. The refresh trigger varies by item — some refresh each round, others only on a long rest.</p>
-      <div class="callout"><span class="callout-icon">⚠</span><span>A flipped item cannot be used. Check the item's refresh icon to know when it becomes available again. <em>(p. 35)</em></span></div>
+      <p>Some items show a <strong>refresh</strong> icon indicating when they become available again after use. The refresh trigger varies by item — common triggers include the <strong>start of your next turn</strong>, the <strong>end of the round</strong>, or a <strong>long rest</strong>.</p>
+      <div class="callout"><span class="callout-icon">⚠</span><span>Check the refresh icon on each item card — a refreshed item is immediately available to use again. <em>(p. 36)</em></span></div>
     </div>
   </div>
 
