Fix a bunch of bugs.

web/src/components/CardView.tsx

@@ -206,6 +206,15 @@ export function CardView({
       onMouseLeave={preview ? undefined : () => setHover(null)}
     >
       {previewEl}
+      {/* Power sits in a spiky burst badge in the top-left corner (pets only),
+          with any battle damage marker beside it. It's absolutely placed so it
+          doesn't eat into the room the name and ability text need. */}
+      {card.kind === 'pet' && (
+        <div className="card-combat">
+          <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
+          {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
+        </div>
+      )}
       <div className="card-top">
         <span className="card-tier">{card.tier ? `T${card.tier}` : '·'}</span>
         {card.suit && <span className={`suit-dot suit-${card.suit}`} title={`${card.suit} suit`} />}
@@ -214,27 +223,13 @@ export function CardView({
         {artFor(card.name)}
       </div>
       <div className="card-name">{card.name}</div>
-      {card.kind === 'pet' ? (
-        <>
-          {card.effectText && (
-            <div className="card-effect" ref={effectRef}>
-              {renderEffect(card.effectText)}
-            </div>
-          )}
-          <div className="card-bottom">
-            <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
-            {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
-          </div>
-        </>
-      ) : (
-        <div className="card-effect" ref={effectRef}>
-          {card.effectText
-            ? renderEffect(card.effectText)
-            : card.food === 'apple'
-              ? '+1 power (this battle)'
-              : ''}
-        </div>
-      )}
+      <div className="card-effect" ref={effectRef}>
+        {card.effectText
+          ? renderEffect(card.effectText)
+          : card.kind === 'food' && card.food === 'apple'
+            ? '+1 power (this battle)'
+            : ''}
+      </div>
       {selected && <div className="card-check">✓</div>}
     </div>
   )