valtech-components 4.0.586 → 4.0.590

package/fesm2022/valtech-components.mjs

@@ -59,7 +59,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.586';
+const VERSION = '4.0.590';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -63672,6 +63672,9 @@ class ChessimalsAdventureComponent {
     t(key) {
         return this.i18n.t(key, 'MiniGames');
     }
+    avatarSrc(profileId) {
+        return `assets/games/chessimals/challenge-avatars/${profileId}.png`;
+    }
     nodeIcon(type) {
         switch (type) {
             case 'battle':
@@ -63776,7 +63779,16 @@ class ChessimalsAdventureComponent {
                     (click)="onNodeTap(nodeView)"
                     type="button"
                   >
-                    <span class="adventure-node__icon">{{ nodeIcon(nodeView.node.type) }}</span>
+                    @if (nodeView.node.profileId) {
+                      <img
+                        class="adventure-node__avatar"
+                        [src]="avatarSrc(nodeView.node.profileId)"
+                        [alt]="t(nodeView.node.titleKey)"
+                        loading="lazy"
+                      />
+                    } @else {
+                      <span class="adventure-node__icon">{{ nodeIcon(nodeView.node.type) }}</span>
+                    }
                     <span class="adventure-node__label">{{ t(nodeView.node.titleKey) }}</span>
                     <span class="adventure-node__stars">
                       @for (i of [0, 1, 2]; track i) {
@@ -63800,7 +63812,7 @@ class ChessimalsAdventureComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".adventure-hub{padding:0 0 40px}.adventure-hub__header{padding:20px 16px 24px;text-align:center}.adventure-hub__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ion-color-medium);margin:0 0 6px}.adventure-hub__title{font-size:1.75rem;font-weight:800;margin:0 0 6px;color:var(--ion-text-color)}.adventure-hub__subtitle{font-size:.9rem;color:var(--ion-color-medium);margin:0 0 12px}.adventure-hub__stars{display:inline-flex;align-items:center;gap:4px;background:var(--ion-card-background, var(--ion-background-color));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:20px;padding:4px 14px;font-weight:700;font-size:.95rem;color:var(--ion-color-warning)}.adventure-hub__stars ion-icon{color:var(--ion-color-warning);font-size:1rem}.adventure-hub__acts{display:flex;flex-direction:column;gap:16px;padding:0 12px}.adventure-act{border-radius:16px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color));overflow:hidden}.adventure-act--locked{opacity:.5}.adventure-act--done{border-color:var(--ion-color-success)}.adventure-act__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.adventure-act__emoji{font-size:1.75rem;line-height:1;flex-shrink:0}.adventure-act__meta{flex:1;min-width:0}.adventure-act__name{font-size:1rem;font-weight:700;margin:0 0 2px;color:var(--ion-text-color)}.adventure-act__desc{font-size:.8rem;color:var(--ion-color-medium);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adventure-act__lock{color:var(--ion-color-medium);font-size:1.25rem;flex-shrink:0}.adventure-act__progress{font-size:.8rem;font-weight:700;color:var(--ion-color-medium);flex-shrink:0}.adventure-act__nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px}.adventure-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #f8f8f8);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}.adventure-node:active{transform:scale(.97)}.adventure-node--available{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 6%,transparent)}.adventure-node--completed{border-color:var(--ion-color-success);background:color-mix(in srgb,var(--ion-color-success) 6%,transparent)}.adventure-node--locked{opacity:.4;cursor:default}.adventure-node__icon{font-size:1.5rem;line-height:1}.adventure-node__label{font-size:.75rem;font-weight:600;color:var(--ion-text-color);line-height:1.2}.adventure-node__stars{display:flex;gap:1px}.adventure-node__star{font-size:.7rem;color:var(--ion-color-medium)}.adventure-node__star--filled{color:var(--ion-color-warning)}.adventure-node__badge{position:absolute;top:-4px;right:-4px;font-size:.6rem;padding:2px 5px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: [".adventure-hub{padding:0 0 40px}.adventure-hub__header{padding:20px 16px 24px;text-align:center}.adventure-hub__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ion-color-medium);margin:0 0 6px}.adventure-hub__title{font-size:1.75rem;font-weight:800;margin:0 0 6px;color:var(--ion-text-color)}.adventure-hub__subtitle{font-size:.9rem;color:var(--ion-color-medium);margin:0 0 12px}.adventure-hub__stars{display:inline-flex;align-items:center;gap:4px;background:var(--ion-card-background, var(--ion-background-color));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:20px;padding:4px 14px;font-weight:700;font-size:.95rem;color:var(--ion-color-warning)}.adventure-hub__stars ion-icon{color:var(--ion-color-warning);font-size:1rem}.adventure-hub__acts{display:flex;flex-direction:column;gap:16px;padding:0 12px}.adventure-act{border-radius:16px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color));overflow:hidden}.adventure-act--locked{opacity:.5}.adventure-act--done{border-color:var(--ion-color-success)}.adventure-act__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.adventure-act__emoji{font-size:1.75rem;line-height:1;flex-shrink:0}.adventure-act__meta{flex:1;min-width:0}.adventure-act__name{font-size:1rem;font-weight:700;margin:0 0 2px;color:var(--ion-text-color)}.adventure-act__desc{font-size:.8rem;color:var(--ion-color-medium);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adventure-act__lock{color:var(--ion-color-medium);font-size:1.25rem;flex-shrink:0}.adventure-act__progress{font-size:.8rem;font-weight:700;color:var(--ion-color-medium);flex-shrink:0}.adventure-act__nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px}.adventure-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #f8f8f8);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}.adventure-node:active{transform:scale(.97)}.adventure-node--available{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 6%,transparent)}.adventure-node--completed{border-color:var(--ion-color-success);background:color-mix(in srgb,var(--ion-color-success) 6%,transparent)}.adventure-node--locked{opacity:.4;cursor:default}.adventure-node__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.adventure-node--available .adventure-node__avatar{border-color:var(--ion-color-primary)}.adventure-node--completed .adventure-node__avatar{border-color:var(--ion-color-success)}.adventure-node__icon{font-size:1.5rem;line-height:1}.adventure-node__label{font-size:.75rem;font-weight:600;color:var(--ion-text-color);line-height:1.2}.adventure-node__stars{display:flex;gap:1px}.adventure-node__star{font-size:.7rem;color:var(--ion-color-medium)}.adventure-node__star--filled{color:var(--ion-color-warning)}.adventure-node__badge{position:absolute;top:-4px;right:-4px;font-size:.6rem;padding:2px 5px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChessimalsAdventureComponent, decorators: [{
             type: Component,
@@ -63852,7 +63864,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     (click)="onNodeTap(nodeView)"
                     type="button"
                   >
-                    <span class="adventure-node__icon">{{ nodeIcon(nodeView.node.type) }}</span>
+                    @if (nodeView.node.profileId) {
+                      <img
+                        class="adventure-node__avatar"
+                        [src]="avatarSrc(nodeView.node.profileId)"
+                        [alt]="t(nodeView.node.titleKey)"
+                        loading="lazy"
+                      />
+                    } @else {
+                      <span class="adventure-node__icon">{{ nodeIcon(nodeView.node.type) }}</span>
+                    }
                     <span class="adventure-node__label">{{ t(nodeView.node.titleKey) }}</span>
                     <span class="adventure-node__stars">
                       @for (i of [0, 1, 2]; track i) {
@@ -63876,7 +63897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </div>
     </div>
-  `, styles: [".adventure-hub{padding:0 0 40px}.adventure-hub__header{padding:20px 16px 24px;text-align:center}.adventure-hub__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ion-color-medium);margin:0 0 6px}.adventure-hub__title{font-size:1.75rem;font-weight:800;margin:0 0 6px;color:var(--ion-text-color)}.adventure-hub__subtitle{font-size:.9rem;color:var(--ion-color-medium);margin:0 0 12px}.adventure-hub__stars{display:inline-flex;align-items:center;gap:4px;background:var(--ion-card-background, var(--ion-background-color));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:20px;padding:4px 14px;font-weight:700;font-size:.95rem;color:var(--ion-color-warning)}.adventure-hub__stars ion-icon{color:var(--ion-color-warning);font-size:1rem}.adventure-hub__acts{display:flex;flex-direction:column;gap:16px;padding:0 12px}.adventure-act{border-radius:16px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color));overflow:hidden}.adventure-act--locked{opacity:.5}.adventure-act--done{border-color:var(--ion-color-success)}.adventure-act__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.adventure-act__emoji{font-size:1.75rem;line-height:1;flex-shrink:0}.adventure-act__meta{flex:1;min-width:0}.adventure-act__name{font-size:1rem;font-weight:700;margin:0 0 2px;color:var(--ion-text-color)}.adventure-act__desc{font-size:.8rem;color:var(--ion-color-medium);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adventure-act__lock{color:var(--ion-color-medium);font-size:1.25rem;flex-shrink:0}.adventure-act__progress{font-size:.8rem;font-weight:700;color:var(--ion-color-medium);flex-shrink:0}.adventure-act__nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px}.adventure-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #f8f8f8);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}.adventure-node:active{transform:scale(.97)}.adventure-node--available{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 6%,transparent)}.adventure-node--completed{border-color:var(--ion-color-success);background:color-mix(in srgb,var(--ion-color-success) 6%,transparent)}.adventure-node--locked{opacity:.4;cursor:default}.adventure-node__icon{font-size:1.5rem;line-height:1}.adventure-node__label{font-size:.75rem;font-weight:600;color:var(--ion-text-color);line-height:1.2}.adventure-node__stars{display:flex;gap:1px}.adventure-node__star{font-size:.7rem;color:var(--ion-color-medium)}.adventure-node__star--filled{color:var(--ion-color-warning)}.adventure-node__badge{position:absolute;top:-4px;right:-4px;font-size:.6rem;padding:2px 5px}\n"] }]
+  `, styles: [".adventure-hub{padding:0 0 40px}.adventure-hub__header{padding:20px 16px 24px;text-align:center}.adventure-hub__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ion-color-medium);margin:0 0 6px}.adventure-hub__title{font-size:1.75rem;font-weight:800;margin:0 0 6px;color:var(--ion-text-color)}.adventure-hub__subtitle{font-size:.9rem;color:var(--ion-color-medium);margin:0 0 12px}.adventure-hub__stars{display:inline-flex;align-items:center;gap:4px;background:var(--ion-card-background, var(--ion-background-color));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:20px;padding:4px 14px;font-weight:700;font-size:.95rem;color:var(--ion-color-warning)}.adventure-hub__stars ion-icon{color:var(--ion-color-warning);font-size:1rem}.adventure-hub__acts{display:flex;flex-direction:column;gap:16px;padding:0 12px}.adventure-act{border-radius:16px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color));overflow:hidden}.adventure-act--locked{opacity:.5}.adventure-act--done{border-color:var(--ion-color-success)}.adventure-act__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.adventure-act__emoji{font-size:1.75rem;line-height:1;flex-shrink:0}.adventure-act__meta{flex:1;min-width:0}.adventure-act__name{font-size:1rem;font-weight:700;margin:0 0 2px;color:var(--ion-text-color)}.adventure-act__desc{font-size:.8rem;color:var(--ion-color-medium);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adventure-act__lock{color:var(--ion-color-medium);font-size:1.25rem;flex-shrink:0}.adventure-act__progress{font-size:.8rem;font-weight:700;color:var(--ion-color-medium);flex-shrink:0}.adventure-act__nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px}.adventure-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #f8f8f8);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}.adventure-node:active{transform:scale(.97)}.adventure-node--available{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 6%,transparent)}.adventure-node--completed{border-color:var(--ion-color-success);background:color-mix(in srgb,var(--ion-color-success) 6%,transparent)}.adventure-node--locked{opacity:.4;cursor:default}.adventure-node__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.adventure-node--available .adventure-node__avatar{border-color:var(--ion-color-primary)}.adventure-node--completed .adventure-node__avatar{border-color:var(--ion-color-success)}.adventure-node__icon{font-size:1.5rem;line-height:1}.adventure-node__label{font-size:.75rem;font-weight:600;color:var(--ion-text-color);line-height:1.2}.adventure-node__stars{display:flex;gap:1px}.adventure-node__star{font-size:.7rem;color:var(--ion-color-medium)}.adventure-node__star--filled{color:var(--ion-color-warning)}.adventure-node__badge{position:absolute;top:-4px;right:-4px;font-size:.6rem;padding:2px 5px}\n"] }]
         }], ctorParameters: () => [] });
 
 const ANIMALS$1 = ['eagle', 'bull', 'kangaroo', 'lion'];
@@ -68457,6 +68478,12 @@ class ChessimalsGameComponent {
     }
     backToHome() {
         this.cancelActiveGameplayFeedback();
+        const adventureNode = this.adventureNodeId();
+        if (adventureNode) {
+            this.adventureNodeId.set('');
+            void this.router.navigateByUrl('/mini-games/chessimals/adventure').catch(() => undefined);
+            return;
+        }
         this.screen.set('home');
         this.audio.flip();
     }
@@ -73992,7 +74019,14 @@ function canPlayCard(game, seat, card) {
     if (card.type === 'offering')
         return !player.offeringPlayedThisTurn;
     if (card.type === 'character') {
-        return readyOfferings(player) >= (card.cost ?? 0) && player.battleZone.length < CHRISTIANITY_BATTLE_SLOTS;
+        return (readyOfferings(player) >= (card.cost ?? 0) &&
+            player.battleZone.length < CHRISTIANITY_BATTLE_SLOTS);
+    }
+    if (card.type === 'action' ||
+        card.type === 'wisdom' ||
+        card.type === 'event' ||
+        card.type === 'tool') {
+        return readyOfferings(player) >= (card.cost ?? 0);
     }
     if (card.type === 'place')
         return true;
@@ -74028,7 +74062,7 @@ function playCardFromHand(game, seat, card, options = {}) {
         player.offeringPlayedThisTurn = true;
     }
     else if (card.type === 'character') {
-        const occupiedSlots = new Set(player.battleZone.map((character, index) => Number.isInteger(character.slot) ? character.slot ?? index : index));
+        const occupiedSlots = new Set(player.battleZone.map((character, index) => Number.isInteger(character.slot) ? (character.slot ?? index) : index));
         const targetSlot = options.slotIndex ?? [0, 1, 2, 3].find(index => !occupiedSlots.has(index));
         if (targetSlot === undefined || occupiedSlots.has(targetSlot)) {
             return { game, played: false, playedOfferingValue: 0, spentOfferings: 0, log: [] };
@@ -74050,6 +74084,18 @@ function playCardFromHand(game, seat, card, options = {}) {
         });
         player.battleZone.sort((left, right) => (left.slot ?? 0) - (right.slot ?? 0));
     }
+    else if (card.type === 'action' ||
+        card.type === 'wisdom' ||
+        card.type === 'event' ||
+        card.type === 'tool') {
+        spentOfferings = card.cost ?? 0;
+        if (spentOfferings > 0) {
+            spendOfferings(player, spentOfferings);
+        }
+        next.historyZone.push(card.id);
+        next.players[seat] = player;
+        resolveCardEffect(next, card, seat);
+    }
     else if (card.type === 'place') {
         const previousPlace = next.placeZone[0];
         if (previousPlace) {
@@ -74086,9 +74132,7 @@ function resolveOfferingAbility(game, seat, offeringInstanceId, messages) {
     }
     const reserveGain = offeringAbilityReserveGain(liveOffering.abilityText, liveOffering.value);
     player.temporaryOfferingReserve = (player.temporaryOfferingReserve ?? 0) + reserveGain;
-    player.offerings = player.offerings.map(card => (card.instanceId === offeringInstanceId
-        ? { ...card, abilityUsedThisTurn: true }
-        : card));
+    player.offerings = player.offerings.map(card => card.instanceId === offeringInstanceId ? { ...card, abilityUsedThisTurn: true } : card);
     player.leaderHp = Math.max(0, player.leaderHp - 1);
     next.revision++;
     const log = [`${liveOffering.name}: ${liveOffering.abilityName}.`];
@@ -74103,6 +74147,12 @@ function playCardLog(card, displayName) {
         return `${displayName} queda lista como ofrenda.`;
     if (card.type === 'place')
         return `${displayName} queda como lugar activo.`;
+    if (card.type === 'action' || card.type === 'event')
+        return `${displayName} fue jugada.`;
+    if (card.type === 'wisdom')
+        return `${displayName} fue revelada.`;
+    if (card.type === 'tool')
+        return `${displayName} fue equipada.`;
     return `${displayName} entra en batalla.`;
 }
 function resolveAttackLeader(game, attackerSeat, attackerInstanceId, messages) {
@@ -74117,7 +74167,9 @@ function resolveAttackLeader(game, attackerSeat, attackerInstanceId, messages) {
     const damage = attacker.attack;
     next.players[defenderSeat].leaderHp = Math.max(0, next.players[defenderSeat].leaderHp - damage);
     attacker.canAttack = false;
-    const log = [`${attacker.name} ${attackerSeat === 'P1' ? messages.attacksOpponentLeader : messages.attacksYourLeader}`];
+    const log = [
+        `${attacker.name} ${attackerSeat === 'P1' ? messages.attacksOpponentLeader : messages.attacksYourLeader}`,
+    ];
     evaluateVictory(next, log, messages);
     next.revision++;
     next.log = [...log, ...next.log].slice(0, 4);
@@ -74142,7 +74194,13 @@ function resolveAttackCharacter(game, attackerSeat, attackerInstanceId, targetIn
     evaluateVictory(next, log, messages);
     next.revision++;
     next.log = [...log, ...next.log].slice(0, 4);
-    return { game: next, attacked: true, attackerDamage: target.attack, targetDamage: attacker.attack, log };
+    return {
+        game: next,
+        attacked: true,
+        attackerDamage: target.attack,
+        targetDamage: attacker.attack,
+        log,
+    };
 }
 function advanceTurn(game, messages) {
     game.players[game.turnOwner].temporaryOfferingReserve = 0;
@@ -74150,7 +74208,11 @@ function advanceTurn(game, messages) {
     game.turnCount++;
     const current = game.players[game.turnOwner];
     current.offeringPlayedThisTurn = false;
-    current.offerings = current.offerings.map(offering => ({ ...offering, ready: true, abilityUsedThisTurn: false }));
+    current.offerings = current.offerings.map(offering => ({
+        ...offering,
+        ready: true,
+        abilityUsedThisTurn: false,
+    }));
     current.battleZone = current.battleZone.map(card => ({ ...card, canAttack: true }));
     const drawnCard = game.sharedDeck.shift();
     const log = [];
@@ -74172,16 +74234,16 @@ function advanceTurn(game, messages) {
     ];
 }
 function evaluateVictory(game, log, messages) {
-    if (game.players.P1.leaderHp > 0
-        && game.players.P2.leaderHp > 0
-        && game.sharedDeck.length > 0)
+    if (game.players.P1.leaderHp > 0 && game.players.P2.leaderHp > 0 && game.sharedDeck.length > 0)
         return;
     game.status = 'finished';
     const winner = game.players.P1.leaderHp <= 0
         ? 'P2'
         : game.players.P2.leaderHp <= 0
             ? 'P1'
-            : game.players.P1.leaderHp >= game.players.P2.leaderHp ? 'P1' : 'P2';
+            : game.players.P1.leaderHp >= game.players.P2.leaderHp
+                ? 'P1'
+                : 'P2';
     game.matchScore[winner] += 1;
     log.push(winner === 'P1' ? messages.youWin : messages.opponentWins);
 }
@@ -74215,6 +74277,144 @@ function offeringAbilityReserveGain(abilityText, fallbackValue) {
 function opponentSeat(seat) {
     return seat === 'P1' ? 'P2' : 'P1';
 }
+// --- Effect resolution (H7) ---
+function resolveCardEffect(game, card, seat) {
+    const text = card.abilities?.[0]?.text ?? '';
+    switch (card.strategy) {
+        case 'directdamage':
+            effectDirectDamage(game, card, text, seat);
+            break;
+        case 'restore':
+            effectRestore(game, card, text, seat);
+            break;
+        case 'draw':
+            effectDraw(game, card, text, seat);
+            break;
+        case 'discard':
+            effectDiscard(game, card, text, seat);
+            break;
+    }
+}
+function effectDirectDamage(game, card, text, seat) {
+    const opponent = opponentSeat(seat);
+    const lower = text.toLowerCase();
+    let dmg;
+    if (lower.includes('tantos')) {
+        dmg = game.players[seat].battleZone.length;
+    }
+    else {
+        dmg = parseSpanishNumber(text);
+    }
+    if (dmg <= 0)
+        return;
+    game.players[opponent].leaderHp = Math.max(0, game.players[opponent].leaderHp - dmg);
+}
+function effectRestore(game, card, text, seat) {
+    const lower = text.toLowerCase();
+    const n = Math.max(1, parseSpanishNumber(text) || 1);
+    if (lower.includes('los líderes') || lower.includes('los lideres')) {
+        for (const s of ['P1', 'P2']) {
+            const p = game.players[s];
+            p.leaderHp = Math.min(p.leaderMaxHp ?? 30, p.leaderHp + n);
+        }
+        return;
+    }
+    if (lower.includes('tus personajes') || lower.includes('personajes en juego')) {
+        for (const ch of game.players[seat].battleZone) {
+            ch.currentHp = Math.min(ch.maxHp, ch.currentHp + n);
+        }
+        return;
+    }
+    if (lower.includes('del líder') ||
+        lower.includes('al líder') ||
+        lower.includes('del lider') ||
+        lower.includes('al lider')) {
+        const p = game.players[seat];
+        p.leaderHp = Math.min(p.leaderMaxHp ?? 30, p.leaderHp + n);
+    }
+}
+function effectDraw(game, card, text, seat) {
+    const lower = text.toLowerCase();
+    if (lower.includes('los jugadores')) {
+        const n = Math.max(1, parseSpanishNumber(text) || 1);
+        for (let i = 0; i < n; i++) {
+            drawCardFor(game, 'P1');
+            drawCardFor(game, 'P2');
+        }
+        return;
+    }
+    if (lower.includes('por cada personaje oponente')) {
+        const n = game.players[opponentSeat(seat)].battleZone.length;
+        for (let i = 0; i < n; i++)
+            drawCardFor(game, seat);
+        return;
+    }
+    const n = Math.max(1, parseSpanishNumber(text) || 1);
+    for (let i = 0; i < n; i++)
+        drawCardFor(game, seat);
+}
+function effectDiscard(game, card, text, seat) {
+    const lower = text.toLowerCase();
+    const opponent = opponentSeat(seat);
+    if (lower.includes('ambos jugadores descartan su mano') ||
+        lower.includes('los jugadores descartan su mano')) {
+        for (const s of ['P1', 'P2']) {
+            const p = game.players[s];
+            game.historyZone.push(...(p.hand ?? []));
+            p.hand = [];
+        }
+        return;
+    }
+    if ((lower.includes('oponente') && lower.includes('azar')) ||
+        lower.includes('tu oponente descarta')) {
+        const n = Math.max(1, parseSpanishNumber(text) || 1);
+        const op = game.players[opponent];
+        const hand = op.hand ?? [];
+        let seed = game.revision * 31 + game.turnCount * 7;
+        for (let i = 0; i < n && hand.length > 0; i++) {
+            seed = (seed * 1664525 + 1013904223) & 0xffffffff;
+            const idx = Math.abs(seed) % hand.length;
+            game.historyZone.push(hand[idx]);
+            hand.splice(idx, 1);
+        }
+        op.hand = hand;
+    }
+}
+function drawCardFor(game, seat) {
+    const card = game.sharedDeck.shift();
+    if (!card)
+        return;
+    const p = game.players[seat];
+    if (p.hand)
+        p.hand.push(card);
+    else
+        p.handCount = (p.handCount ?? 0) + 1;
+}
+function parseSpanishNumber(text) {
+    const words = {
+        un: 1,
+        una: 1,
+        uno: 1,
+        dos: 2,
+        tres: 3,
+        cuatro: 4,
+        cinco: 5,
+        seis: 6,
+        siete: 7,
+        ocho: 8,
+        nueve: 9,
+        diez: 10,
+    };
+    const digitMatch = text.match(/\b(\d+)\b/);
+    if (digitMatch)
+        return parseInt(digitMatch[1], 10);
+    const lower = text.toLowerCase();
+    for (const [word, n] of Object.entries(words)) {
+        if (new RegExp(`\\b${word}\\b`).test(lower))
+            return n;
+    }
+    return 0;
+}
 
 class ChristianityCardComponent {
     constructor() {
@@ -74573,10 +74773,58 @@ const STARTER_CARDS = {
         author: 'MVP',
         rarity: 'normal',
     },
-    p_guard: { id: 'p_guard', name: 'Guard', type: 'character', cost: 2, attack: 1, life: 3, edition: 'GEN', collectorNumber: '003/020', year: '2026', author: 'MVP', rarity: 'normal' },
-    p_warrior: { id: 'p_warrior', name: 'Warrior', type: 'character', cost: 2, attack: 2, life: 2, edition: 'GEN', collectorNumber: '004/020', year: '2026', author: 'MVP', rarity: 'normal' },
-    p_elder: { id: 'p_elder', name: 'Elder', type: 'character', cost: 3, attack: 2, life: 4, edition: 'GEN', collectorNumber: '005/020', year: '2026', author: 'MVP', rarity: 'uncommon' },
-    p_champion: { id: 'p_champion', name: 'Champion', type: 'character', cost: 4, attack: 4, life: 4, edition: 'GEN', collectorNumber: '006/020', year: '2026', author: 'MVP', rarity: 'rare' },
+    p_guard: {
+        id: 'p_guard',
+        name: 'Guard',
+        type: 'character',
+        cost: 2,
+        attack: 1,
+        life: 3,
+        edition: 'GEN',
+        collectorNumber: '003/020',
+        year: '2026',
+        author: 'MVP',
+        rarity: 'normal',
+    },
+    p_warrior: {
+        id: 'p_warrior',
+        name: 'Warrior',
+        type: 'character',
+        cost: 2,
+        attack: 2,
+        life: 2,
+        edition: 'GEN',
+        collectorNumber: '004/020',
+        year: '2026',
+        author: 'MVP',
+        rarity: 'normal',
+    },
+    p_elder: {
+        id: 'p_elder',
+        name: 'Elder',
+        type: 'character',
+        cost: 3,
+        attack: 2,
+        life: 4,
+        edition: 'GEN',
+        collectorNumber: '005/020',
+        year: '2026',
+        author: 'MVP',
+        rarity: 'uncommon',
+    },
+    p_champion: {
+        id: 'p_champion',
+        name: 'Champion',
+        type: 'character',
+        cost: 4,
+        attack: 4,
+        life: 4,
+        edition: 'GEN',
+        collectorNumber: '006/020',
+        year: '2026',
+        author: 'MVP',
+        rarity: 'rare',
+    },
 };
 const STARTING_SHARED_DECK = [
     'o_simple',
@@ -74620,7 +74868,14 @@ const STARTING_GAME = {
             leaderHp: 15,
             leaderMaxHp: 15,
             offerings: [
-                { instanceId: 'p1_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P1', ready: true, value: 1 },
+                {
+                    instanceId: 'p1_offering_001',
+                    cardId: 'o_simple',
+                    name: 'Ofrenda simple',
+                    owner: 'P1',
+                    ready: true,
+                    value: 1,
+                },
                 {
                     instanceId: 'p1_offering_002',
                     cardId: 'o_forbidden',
@@ -74645,7 +74900,16 @@ const STARTING_GAME = {
             leaderName: 'Noah',
             leaderHp: 15,
             leaderMaxHp: 15,
-            offerings: [{ instanceId: 'p2_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P2', ready: true, value: 1 }],
+            offerings: [
+                {
+                    instanceId: 'p2_offering_001',
+                    cardId: 'o_simple',
+                    name: 'Ofrenda simple',
+                    owner: 'P2',
+                    ready: true,
+                    value: 1,
+                },
+            ],
             offeringPlayedThisTurn: false,
             handCount: 4,
             battleZone: [
@@ -74680,7 +74944,9 @@ class ChristianityGameComponent {
         const nextIndex = (currentIndex + direction + items.length) % items.length;
         const item = items[nextIndex];
         if (item.kind === 'history') {
-            return this.definitionToRenderCard(this.cardDefinition(item.cardId), { statusText: this.t('christianityHistory') });
+            return this.definitionToRenderCard(this.cardDefinition(item.cardId), {
+                statusText: this.t('christianityHistory'),
+            });
         }
         if (item.kind === 'hand') {
             return this.definitionToRenderCard(this.cardDefinition(item.cardId));
@@ -74787,7 +75053,9 @@ class ChristianityGameComponent {
             if (this.tutorialPhase() === 'coin') {
                 return setup.coinWinner === 'P1' ? this.t('christianityCoinYouWon') : this.t('christianityCoinRivalWon');
             }
-            return setup.leaderPicker === 'P1' ? this.t('christianityChooseLeaderTitle') : this.t('christianityRivalChoosesLeaderTitle');
+            return setup.leaderPicker === 'P1'
+                ? this.t('christianityChooseLeaderTitle')
+                : this.t('christianityRivalChoosesLeaderTitle');
         });
         this.setupBody = computed(() => {
             const setup = this.tutorialSetup();
@@ -74814,7 +75082,11 @@ class ChristianityGameComponent {
         this.hasOpponentGuards = computed(() => this.opponent().battleZone.length > 0);
         this.opponentHandCount = computed(() => this.opponent().handCount ?? this.opponent().hand?.length ?? 0);
         this.galleryCards = computed(() => {
-            const query = this.gallerySearch().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+            const query = this.gallerySearch()
+                .trim()
+                .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, '');
             const type = this.galleryType();
             return this.allCatalogCards()
                 .filter(card => this.isClassicGalleryCard(card))
@@ -74849,12 +75121,12 @@ class ChristianityGameComponent {
             { value: 'place', label: this.t('christianityPlaceCard') },
             { value: 'event', label: this.t('christianityEventCard') },
         ]);
-        this.hasModalOverlay = computed(() => !!this.selectedPreview()
-            || !!this.selectedInfo()
-            || this.showHistory()
-            || this.showPlace()
-            || this.showGallery()
-            || !!this.offeringsSeat());
+        this.hasModalOverlay = computed(() => !!this.selectedPreview() ||
+            !!this.selectedInfo() ||
+            this.showHistory() ||
+            this.showPlace() ||
+            this.showGallery() ||
+            !!this.offeringsSeat());
         this.previewCarouselItems = computed(() => this.currentPreviewCarouselItems());
         this.canNavigatePreview = computed(() => this.previewCarouselItems().length > 1);
         this.previewPositionLabel = computed(() => {
@@ -74880,25 +75152,28 @@ class ChristianityGameComponent {
                     canUse: this.canUsePreviewAbility(index),
                 }))
                 : text.abilityName || text.abilityText
-                    ? [{
+                    ? [
+                        {
                             index: 0,
                             title: text.abilityName ?? this.t('christianityAbility'),
                             body: text.abilityText ?? '',
                             canUse: this.canUsePreviewAbility(0),
-                        }]
-                    : [{
+                        },
+                    ]
+                    : [
+                        {
                             index: 0,
                             title: this.t('christianityNoAbilityTitle'),
                             body: this.t('christianityNoAbilityBody'),
                             canUse: false,
-                        }];
+                        },
+                    ];
             return abilities;
         });
         this.showPreviewAbilityTabs = computed(() => {
             const abilities = this.previewAbilities();
-            return abilities.length > 1
-                || !this.isPreviewAbilityPlaceholder(abilities[0])
-                    && (abilities[0]?.title ?? '') !== this.t('christianityAbility');
+            return (abilities.length > 1 ||
+                (!this.isPreviewAbilityPlaceholder(abilities[0]) && (abilities[0]?.title ?? '') !== this.t('christianityAbility')));
         });
         this.showPreviewAbilities = computed(() => {
             const preview = this.selectedPreview();
@@ -75071,7 +75346,9 @@ class ChristianityGameComponent {
                 return this.t('christianityWaitTurn');
             }
             if (attacker) {
-                return this.hasOpponentGuards() ? this.t('christianityChooseCharacterTarget') : this.t('christianityChooseTarget');
+                return this.hasOpponentGuards()
+                    ? this.t('christianityChooseCharacterTarget')
+                    : this.t('christianityChooseTarget');
             }
             if (handCard) {
                 if (!this.canPlay(handCard)) {
@@ -75080,12 +75357,18 @@ class ChristianityGameComponent {
                 if (handCard.type === 'place') {
                     return this.t('christianityChoosePlaceSlot');
                 }
+                if (handCard.type === 'action' ||
+                    handCard.type === 'wisdom' ||
+                    handCard.type === 'event' ||
+                    handCard.type === 'tool') {
+                    return this.t('christianityPlayCard');
+                }
                 return handCard.type === 'offering' ? this.t('christianityPlaceOffering') : this.t('christianityChooseSlot');
             }
             return this.t('christianityChooseCard');
         });
         this.i18n.registerDefaults('MiniGames', MINI_GAMES_I18N);
-        effect((onCleanup) => {
+        effect(onCleanup => {
             if (!this.hasModalOverlay())
                 return;
             const previousOverflow = this.document.body.style.overflow;
@@ -75141,7 +75424,7 @@ class ChristianityGameComponent {
         try {
             const response = await fetch(GENESIS_CATALOG_URL);
             if (response.ok) {
-                const catalog = await response.json();
+                const catalog = (await response.json());
                 const cards = (catalog.cards ?? []).map(card => this.normalizeCatalogCard(card, catalog));
                 if (cards.length) {
                     this.cardCatalog.set(Object.fromEntries(cards.map(card => [card.id, card])));
@@ -75171,19 +75454,19 @@ class ChristianityGameComponent {
         const editionIcon = card.editionIcon ?? catalog.edition?.icon ?? GENESIS_ICON_URL;
         const verseText = card.verseText ?? card.bible?.text;
         const scripture = card.scripture ?? this.formatScripture(card.bible);
-        const offeringValue = card.type === 'offering' ? card.offeringValue ?? card.life ?? card.cost ?? 1 : card.offeringValue;
+        const offeringValue = card.type === 'offering' ? (card.offeringValue ?? card.life ?? card.cost ?? 1) : card.offeringValue;
         const life = card.type === 'leader'
-            ? card.leaderLife ?? card.life ?? 10
+            ? (card.leaderLife ?? card.life ?? 10)
             : card.type === 'offering'
                 ? offeringValue
-                : card.life ?? 0;
+                : (card.life ?? 0);
         return {
             ...card,
-            cost: card.type === 'offering' ? 0 : card.cost ?? 0,
+            cost: card.type === 'offering' ? 0 : (card.cost ?? 0),
             offeringValue,
             life,
-            leaderLife: card.type === 'leader' ? card.leaderLife ?? life : card.leaderLife,
-            attack: card.type === 'character' ? card.attack ?? 0 : card.attack,
+            leaderLife: card.type === 'leader' ? (card.leaderLife ?? life) : card.leaderLife,
+            attack: card.type === 'character' ? (card.attack ?? 0) : card.attack,
             abilityName: card.abilityName ?? card.abilities?.[0]?.name,
             abilityText: card.abilityText ?? card.abilities?.[0]?.text,
             verseText,
@@ -75205,21 +75488,27 @@ class ChristianityGameComponent {
     createTutorialGame(cards, options = {}) {
         const leaders = this.tutorialLeaderCards(cards);
         const playerLeader = this.cardById(options.playerLeaderId) ?? this.findCard(leaders, 'Adán') ?? leaders[0];
-        const opponentLeader = this.cardById(options.opponentLeaderId) ?? this.findCard(leaders, 'Noé') ?? leaders.find(card => card.id !== playerLeader?.id) ?? leaders[0];
-        const offerings = cards.filter(card => card.type === 'offering' && this.isClassicGalleryCard(card)).slice(0, TUTORIAL_OFFERING_LIMIT);
+        const opponentLeader = this.cardById(options.opponentLeaderId) ??
+            this.findCard(leaders, 'Noé') ??
+            leaders.find(card => card.id !== playerLeader?.id) ??
+            leaders[0];
+        const offerings = cards
+            .filter(card => card.type === 'offering' && this.isClassicGalleryCard(card))
+            .slice(0, TUTORIAL_OFFERING_LIMIT);
         const places = cards.filter(card => card.type === 'place');
         const characters = cards
-            .filter(card => card.type === 'character' && this.isClassicGalleryCard(card) && (card.cost ?? 0) <= 4 && (card.attack ?? 0) >= 0 && (card.life ?? 0) > 0)
+            .filter(card => card.type === 'character' &&
+            this.isClassicGalleryCard(card) &&
+            (card.cost ?? 0) <= 4 &&
+            (card.attack ?? 0) >= 0 &&
+            (card.life ?? 0) > 0)
             .slice(0, TUTORIAL_CHARACTER_LIMIT);
-        const tutorialDeck = [
-            ...offerings,
-            ...characters,
-            ...offerings,
-            ...characters.slice(0, 6),
-        ].slice(0, 28);
+        const tutorialDeck = [...offerings, ...characters, ...offerings, ...characters.slice(0, 6)].slice(0, 28);
         const shuffledDeck = this.prepareTutorialOpeningDeck(this.shuffleCards(tutorialDeck, options.seed ?? TUTORIAL_SEED));
         const playerHand = shuffledDeck.slice(0, TUTORIAL_OPENING_HAND_SIZE).map(card => card.id);
-        const opponentHand = shuffledDeck.slice(TUTORIAL_OPENING_HAND_SIZE, TUTORIAL_OPENING_HAND_SIZE * 2).map(card => card.id);
+        const opponentHand = shuffledDeck
+            .slice(TUTORIAL_OPENING_HAND_SIZE, TUTORIAL_OPENING_HAND_SIZE * 2)
+            .map(card => card.id);
         const sharedDeck = shuffledDeck.slice(TUTORIAL_OPENING_HAND_SIZE * 2).map(card => card.id);
         return {
             ...structuredClone(STARTING_GAME),
@@ -75289,7 +75578,7 @@ class ChristianityGameComponent {
         return cards.find(card => this.translatedCardText(card).name.toLowerCase().includes(namePart.toLowerCase()));
     }
     cardById(cardId) {
-        return cardId ? this.cardCatalog()[cardId] ?? STARTER_CARDS[cardId] : undefined;
+        return cardId ? (this.cardCatalog()[cardId] ?? STARTER_CARDS[cardId]) : undefined;
     }
     tutorialLeaderCards(cards) {
         const leaders = cards
@@ -75391,7 +75680,7 @@ class ChristianityGameComponent {
             type: card.type,
             typeLabel: this.cardTypeLabel(card),
             cost: card.cost,
-            offeringValue: card.type === 'offering' ? card.offeringValue ?? card.life : undefined,
+            offeringValue: card.type === 'offering' ? (card.offeringValue ?? card.life) : undefined,
             attack: card.type === 'character' ? card.attack : undefined,
             life: card.life,
             currentHp: card.life,
@@ -75529,8 +75818,17 @@ class ChristianityGameComponent {
         return this.cardTypeIconUrlForType('character');
     }
     cardTypeIconUrlForType(type) {
-        const normalized = type.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        const icon = normalized === 'lider' ? 'leader' : normalized === 'personaje' ? 'character' : normalized === 'ofrenda' ? 'offering' : normalized;
+        const normalized = type
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const icon = normalized === 'lider'
+            ? 'leader'
+            : normalized === 'personaje'
+                ? 'character'
+                : normalized === 'ofrenda'
+                    ? 'offering'
+                    : normalized;
         return `assets/games/christianity/icons/${icon}.png`;
     }
     offeringPips(value) {
@@ -75543,7 +75841,7 @@ class ChristianityGameComponent {
         const cards = this.game().players[seat].battleZone;
         const positionedCards = new Map();
         cards.forEach((card, index) => {
-            const slot = Number.isInteger(card.slot) ? card.slot ?? index : index;
+            const slot = Number.isInteger(card.slot) ? (card.slot ?? index) : index;
             if (slot >= 0 && slot < 4 && !positionedCards.has(slot)) {
                 positionedCards.set(slot, card);
             }
@@ -75557,13 +75855,20 @@ class ChristianityGameComponent {
         return `christianity-battle-slot-${index}`;
     }
     dropTargetIds() {
-        return ['christianity-offerings-drop', 'christianity-place-drop', ...this.battleSlots('P1').map((_, index) => this.battleSlotDropId(index))];
+        return [
+            'christianity-offerings-drop',
+            'christianity-place-drop',
+            ...this.battleSlots('P1').map((_, index) => this.battleSlotDropId(index)),
+        ];
     }
     ownAttackerDropSourceIds() {
         return ['christianity-player-battle-source'];
     }
     attackTargetDropIds() {
-        return ['christianity-opponent-leader-drop', ...this.opponent().battleZone.map(card => this.opponentTargetDropId(card))];
+        return [
+            'christianity-opponent-leader-drop',
+            ...this.opponent().battleZone.map(card => this.opponentTargetDropId(card)),
+        ];
     }
     opponentTargetDropId(card) {
         return `christianity-opponent-target-${card.instanceId}`;
@@ -75699,7 +76004,11 @@ class ChristianityGameComponent {
         return `christianity-use-offering-${offering.owner}-${this.testIdPart(offering.instanceId)}`;
     }
     testIdPart(value) {
-        return value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 48) || 'item';
+        return (value
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '')
+            .slice(0, 48) || 'item');
     }
     canPlaySelected() {
         const selected = this.selectedHandCard();
@@ -75815,10 +76124,10 @@ class ChristianityGameComponent {
         this.attackLeader();
     }
     isValidAttackerInstance(instanceId) {
-        return this.game().status === 'in_progress'
-            && this.isOwnTurn()
-            && !this.combatAnimation()
-            && this.player().battleZone.some(card => card.instanceId === instanceId && card.canAttack);
+        return (this.game().status === 'in_progress' &&
+            this.isOwnTurn() &&
+            !this.combatAnimation() &&
+            this.player().battleZone.some(card => card.instanceId === instanceId && card.canAttack));
     }
     selectHandCard(cardId) {
         const wasSelected = this.selectedHandCard() === cardId;
@@ -75831,9 +76140,7 @@ class ChristianityGameComponent {
         if (!cardId)
             return;
         const card = this.cardDefinition(cardId);
-        const resolvedSlotIndex = card.type === 'character' && slotIndex === undefined
-            ? this.firstAvailableBattleSlotIndex()
-            : slotIndex;
+        const resolvedSlotIndex = card.type === 'character' && slotIndex === undefined ? this.firstAvailableBattleSlotIndex() : slotIndex;
         this.playCardFromHand(cardId, resolvedSlotIndex);
     }
     firstAvailableBattleSlotIndex() {
@@ -75914,7 +76221,12 @@ class ChristianityGameComponent {
             });
             return;
         }
-        this.startCombatAnimation({ attackerInstanceId: attacker.instanceId, attackerSeat: 'P1', targetSeat: 'P2', target: 'leader' });
+        this.startCombatAnimation({
+            attackerInstanceId: attacker.instanceId,
+            attackerSeat: 'P1',
+            targetSeat: 'P2',
+            target: 'leader',
+        });
         this.selectedAttacker.set(null);
         this.combatResolutionTimer = window.setTimeout(() => {
             let damage = 0;
@@ -76009,7 +76321,7 @@ class ChristianityGameComponent {
         this.resetTransientTableState();
         const setup = this.createTutorialSetup();
         this.tutorialSetup.set(setup);
-        this.selectedTutorialLeaderId.set(setup.leaderPicker === 'P1' ? setup.availableLeaders[0] ?? null : null);
+        this.selectedTutorialLeaderId.set(setup.leaderPicker === 'P1' ? (setup.availableLeaders[0] ?? null) : null);
         this.leaderChoiceSeconds.set(TUTORIAL_LEADER_CHOICE_SECONDS);
         this.tutorialPhase.set('coin');
         this.screen.set('table');
@@ -76071,7 +76383,7 @@ class ChristianityGameComponent {
             return;
         this.selectTutorialLeader(leaderId);
         this.inspectHandCard(leaderId);
-        this.selectedPreview.update(preview => preview ? { ...preview, source: 'leader-choice' } : preview);
+        this.selectedPreview.update(preview => (preview ? { ...preview, source: 'leader-choice' } : preview));
     }
     toggleOptions() {
         this.showOptions.update(value => !value);
@@ -76428,7 +76740,7 @@ class ChristianityGameComponent {
         }
     }
     combatAnimationAttacker(animation) {
-        return this.game().players[animation.attackerSeat].battleZone.find(card => card.instanceId === animation.attackerInstanceId) ?? null;
+        return (this.game().players[animation.attackerSeat].battleZone.find(card => card.instanceId === animation.attackerInstanceId) ?? null);
     }
     combatAnimationTargetLabel(animation) {
         if (animation.target === 'leader') {
@@ -76467,7 +76779,7 @@ class ChristianityGameComponent {
         const dx = to.x - from.x;
         const dy = to.y - from.y;
         const length = Math.max(12, Math.hypot(dx, dy));
-        const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+        const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
         return {
             fromX: `${from.x}%`,
             fromY: `${from.y}%`,
@@ -76557,7 +76869,9 @@ class ChristianityGameComponent {
         const offeringId = hand.find(cardId => this.cardDefinition(cardId).type === 'offering' && canPlayCard(game, 'P2', this.cardDefinition(cardId)));
         if (offeringId) {
             const card = this.cardDefinition(offeringId);
-            const result = playCardFromHand(game, 'P2', card, { displayName: this.translatedCardText(card).name });
+            const result = playCardFromHand(game, 'P2', card, {
+                displayName: this.translatedCardText(card).name,
+            });
             if (result.played) {
                 Object.assign(game, result.game);
                 log.push(...result.log);
@@ -76628,7 +76942,9 @@ class ChristianityGameComponent {
             title: leader ? this.translatedCardText(leader).name : player.leaderName,
             eyebrow: this.t('christianityLeaderCard'),
             meta: `${player.leaderHp}/${player.leaderMaxHp}`,
-            body: seat === 'P2' && this.hasOpponentGuards() ? this.t('christianityLeaderProtected') : this.t('christianityLeaderBody'),
+            body: seat === 'P2' && this.hasOpponentGuards()
+                ? this.t('christianityLeaderProtected')
+                : this.t('christianityLeaderBody'),
             cardId: player.leaderCardId,
             source: 'board',
         });
@@ -76703,7 +77019,7 @@ class ChristianityGameComponent {
         const preview = this.selectedPreview();
         if (!preview?.seat || !preview.offeringInstanceId)
             return null;
-        return this.game().players[preview.seat].offerings.find(card => card.instanceId === preview.offeringInstanceId) ?? null;
+        return (this.game().players[preview.seat].offerings.find(card => card.instanceId === preview.offeringInstanceId) ?? null);
     }
     canUsePreviewAbility(index) {
         const offering = this.selectedPreviewOffering();
@@ -76724,7 +77040,9 @@ class ChristianityGameComponent {
                 this.t('christianityDeckRuleShared'),
                 this.t('christianityDeckRuleDraw'),
                 this.t('christianityDeckRuleEmpty'),
-                nextCard ? `${this.t('christianityDeckNextCard')}: ${this.cardDisplayName(nextCard)}` : this.t('christianityDeckNoNextCard'),
+                nextCard
+                    ? `${this.t('christianityDeckNextCard')}: ${this.cardDisplayName(nextCard)}`
+                    : this.t('christianityDeckNoNextCard'),
             ],
         });
     }
@@ -76739,15 +77057,12 @@ class ChristianityGameComponent {
             eyebrow: this.t('christianitySharedZone'),
             meta: this.t('christianityEmpty'),
             body: this.t('christianityPlaceRuleBody'),
-            facts: [
-                this.t('christianityPlaceSlotPlayable'),
-                this.t('christianityPlaceOnlyOne'),
-            ],
+            facts: [this.t('christianityPlaceSlotPlayable'), this.t('christianityPlaceOnlyOne')],
         });
     }
     inspectPlaceCard(cardId) {
         this.inspectHandCard(cardId);
-        this.selectedPreview.update(preview => preview ? { ...preview, source: 'place' } : preview);
+        this.selectedPreview.update(preview => (preview ? { ...preview, source: 'place' } : preview));
     }
     inspectHowToPlay() {
         this.selectedPreview.set(null);
@@ -76784,11 +77099,11 @@ class ChristianityGameComponent {
     }
     inspectGalleryCard(cardId) {
         this.inspectHandCard(cardId);
-        this.selectedPreview.update(preview => preview ? { ...preview, source: 'gallery' } : preview);
+        this.selectedPreview.update(preview => (preview ? { ...preview, source: 'gallery' } : preview));
     }
     inspectHistoryCard(cardId) {
         this.inspectHandCard(cardId);
-        this.selectedPreview.update(preview => preview ? { ...preview, source: 'history' } : preview);
+        this.selectedPreview.update(preview => (preview ? { ...preview, source: 'history' } : preview));
     }
     inspectCharacter(card) {
         this.selectedInfo.set(null);
@@ -76892,418 +77207,276 @@ class ChristianityGameComponent {
           </section>
         </section>
       } @else {
-      <section class="christianity-match-strip" data-testid="christianity-match-strip" [attr.aria-label]="t('christianityMatchScore')">
-        <article class="christianity-match-player">
-          <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
-          <div>
-            <strong>{{ player().displayName }}</strong>
-            <small>{{ playerLeaderDisplayName(player()) }} · {{ player().leaderHp }}/{{ player().leaderMaxHp }}</small>
-          </div>
-        </article>
-        <div class="christianity-scoreboard">
-          <span>{{ t('christianityMatch') }}</span>
-          <strong>{{ game().matchScore.P1 }}-{{ game().matchScore.P2 }}</strong>
-        </div>
-        <article class="christianity-match-player christianity-match-player--opponent">
-          <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-          <div>
-            <strong>{{ opponent().displayName }}</strong>
-            <small>{{ playerLeaderDisplayName(opponent()) }} · {{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</small>
+        <section
+          class="christianity-match-strip"
+          data-testid="christianity-match-strip"
+          [attr.aria-label]="t('christianityMatchScore')"
+        >
+          <article class="christianity-match-player">
+            <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
+            <div>
+              <strong>{{ player().displayName }}</strong>
+              <small
+                >{{ playerLeaderDisplayName(player()) }} · {{ player().leaderHp }}/{{ player().leaderMaxHp }}</small
+              >
+            </div>
+          </article>
+          <div class="christianity-scoreboard">
+            <span>{{ t('christianityMatch') }}</span>
+            <strong>{{ game().matchScore.P1 }}-{{ game().matchScore.P2 }}</strong>
           </div>
-        </article>
-      </section>
+          <article class="christianity-match-player christianity-match-player--opponent">
+            <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
+            <div>
+              <strong>{{ opponent().displayName }}</strong>
+              <small
+                >{{ playerLeaderDisplayName(opponent()) }} · {{ opponent().leaderHp }}/{{
+                  opponent().leaderMaxHp
+                }}</small
+              >
+            </div>
+          </article>
+        </section>
 
-      <section
-        class="christianity-turn-banner"
-        data-testid="christianity-turn-banner"
-        [class.is-own-turn]="isOwnTurn()"
-        [class.is-rival-turn]="!isOwnTurn() && game().status === 'in_progress'"
-        [class.is-finished]="game().status === 'finished'"
-        aria-live="polite"
-      >
-        <div>
-          <span>{{ t('christianityTurn') }} {{ game().turnCount }}</span>
-          <strong>{{ turnBannerTitle() }}</strong>
-          <p>{{ turnBannerBody() }}</p>
-        </div>
-        <div class="christianity-turn-actions">
-          <button
-            type="button"
-            class="christianity-end-turn"
-            data-testid="christianity-end-turn"
-            [disabled]="!isOwnTurn() || tutorialPhase() !== 'in_progress' || !!combatAnimation()"
-            (click)="endTurn()"
-          >
-            {{ t('christianityEndTurn') }}
-          </button>
-          <button type="button" class="christianity-options-button" data-testid="christianity-options-button" valLightRipple (click)="toggleOptions()">
-            {{ t('christianityOptions') }}
-          </button>
-        </div>
-        @if (showOptions()) {
-          <div class="christianity-options-menu" data-testid="christianity-options-menu">
-            <button type="button" (click)="restartTutorial()">{{ t('christianityRestart') }}</button>
-            <button type="button" [disabled]="game().status === 'finished'" (click)="resignTutorial()">{{ t('christianityResign') }}</button>
-            <button type="button" (click)="returnToChristianityHome()">{{ t('christianityBackToMenu') }}</button>
+        <section
+          class="christianity-turn-banner"
+          data-testid="christianity-turn-banner"
+          [class.is-own-turn]="isOwnTurn()"
+          [class.is-rival-turn]="!isOwnTurn() && game().status === 'in_progress'"
+          [class.is-finished]="game().status === 'finished'"
+          aria-live="polite"
+        >
+          <div>
+            <span>{{ t('christianityTurn') }} {{ game().turnCount }}</span>
+            <strong>{{ turnBannerTitle() }}</strong>
+            <p>{{ turnBannerBody() }}</p>
           </div>
-        }
-      </section>
-
-      <section class="christianity-hand-shelf christianity-hand-shelf--opponent">
-        <div class="christianity-hand-meter christianity-hand-meter--opponent">
-          <span>{{ t('christianityHand') }}</span>
-          <strong>{{ opponentHandCount() }}</strong>
-        </div>
-        <section class="christianity-hand-fan christianity-hand-fan--opponent" data-testid="christianity-opponent-hand" [attr.aria-label]="t('christianityOpponentHand')">
-          @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
+          <div class="christianity-turn-actions">
             <button
               type="button"
-              class="christianity-hidden-card-button christianity-render-card-button"
+              class="christianity-end-turn"
+              data-testid="christianity-end-turn"
+              [disabled]="!isOwnTurn() || tutorialPhase() !== 'in_progress' || !!combatAnimation()"
+              (click)="endTurn()"
+            >
+              {{ t('christianityEndTurn') }}
+            </button>
+            <button
+              type="button"
+              class="christianity-options-button"
+              data-testid="christianity-options-button"
               valLightRipple
-              [style.transform]="fanTransform($index, opponentHandCount(), true)"
-              [attr.aria-label]="t('christianityHiddenCard')"
+              (click)="toggleOptions()"
             >
-              <val-christianity-card [card]="hiddenCardRenderCard()" variant="back"></val-christianity-card>
+              {{ t('christianityOptions') }}
             </button>
+          </div>
+          @if (showOptions()) {
+            <div class="christianity-options-menu" data-testid="christianity-options-menu">
+              <button type="button" (click)="restartTutorial()">{{ t('christianityRestart') }}</button>
+              <button type="button" [disabled]="game().status === 'finished'" (click)="resignTutorial()">
+                {{ t('christianityResign') }}
+              </button>
+              <button type="button" (click)="returnToChristianityHome()">{{ t('christianityBackToMenu') }}</button>
+            </div>
           }
         </section>
-      </section>
 
-      <section class="christianity-table" data-testid="christianity-table" [attr.aria-label]="t('christianityTable')">
-        @if (tutorialPhase() !== 'in_progress' && tutorialPhase() !== 'finished') {
+        <section class="christianity-hand-shelf christianity-hand-shelf--opponent">
+          <div class="christianity-hand-meter christianity-hand-meter--opponent">
+            <span>{{ t('christianityHand') }}</span>
+            <strong>{{ opponentHandCount() }}</strong>
+          </div>
           <section
-            class="christianity-setup-panel"
-            [class.christianity-setup-panel--coin]="tutorialPhase() === 'coin'"
-            [class.christianity-setup-panel--leader-pick]="tutorialPhase() === 'leader_pick'"
-            data-testid="christianity-setup-panel"
-            aria-live="polite"
+            class="christianity-hand-fan christianity-hand-fan--opponent"
+            data-testid="christianity-opponent-hand"
+            [attr.aria-label]="t('christianityOpponentHand')"
           >
-            @if (tutorialPhase() === 'coin') {
-              <div
-                class="christianity-setup-coin"
-                [class.is-rival-won]="tutorialSetup()?.coinWinner === 'P2'"
-                aria-hidden="true"
-              >
-                <span></span>
-                <span></span>
-              </div>
-            }
-            <div>
-              <span>{{ t('christianityMatchSetup') }}</span>
-              <h2>{{ setupTitle() }}</h2>
-              <p>{{ setupBody() }}</p>
-            </div>
-            @if (tutorialPhase() === 'coin') {
-              <button type="button" class="christianity-primary-action" data-testid="christianity-continue-setup" valLightRipple (click)="continueAfterCoin()">
-                {{ t('christianityContinue') }}
-              </button>
-            }
-            @if (tutorialPhase() === 'leader_pick') {
-              @if (tutorialSetup()?.leaderPicker === 'P1' && (tutorialSetup()?.availableLeaders?.length ?? 0) > 1) {
-                <div class="christianity-leader-choice-meter" aria-live="polite">
-                  <span>{{ t('christianityLeaderChoiceTimer').replace('{seconds}', leaderChoiceSeconds().toString()) }}</span>
-                  <i [style.transform]="'scaleX(' + (leaderChoiceSeconds() / leaderChoiceTotalSeconds) + ')'"></i>
-                </div>
-                <div class="christianity-leader-choice-grid" data-testid="christianity-leader-choice-grid">
-                  @for (leaderId of tutorialSetup()?.availableLeaders ?? []; track leaderId) {
-                    @let leader = cardDefinition(leaderId);
-                    <article class="christianity-leader-choice-option" [class.is-selected]="selectedTutorialLeaderId() === leaderId">
-                      <button
-                        type="button"
-                        class="christianity-leader-choice-card christianity-render-card-button"
-                        valLightRipple
-                        [attr.aria-pressed]="selectedTutorialLeaderId() === leaderId"
-                        (click)="selectTutorialLeader(leaderId)"
-                      >
-                        <val-christianity-card [card]="definitionToRenderCard(leader)" variant="baby"></val-christianity-card>
-                      </button>
-                      <div>
-                        <span>{{ selectedTutorialLeaderId() === leaderId ? t('christianityLeaderSelected') : t('christianitySelectLeader') }}</span>
-                        <button type="button" class="christianity-leader-choice-detail" valLightRipple (click)="inspectLeaderChoice(leaderId)">
-                          {{ t('christianityViewDetails') }}
-                        </button>
-                      </div>
-                    </article>
-                  }
-                </div>
-                <button type="button" class="christianity-primary-action" data-testid="christianity-confirm-leader" valLightRipple (click)="confirmTutorialLeader()">
-                  {{ t('christianityChooseThisLeader') }}
-                </button>
-              } @else {
-                <button type="button" class="christianity-primary-action" data-testid="christianity-continue-setup" valLightRipple (click)="continueAfterCoin()">
-                  {{ t('christianityContinue') }}
-                </button>
-              }
-            }
-          </section>
-        }
-        @if (game().status === 'finished') {
-          <section class="christianity-result-panel" data-testid="christianity-result-panel" aria-live="polite">
-            <span>{{ t('christianityGameOver') }}</span>
-            <h2>{{ resultTitle() }}</h2>
-            <p>{{ resultBody() }}</p>
-            <div>
-              <button type="button" class="christianity-primary-action" data-testid="christianity-play-again" valLightRipple (click)="restartTutorial()">
-                {{ t('christianityPlayAgain') }}
-              </button>
-              <button type="button" class="christianity-secondary-action" valLightRipple (click)="returnToChristianityHome()">
-                {{ t('christianityBackToMenu') }}
-              </button>
-            </div>
-          </section>
-        }
-        <div class="christianity-impact-layer">
-          @if (combatTrail(); as trail) {
-            <span
-              class="christianity-combat-trail"
-              aria-hidden="true"
-              [class.is-leader-target]="trail.tone === 'leader'"
-              [class.is-character-target]="trail.tone === 'character'"
-              [style.--christianity-combat-trail-x]="trail.fromX"
-              [style.--christianity-combat-trail-y]="trail.fromY"
-              [style.--christianity-combat-trail-mid-x]="trail.midX"
-              [style.--christianity-combat-trail-mid-y]="trail.midY"
-              [style.--christianity-combat-trail-length]="trail.length"
-              [style.--christianity-combat-trail-angle]="trail.angle"
-            >
-              <span></span>
-            </span>
-          }
-          @for (impact of impactEvents(); track impact.id) {
-            <val-mini-game-score-pop [props]="impactPopProps(impact)" />
-          }
-          @if (combatCallout(); as callout) {
-            <val-mini-game-callout [props]="callout" />
-          }
-        </div>
-        <section class="christianity-player-side christianity-player-side--opponent">
-          <section class="christianity-player-rack christianity-player-rack--opponent">
-            <div class="christianity-offerings-zone">
-              <button type="button" class="christianity-offering-pile" data-testid="christianity-offerings-P2" [class.is-empty-zone]="!topOffering('P2')" valLightRipple (click)="openOfferings('P2')">
-                @if (offeringStack('P2').length) {
-                  <span class="christianity-zone-card-stack" aria-hidden="true">
-                    @for (offering of offeringStack('P2'); track offering.instanceId) {
-                      <val-christianity-card
-                        [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
-                        [variant]="offering.ready ? 'baby' : 'back'"
-                        [style.transform]="zoneStackTransform($index, offeringStack('P2').length)"
-                      ></val-christianity-card>
-                    }
-                  </span>
-                } @else {
-                  <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-                }
-                <span>{{ t('christianityOfferingReserve') }}</span>
-                <strong>{{ readyOfferings(opponent()) }}</strong>
-                <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(opponent()) }}</small>
-              </button>
-            </div>
-            <div
-              class="christianity-attack-drop-target"
-              cdkDropList
-              id="christianity-opponent-leader-drop"
-              [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
-              [cdkDropListEnterPredicate]="canDropOnOpponentLeader"
-              [cdkDropListSortingDisabled]="true"
-              (cdkDropListDropped)="dropOnOpponentLeader($event)"
-            >
+            @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
               <button
                 type="button"
-                class="christianity-leader-card christianity-render-card-button"
-                data-testid="christianity-leader-P2"
+                class="christianity-hidden-card-button christianity-render-card-button"
                 valLightRipple
-                [class.is-target]="isOpponentLeaderTarget()"
-                [class.is-protected-target]="selectedAttacker() && hasOpponentGuards()"
-                [class.is-combat-target]="isCombatLeaderTarget('P2')"
-                (click)="handleOpponentLeader()"
+                [style.transform]="fanTransform($index, opponentHandCount(), true)"
+                [attr.aria-label]="t('christianityHiddenCard')"
               >
-              <val-christianity-card [card]="leaderRenderCard(opponent())" variant="board"></val-christianity-card>
+                <val-christianity-card [card]="hiddenCardRenderCard()" variant="back"></val-christianity-card>
               </button>
-            </div>
-            <span class="christianity-rack-spacer" aria-hidden="true"></span>
+            }
           </section>
+        </section>
 
-          <section class="christianity-battle-zone christianity-battle-zone--opponent" data-testid="christianity-battle-P2" [attr.aria-label]="t('christianityOpponentBattle')">
-            @for (slot of battleSlots('P2'); track slot.trackId) {
-              @if (slot.card) {
+        <section class="christianity-table" data-testid="christianity-table" [attr.aria-label]="t('christianityTable')">
+          @if (tutorialPhase() !== 'in_progress' && tutorialPhase() !== 'finished') {
+            <section
+              class="christianity-setup-panel"
+              [class.christianity-setup-panel--coin]="tutorialPhase() === 'coin'"
+              [class.christianity-setup-panel--leader-pick]="tutorialPhase() === 'leader_pick'"
+              data-testid="christianity-setup-panel"
+              aria-live="polite"
+            >
+              @if (tutorialPhase() === 'coin') {
+                <div
+                  class="christianity-setup-coin"
+                  [class.is-rival-won]="tutorialSetup()?.coinWinner === 'P2'"
+                  aria-hidden="true"
+                >
+                  <span></span>
+                  <span></span>
+                </div>
+              }
+              <div>
+                <span>{{ t('christianityMatchSetup') }}</span>
+                <h2>{{ setupTitle() }}</h2>
+                <p>{{ setupBody() }}</p>
+              </div>
+              @if (tutorialPhase() === 'coin') {
                 <button
                   type="button"
-                  class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
-                  [attr.data-testid]="battleCardTestId('P2', slot.card)"
-                  cdkDropList
-                  [id]="opponentTargetDropId(slot.card)"
-                  [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
-                  [cdkDropListEnterPredicate]="canDropOnOpponentCharacter"
-                  [cdkDropListSortingDisabled]="true"
+                  class="christianity-primary-action"
+                  data-testid="christianity-continue-setup"
                   valLightRipple
-                  [class.is-target]="isOpponentCharacterTarget(slot.card)"
-                  [class.is-combat-target]="isCombatCharacterTarget(slot.card)"
-                  (cdkDropListDropped)="dropOnOpponentCharacter($event, slot.card)"
-                  (click)="handleOpponentCharacter(slot.card)"
+                  (click)="continueAfterCoin()"
                 >
-                  <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
+                  {{ t('christianityContinue') }}
                 </button>
-              } @else {
-                <span class="christianity-slot"></span>
               }
-            }
-          </section>
-        </section>
-
-        <section class="christianity-shared-zone" data-testid="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
-          <button type="button" class="christianity-zone-pile christianity-zone-pile--history" data-testid="christianity-history-zone" [class.is-empty-zone]="!topHistoryCard()" [class.has-new-card]="historyPulse()" valLightRipple (click)="openHistory()">
-            @if (historyStack().length) {
-              <span class="christianity-zone-card-stack" aria-hidden="true">
-                @for (cardId of historyStack(); track cardId + $index) {
-                  <val-christianity-card
-                    [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityHistory') })"
-                    variant="baby"
-                    [style.transform]="zoneStackTransform($index, historyStack().length)"
-                  ></val-christianity-card>
+              @if (tutorialPhase() === 'leader_pick') {
+                @if (tutorialSetup()?.leaderPicker === 'P1' && (tutorialSetup()?.availableLeaders?.length ?? 0) > 1) {
+                  <div class="christianity-leader-choice-meter" aria-live="polite">
+                    <span>{{
+                      t('christianityLeaderChoiceTimer').replace('{seconds}', leaderChoiceSeconds().toString())
+                    }}</span>
+                    <i [style.transform]="'scaleX(' + leaderChoiceSeconds() / leaderChoiceTotalSeconds + ')'"></i>
+                  </div>
+                  <div class="christianity-leader-choice-grid" data-testid="christianity-leader-choice-grid">
+                    @for (leaderId of tutorialSetup()?.availableLeaders ?? []; track leaderId) {
+                      @let leader = cardDefinition(leaderId);
+                      <article
+                        class="christianity-leader-choice-option"
+                        [class.is-selected]="selectedTutorialLeaderId() === leaderId"
+                      >
+                        <button
+                          type="button"
+                          class="christianity-leader-choice-card christianity-render-card-button"
+                          valLightRipple
+                          [attr.aria-pressed]="selectedTutorialLeaderId() === leaderId"
+                          (click)="selectTutorialLeader(leaderId)"
+                        >
+                          <val-christianity-card
+                            [card]="definitionToRenderCard(leader)"
+                            variant="baby"
+                          ></val-christianity-card>
+                        </button>
+                        <div>
+                          <span>{{
+                            selectedTutorialLeaderId() === leaderId
+                              ? t('christianityLeaderSelected')
+                              : t('christianitySelectLeader')
+                          }}</span>
+                          <button
+                            type="button"
+                            class="christianity-leader-choice-detail"
+                            valLightRipple
+                            (click)="inspectLeaderChoice(leaderId)"
+                          >
+                            {{ t('christianityViewDetails') }}
+                          </button>
+                        </div>
+                      </article>
+                    }
+                  </div>
+                  <button
+                    type="button"
+                    class="christianity-primary-action"
+                    data-testid="christianity-confirm-leader"
+                    valLightRipple
+                    (click)="confirmTutorialLeader()"
+                  >
+                    {{ t('christianityChooseThisLeader') }}
+                  </button>
+                } @else {
+                  <button
+                    type="button"
+                    class="christianity-primary-action"
+                    data-testid="christianity-continue-setup"
+                    valLightRipple
+                    (click)="continueAfterCoin()"
+                  >
+                    {{ t('christianityContinue') }}
+                  </button>
                 }
-              </span>
-            } @else {
-              <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-            }
-            <span>{{ t('christianityHistory') }}</span>
-            <strong>{{ game().historyZone.length }}</strong>
-          </button>
-          <button type="button" class="christianity-zone-pile christianity-zone-pile--deck" data-testid="christianity-deck-zone" valLightRipple aria-live="polite" (click)="inspectDeck()">
-            <span class="christianity-pile-card-hint christianity-pile-card-hint--deck" aria-hidden="true">
-              <i></i>
-            </span>
-            <span>{{ t('christianityDeck') }}</span>
-            <strong>{{ game().sharedDeck.length }}</strong>
-          </button>
-          <button
-            type="button"
-            class="christianity-zone-card christianity-zone-card--place christianity-render-card-button"
-            data-testid="christianity-place-zone"
-            cdkDropList
-            id="christianity-place-drop"
-            [cdkDropListConnectedTo]="['christianity-hand-source']"
-            [cdkDropListEnterPredicate]="canDropOnPlace"
-            [cdkDropListSortingDisabled]="true"
-            [class.is-empty-zone]="!activePlaceCard()"
-            [class.is-play-target]="canPlaceSelectedPlace() || isDraggingPlace()"
-            valLightRipple
-            (cdkDropListDropped)="dropOnPlace($event)"
-            (click)="playSelectedPlaceOrInspect()"
-          >
-            @if (placeStack().length) {
-              @if (activePlaceCard(); as placeCard) {
-              <div class="christianity-place-backdrop" [style.background-image]="placeBackdropImage(placeCard)" aria-hidden="true"></div>
               }
-              <span class="christianity-zone-card-stack" aria-hidden="true">
-                @for (cardId of placeStack(); track cardId + $index) {
-                  <val-christianity-card
-                    [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
-                    variant="baby"
-                    [style.transform]="zoneStackTransform($index, placeStack().length)"
-                  ></val-christianity-card>
-                }
-              </span>
-            } @else {
-              <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-            }
-            <span>{{ t('christianityPlace') }}</span>
-            <strong>{{ game().placeZone.length }}</strong>
-            @if (canPlaceSelectedPlace() || isDraggingPlace()) {
-              <em>{{ t('christianityPlayHere') }}</em>
-            }
-          </button>
-        </section>
-
-        <section class="christianity-player-side">
-          <section
-            class="christianity-battle-zone"
-            data-testid="christianity-battle-P1"
-            cdkDropList
-            id="christianity-player-battle-source"
-            [cdkDropListConnectedTo]="attackTargetDropIds()"
-            [cdkDropListSortingDisabled]="true"
-            [class.is-placing-card]="canPlaceSelectedCharacter() || isDraggingCharacter()"
-            [attr.aria-label]="t('christianityYourBattle')"
-          >
-            @for (slot of battleSlots('P1'); track slot.trackId) {
-              @if (slot.card) {
+            </section>
+          }
+          @if (game().status === 'finished') {
+            <section class="christianity-result-panel" data-testid="christianity-result-panel" aria-live="polite">
+              <span>{{ t('christianityGameOver') }}</span>
+              <h2>{{ resultTitle() }}</h2>
+              <p>{{ resultBody() }}</p>
+              <div>
                 <button
                   type="button"
-                  class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
-                  [attr.data-testid]="battleCardTestId('P1', slot.card)"
-                  cdkDrag
-                  [cdkDragData]="slot.card.instanceId"
-                  [cdkDragDisabled]="!canDragAttacker(slot.card)"
+                  class="christianity-primary-action"
+                  data-testid="christianity-play-again"
                   valLightRipple
-                  [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
-                  [class.is-exhausted]="!slot.card.canAttack"
-                  [class.is-ready-attacker]="isOwnTurn() && slot.card.canAttack"
-                  [class.is-combat-attacker]="isCombatAttacker(slot.card)"
-                  (cdkDragStarted)="startDraggingAttacker(slot.card)"
-                  (cdkDragEnded)="endDraggingAttacker()"
-                  (click)="selectAttacker(slot.card)"
+                  (click)="restartTutorial()"
                 >
-                  <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
-                  <ng-template cdkDragPreview>
-                    <div class="christianity-card-drag-preview">
-                      <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
-                    </div>
-                  </ng-template>
-                  <ng-template cdkDragPlaceholder>
-                    <div class="christianity-card-drag-placeholder"></div>
-                  </ng-template>
+                  {{ t('christianityPlayAgain') }}
                 </button>
-              } @else {
                 <button
                   type="button"
-                  class="christianity-slot"
-                  [attr.data-testid]="battleSlotTestId('P1', $index)"
-                  cdkDropList
-                  [id]="battleSlotDropId($index)"
-                  [cdkDropListData]="$index"
-                  [cdkDropListConnectedTo]="['christianity-hand-source']"
-                  [cdkDropListEnterPredicate]="canDropOnBattleSlot"
-                  [cdkDropListSortingDisabled]="true"
-                  [class.christianity-slot--play-target]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+                  class="christianity-secondary-action"
                   valLightRipple
-                  (cdkDropListDropped)="dropOnBattleSlot($event, $index)"
-                  (click)="playSelectedCard($index)"
+                  (click)="returnToChristianityHome()"
                 >
-                  @if (canPlaceSelectedCharacter() || isDraggingCharacter()) {
-                    <span>{{ t('christianityPlayHere') }}</span>
-                  }
+                  {{ t('christianityBackToMenu') }}
                 </button>
-              }
-            }
-          </section>
-
-          <section class="christianity-player-rack">
-            <div class="christianity-offerings-zone">
-              <div
-                class="christianity-offering-drop-target"
-                cdkDropList
-                id="christianity-offerings-drop"
-                [cdkDropListConnectedTo]="['christianity-hand-source']"
-                [class.is-play-target]="canPlaceSelectedOffering() || isDraggingOffering()"
-                [cdkDropListEnterPredicate]="canDropOnOfferings"
-                [cdkDropListSortingDisabled]="true"
-                (cdkDropListDropped)="dropOnOfferings($event)"
+              </div>
+            </section>
+          }
+          <div class="christianity-impact-layer">
+            @if (combatTrail(); as trail) {
+              <span
+                class="christianity-combat-trail"
+                aria-hidden="true"
+                [class.is-leader-target]="trail.tone === 'leader'"
+                [class.is-character-target]="trail.tone === 'character'"
+                [style.--christianity-combat-trail-x]="trail.fromX"
+                [style.--christianity-combat-trail-y]="trail.fromY"
+                [style.--christianity-combat-trail-mid-x]="trail.midX"
+                [style.--christianity-combat-trail-mid-y]="trail.midY"
+                [style.--christianity-combat-trail-length]="trail.length"
+                [style.--christianity-combat-trail-angle]="trail.angle"
               >
+                <span></span>
+              </span>
+            }
+            @for (impact of impactEvents(); track impact.id) {
+              <val-mini-game-score-pop [props]="impactPopProps(impact)" />
+            }
+            @if (combatCallout(); as callout) {
+              <val-mini-game-callout [props]="callout" />
+            }
+          </div>
+          <section class="christianity-player-side christianity-player-side--opponent">
+            <section class="christianity-player-rack christianity-player-rack--opponent">
+              <div class="christianity-offerings-zone">
                 <button
                   type="button"
                   class="christianity-offering-pile"
-                  data-testid="christianity-offerings-P1"
-                  [class.is-empty-zone]="!topOffering('P1')"
+                  data-testid="christianity-offerings-P2"
+                  [class.is-empty-zone]="!topOffering('P2')"
                   valLightRipple
-                  (click)="handleOfferingPile('P1')"
+                  (click)="openOfferings('P2')"
                 >
-                  @if (offeringStack('P1').length) {
+                  @if (offeringStack('P2').length) {
                     <span class="christianity-zone-card-stack" aria-hidden="true">
-                      @for (offering of offeringStack('P1'); track offering.instanceId) {
+                      @for (offering of offeringStack('P2'); track offering.instanceId) {
                         <val-christianity-card
                           [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
                           [variant]="offering.ready ? 'baby' : 'back'"
-                          [style.transform]="zoneStackTransform($index, offeringStack('P1').length)"
+                          [style.transform]="zoneStackTransform($index, offeringStack('P2').length)"
                         ></val-christianity-card>
                       }
                     </span>
@@ -77311,89 +77484,358 @@ class ChristianityGameComponent {
                     <span class="christianity-empty-card-slot" aria-hidden="true"></span>
                   }
                   <span>{{ t('christianityOfferingReserve') }}</span>
-                  <strong>{{ readyOfferings(player()) }}</strong>
-                  <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(player()) }}</small>
+                  <strong>{{ readyOfferings(opponent()) }}</strong>
+                  <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(opponent()) }}</small>
                 </button>
               </div>
-            </div>
-            <button type="button" class="christianity-leader-card christianity-render-card-button" data-testid="christianity-leader-P1" valLightRipple (click)="inspectLeader('P1')">
-              <val-christianity-card [card]="leaderRenderCard(player())" variant="board"></val-christianity-card>
-            </button>
-            <div class="christianity-player-command">
-              <div class="christianity-player-badge">
-                <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
-                <strong>{{ player().displayName }}</strong>
+              <div
+                class="christianity-attack-drop-target"
+                cdkDropList
+                id="christianity-opponent-leader-drop"
+                [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
+                [cdkDropListEnterPredicate]="canDropOnOpponentLeader"
+                [cdkDropListSortingDisabled]="true"
+                (cdkDropListDropped)="dropOnOpponentLeader($event)"
+              >
+                <button
+                  type="button"
+                  class="christianity-leader-card christianity-render-card-button"
+                  data-testid="christianity-leader-P2"
+                  valLightRipple
+                  [class.is-target]="isOpponentLeaderTarget()"
+                  [class.is-protected-target]="selectedAttacker() && hasOpponentGuards()"
+                  [class.is-combat-target]="isCombatLeaderTarget('P2')"
+                  (click)="handleOpponentLeader()"
+                >
+                  <val-christianity-card [card]="leaderRenderCard(opponent())" variant="board"></val-christianity-card>
+                </button>
               </div>
-            </div>
+              <span class="christianity-rack-spacer" aria-hidden="true"></span>
+            </section>
+
+            <section
+              class="christianity-battle-zone christianity-battle-zone--opponent"
+              data-testid="christianity-battle-P2"
+              [attr.aria-label]="t('christianityOpponentBattle')"
+            >
+              @for (slot of battleSlots('P2'); track slot.trackId) {
+                @if (slot.card) {
+                  <button
+                    type="button"
+                    class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
+                    [attr.data-testid]="battleCardTestId('P2', slot.card)"
+                    cdkDropList
+                    [id]="opponentTargetDropId(slot.card)"
+                    [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
+                    [cdkDropListEnterPredicate]="canDropOnOpponentCharacter"
+                    [cdkDropListSortingDisabled]="true"
+                    valLightRipple
+                    [class.is-target]="isOpponentCharacterTarget(slot.card)"
+                    [class.is-combat-target]="isCombatCharacterTarget(slot.card)"
+                    (cdkDropListDropped)="dropOnOpponentCharacter($event, slot.card)"
+                    (click)="handleOpponentCharacter(slot.card)"
+                  >
+                    <val-christianity-card
+                      [card]="characterRenderCard(slot.card)"
+                      variant="board"
+                    ></val-christianity-card>
+                  </button>
+                } @else {
+                  <span class="christianity-slot"></span>
+                }
+              }
+            </section>
           </section>
-        </section>
-      </section>
 
-      <section class="christianity-hand-shelf">
-        <div class="christianity-hand-meter">
-          <span>{{ t('christianityHand') }}</span>
-          <strong>{{ player().hand?.length ?? 0 }}</strong>
-        </div>
-        <section
-          class="christianity-hand-fan"
-          data-testid="christianity-hand-P1"
-          cdkDropList
-          id="christianity-hand-source"
-          [cdkDropListConnectedTo]="dropTargetIds()"
-          [attr.aria-label]="t('christianityYourHand')"
-          (pointerleave)="clearHoveredHandIndex()"
-        >
-          @for (cardId of player().hand ?? []; track cardId + $index) {
-            @let card = cardDefinition(cardId);
-            <div
-              class="christianity-hand-card-wrap"
-              [class.is-selected]="selectedHandCard() === cardId"
-              [class.is-dragging]="draggingCardId() === cardId"
-              [style.z-index]="handCardZIndex($index)"
-              [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
-              (pointerenter)="setHoveredHandIndex($index)"
-              (pointerdown)="setHoveredHandIndex($index)"
-              (pointerup)="releaseHoveredHand($event)"
+          <section
+            class="christianity-shared-zone"
+            data-testid="christianity-shared-zone"
+            [attr.aria-label]="t('christianitySharedZone')"
+          >
+            <button
+              type="button"
+              class="christianity-zone-pile christianity-zone-pile--history"
+              data-testid="christianity-history-zone"
+              [class.is-empty-zone]="!topHistoryCard()"
+              [class.has-new-card]="historyPulse()"
+              valLightRipple
+              (click)="openHistory()"
+            >
+              @if (historyStack().length) {
+                <span class="christianity-zone-card-stack" aria-hidden="true">
+                  @for (cardId of historyStack(); track cardId + $index) {
+                    <val-christianity-card
+                      [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityHistory') })"
+                      variant="baby"
+                      [style.transform]="zoneStackTransform($index, historyStack().length)"
+                    ></val-christianity-card>
+                  }
+                </span>
+              } @else {
+                <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+              }
+              <span>{{ t('christianityHistory') }}</span>
+              <strong>{{ game().historyZone.length }}</strong>
+            </button>
+            <button
+              type="button"
+              class="christianity-zone-pile christianity-zone-pile--deck"
+              data-testid="christianity-deck-zone"
+              valLightRipple
+              aria-live="polite"
+              (click)="inspectDeck()"
+            >
+              <span class="christianity-pile-card-hint christianity-pile-card-hint--deck" aria-hidden="true">
+                <i></i>
+              </span>
+              <span>{{ t('christianityDeck') }}</span>
+              <strong>{{ game().sharedDeck.length }}</strong>
+            </button>
+            <button
+              type="button"
+              class="christianity-zone-card christianity-zone-card--place christianity-render-card-button"
+              data-testid="christianity-place-zone"
+              cdkDropList
+              id="christianity-place-drop"
+              [cdkDropListConnectedTo]="['christianity-hand-source']"
+              [cdkDropListEnterPredicate]="canDropOnPlace"
+              [cdkDropListSortingDisabled]="true"
+              [class.is-empty-zone]="!activePlaceCard()"
+              [class.is-play-target]="canPlaceSelectedPlace() || isDraggingPlace()"
+              valLightRipple
+              (cdkDropListDropped)="dropOnPlace($event)"
+              (click)="playSelectedPlaceOrInspect()"
+            >
+              @if (placeStack().length) {
+                @if (activePlaceCard(); as placeCard) {
+                  <div
+                    class="christianity-place-backdrop"
+                    [style.background-image]="placeBackdropImage(placeCard)"
+                    aria-hidden="true"
+                  ></div>
+                }
+                <span class="christianity-zone-card-stack" aria-hidden="true">
+                  @for (cardId of placeStack(); track cardId + $index) {
+                    <val-christianity-card
+                      [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
+                      variant="baby"
+                      [style.transform]="zoneStackTransform($index, placeStack().length)"
+                    ></val-christianity-card>
+                  }
+                </span>
+              } @else {
+                <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+              }
+              <span>{{ t('christianityPlace') }}</span>
+              <strong>{{ game().placeZone.length }}</strong>
+              @if (canPlaceSelectedPlace() || isDraggingPlace()) {
+                <em>{{ t('christianityPlayHere') }}</em>
+              }
+            </button>
+          </section>
+
+          <section class="christianity-player-side">
+            <section
+              class="christianity-battle-zone"
+              data-testid="christianity-battle-P1"
+              cdkDropList
+              id="christianity-player-battle-source"
+              [cdkDropListConnectedTo]="attackTargetDropIds()"
+              [cdkDropListSortingDisabled]="true"
+              [class.is-placing-card]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+              [attr.aria-label]="t('christianityYourBattle')"
             >
+              @for (slot of battleSlots('P1'); track slot.trackId) {
+                @if (slot.card) {
+                  <button
+                    type="button"
+                    class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
+                    [attr.data-testid]="battleCardTestId('P1', slot.card)"
+                    cdkDrag
+                    [cdkDragData]="slot.card.instanceId"
+                    [cdkDragDisabled]="!canDragAttacker(slot.card)"
+                    valLightRipple
+                    [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
+                    [class.is-exhausted]="!slot.card.canAttack"
+                    [class.is-ready-attacker]="isOwnTurn() && slot.card.canAttack"
+                    [class.is-combat-attacker]="isCombatAttacker(slot.card)"
+                    (cdkDragStarted)="startDraggingAttacker(slot.card)"
+                    (cdkDragEnded)="endDraggingAttacker()"
+                    (click)="selectAttacker(slot.card)"
+                  >
+                    <val-christianity-card
+                      [card]="characterRenderCard(slot.card)"
+                      variant="board"
+                    ></val-christianity-card>
+                    <ng-template cdkDragPreview>
+                      <div class="christianity-card-drag-preview">
+                        <val-christianity-card
+                          [card]="characterRenderCard(slot.card)"
+                          variant="board"
+                        ></val-christianity-card>
+                      </div>
+                    </ng-template>
+                    <ng-template cdkDragPlaceholder>
+                      <div class="christianity-card-drag-placeholder"></div>
+                    </ng-template>
+                  </button>
+                } @else {
+                  <button
+                    type="button"
+                    class="christianity-slot"
+                    [attr.data-testid]="battleSlotTestId('P1', $index)"
+                    cdkDropList
+                    [id]="battleSlotDropId($index)"
+                    [cdkDropListData]="$index"
+                    [cdkDropListConnectedTo]="['christianity-hand-source']"
+                    [cdkDropListEnterPredicate]="canDropOnBattleSlot"
+                    [cdkDropListSortingDisabled]="true"
+                    [class.christianity-slot--play-target]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+                    valLightRipple
+                    (cdkDropListDropped)="dropOnBattleSlot($event, $index)"
+                    (click)="playSelectedCard($index)"
+                  >
+                    @if (canPlaceSelectedCharacter() || isDraggingCharacter()) {
+                      <span>{{ t('christianityPlayHere') }}</span>
+                    }
+                  </button>
+                }
+              }
+            </section>
+
+            <section class="christianity-player-rack">
+              <div class="christianity-offerings-zone">
+                <div
+                  class="christianity-offering-drop-target"
+                  cdkDropList
+                  id="christianity-offerings-drop"
+                  [cdkDropListConnectedTo]="['christianity-hand-source']"
+                  [class.is-play-target]="canPlaceSelectedOffering() || isDraggingOffering()"
+                  [cdkDropListEnterPredicate]="canDropOnOfferings"
+                  [cdkDropListSortingDisabled]="true"
+                  (cdkDropListDropped)="dropOnOfferings($event)"
+                >
+                  <button
+                    type="button"
+                    class="christianity-offering-pile"
+                    data-testid="christianity-offerings-P1"
+                    [class.is-empty-zone]="!topOffering('P1')"
+                    valLightRipple
+                    (click)="handleOfferingPile('P1')"
+                  >
+                    @if (offeringStack('P1').length) {
+                      <span class="christianity-zone-card-stack" aria-hidden="true">
+                        @for (offering of offeringStack('P1'); track offering.instanceId) {
+                          <val-christianity-card
+                            [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
+                            [variant]="offering.ready ? 'baby' : 'back'"
+                            [style.transform]="zoneStackTransform($index, offeringStack('P1').length)"
+                          ></val-christianity-card>
+                        }
+                      </span>
+                    } @else {
+                      <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+                    }
+                    <span>{{ t('christianityOfferingReserve') }}</span>
+                    <strong>{{ readyOfferings(player()) }}</strong>
+                    <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(player()) }}</small>
+                  </button>
+                </div>
+              </div>
               <button
                 type="button"
-                class="christianity-card-preview-card christianity-card-preview-card--hand christianity-render-card-button"
-                [attr.data-testid]="handCardTestId(cardId, $index)"
-                cdkDrag
+                class="christianity-leader-card christianity-render-card-button"
+                data-testid="christianity-leader-P1"
                 valLightRipple
-                [cdkDragData]="cardId"
-                [cdkDragDisabled]="!canPlay(card)"
-                [attr.aria-label]="handCardActionLabel(card)"
-                [class.is-selected]="selectedHandCard() === cardId"
-                [class.is-disabled]="!canPlay(card)"
-                (cdkDragStarted)="startDraggingCard(cardId)"
-                (cdkDragEnded)="endDraggingCard()"
-                (click)="selectHandCard(cardId)"
+                (click)="inspectLeader('P1')"
               >
-                <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
-                <ng-template cdkDragPreview>
-                  <div class="christianity-card-drag-preview">
-                    <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
-                  </div>
-                </ng-template>
-                <ng-template cdkDragPlaceholder>
-                  <div class="christianity-card-drag-placeholder"></div>
-                </ng-template>
+                <val-christianity-card [card]="leaderRenderCard(player())" variant="board"></val-christianity-card>
               </button>
-              <button
-                type="button"
-                class="christianity-card-eye"
-                [attr.aria-label]="t('christianityPreviewCard')"
-                (click)="inspectHandCard(cardId, true); $event.stopPropagation()"
-              ></button>
-            </div>
-          }
+              <div class="christianity-player-command">
+                <div class="christianity-player-badge">
+                  <span class="christianity-avatar" [style.background]="player().avatarColor">{{
+                    player().avatar
+                  }}</span>
+                  <strong>{{ player().displayName }}</strong>
+                </div>
+              </div>
+            </section>
+          </section>
+        </section>
+
+        <section class="christianity-hand-shelf">
+          <div class="christianity-hand-meter">
+            <span>{{ t('christianityHand') }}</span>
+            <strong>{{ player().hand?.length ?? 0 }}</strong>
+          </div>
+          <section
+            class="christianity-hand-fan"
+            data-testid="christianity-hand-P1"
+            cdkDropList
+            id="christianity-hand-source"
+            [cdkDropListConnectedTo]="dropTargetIds()"
+            [attr.aria-label]="t('christianityYourHand')"
+            (pointerleave)="clearHoveredHandIndex()"
+          >
+            @for (cardId of player().hand ?? []; track cardId + $index) {
+              @let card = cardDefinition(cardId);
+              <div
+                class="christianity-hand-card-wrap"
+                [class.is-selected]="selectedHandCard() === cardId"
+                [class.is-dragging]="draggingCardId() === cardId"
+                [style.z-index]="handCardZIndex($index)"
+                [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
+                (pointerenter)="setHoveredHandIndex($index)"
+                (pointerdown)="setHoveredHandIndex($index)"
+                (pointerup)="releaseHoveredHand($event)"
+              >
+                <button
+                  type="button"
+                  class="christianity-card-preview-card christianity-card-preview-card--hand christianity-render-card-button"
+                  [attr.data-testid]="handCardTestId(cardId, $index)"
+                  cdkDrag
+                  valLightRipple
+                  [cdkDragData]="cardId"
+                  [cdkDragDisabled]="!canPlay(card)"
+                  [attr.aria-label]="handCardActionLabel(card)"
+                  [class.is-selected]="selectedHandCard() === cardId"
+                  [class.is-disabled]="!canPlay(card)"
+                  (cdkDragStarted)="startDraggingCard(cardId)"
+                  (cdkDragEnded)="endDraggingCard()"
+                  (click)="selectHandCard(cardId)"
+                >
+                  <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
+                  <ng-template cdkDragPreview>
+                    <div class="christianity-card-drag-preview">
+                      <val-christianity-card
+                        [card]="definitionToRenderCard(card)"
+                        variant="baby"
+                      ></val-christianity-card>
+                    </div>
+                  </ng-template>
+                  <ng-template cdkDragPlaceholder>
+                    <div class="christianity-card-drag-placeholder"></div>
+                  </ng-template>
+                </button>
+                <button
+                  type="button"
+                  class="christianity-card-eye"
+                  [attr.aria-label]="t('christianityPreviewCard')"
+                  (click)="inspectHandCard(cardId, true); $event.stopPropagation()"
+                ></button>
+              </div>
+            }
+          </section>
         </section>
-      </section>
       }
 
       @if (selectedPreview()) {
-        <button type="button" class="christianity-preview-backdrop" [attr.aria-label]="t('christianityClosePreview')" (click)="closePreview()"></button>
+        <button
+          type="button"
+          class="christianity-preview-backdrop"
+          [attr.aria-label]="t('christianityClosePreview')"
+          (click)="closePreview()"
+        ></button>
         <aside
           class="christianity-floating-card-shell"
           [class.is-history-preview]="canNavigatePreview()"
@@ -77433,7 +77875,11 @@ class ChristianityGameComponent {
                 </button>
               }
               @if (selectedPreviewNeighborRenderCard(-1); as previousCard) {
-                <val-christianity-card class="christianity-preview-ghost christianity-preview-ghost--previous" [card]="previousCard" variant="full"></val-christianity-card>
+                <val-christianity-card
+                  class="christianity-preview-ghost christianity-preview-ghost--previous"
+                  [card]="previousCard"
+                  variant="full"
+                ></val-christianity-card>
               }
               <div
                 class="christianity-floating-card"
@@ -77452,7 +77898,11 @@ class ChristianityGameComponent {
                 }
               </div>
               @if (selectedPreviewNeighborRenderCard(1); as nextCard) {
-                <val-christianity-card class="christianity-preview-ghost christianity-preview-ghost--next" [card]="nextCard" variant="full"></val-christianity-card>
+                <val-christianity-card
+                  class="christianity-preview-ghost christianity-preview-ghost--next"
+                  [card]="nextCard"
+                  variant="full"
+                ></val-christianity-card>
               }
             </div>
             <div class="christianity-preview-side">
@@ -77536,7 +77986,12 @@ class ChristianityGameComponent {
       }
 
       @if (selectedInfo(); as info) {
-        <button type="button" class="christianity-info-backdrop" [attr.aria-label]="t('close')" (click)="closeInfo()"></button>
+        <button
+          type="button"
+          class="christianity-info-backdrop"
+          [attr.aria-label]="t('close')"
+          (click)="closeInfo()"
+        ></button>
         <aside class="christianity-info-panel" aria-live="polite">
           <button type="button" class="christianity-dialog-close christianity-info-close" (click)="closeInfo()">
             {{ t('close') }}
@@ -77561,14 +78016,24 @@ class ChristianityGameComponent {
       @if (screen() === 'table') {
         <section class="christianity-actions" data-testid="christianity-actions" aria-live="polite">
           <p class="christianity-sr-only" data-testid="christianity-status">{{ statusText() }}</p>
-          <button type="button" data-testid="christianity-primary-action" [disabled]="tutorialPhase() !== 'in_progress' || selectedActionDisabled()" (click)="playSelectedCard()">
+          <button
+            type="button"
+            data-testid="christianity-primary-action"
+            [disabled]="tutorialPhase() !== 'in_progress' || selectedActionDisabled()"
+            (click)="playSelectedCard()"
+          >
             {{ selectedActionLabel() }}
           </button>
         </section>
       }
 
       @if (showHistory()) {
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseHistory')" (click)="closeHistory()"></button>
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseHistory')"
+          (click)="closeHistory()"
+        ></button>
         <section class="christianity-history-drawer" data-testid="christianity-history-drawer">
           <header>
             <h2>{{ t('christianityHistory') }}</h2>
@@ -77583,7 +78048,13 @@ class ChristianityGameComponent {
             <div class="christianity-history-grid" data-testid="christianity-history-grid">
               @for (cardId of game().historyZone; track cardId + $index) {
                 @let card = cardDefinition(cardId);
-                <button type="button" class="christianity-gallery-card-button christianity-render-card-button" [attr.data-testid]="historyCardTestId(cardId, $index)" valLightRipple (click)="inspectHistoryCard(cardId)">
+                <button
+                  type="button"
+                  class="christianity-gallery-card-button christianity-render-card-button"
+                  [attr.data-testid]="historyCardTestId(cardId, $index)"
+                  valLightRipple
+                  (click)="inspectHistoryCard(cardId)"
+                >
                   <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
                 </button>
               }
@@ -77595,7 +78066,12 @@ class ChristianityGameComponent {
       }
 
       @if (showPlace()) {
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseHistory')" (click)="closePlace()"></button>
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseHistory')"
+          (click)="closePlace()"
+        ></button>
         <section class="christianity-history-drawer christianity-place-drawer" data-testid="christianity-place-drawer">
           <header>
             <h2>{{ t('christianityPlace') }}</h2>
@@ -77608,8 +78084,17 @@ class ChristianityGameComponent {
           </header>
           <div class="christianity-history-grid" data-testid="christianity-place-grid">
             @for (cardId of game().placeZone; track cardId + $index) {
-              <button type="button" class="christianity-gallery-card-button christianity-render-card-button" [attr.data-testid]="'christianity-place-card-' + $index" valLightRipple (click)="inspectPlaceCard(cardId)">
-                <val-christianity-card [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })" variant="baby"></val-christianity-card>
+              <button
+                type="button"
+                class="christianity-gallery-card-button christianity-render-card-button"
+                [attr.data-testid]="'christianity-place-card-' + $index"
+                valLightRipple
+                (click)="inspectPlaceCard(cardId)"
+              >
+                <val-christianity-card
+                  [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
+                  variant="baby"
+                ></val-christianity-card>
               </button>
             }
           </div>
@@ -77617,8 +78102,16 @@ class ChristianityGameComponent {
       }
 
       @if (showGallery()) {
-        <button type="button" class="christianity-history-backdrop christianity-gallery-backdrop" [attr.aria-label]="t('christianityCloseGallery')" (click)="closeGallery()"></button>
-        <section class="christianity-history-drawer christianity-gallery-drawer" data-testid="christianity-gallery-drawer">
+        <button
+          type="button"
+          class="christianity-history-backdrop christianity-gallery-backdrop"
+          [attr.aria-label]="t('christianityCloseGallery')"
+          (click)="closeGallery()"
+        ></button>
+        <section
+          class="christianity-history-drawer christianity-gallery-drawer"
+          data-testid="christianity-gallery-drawer"
+        >
           <header>
             <div>
               <h2>{{ t('christianityGallery') }}</h2>
@@ -77634,7 +78127,12 @@ class ChristianityGameComponent {
           <div class="christianity-gallery-controls">
             <label>
               <span>{{ t('christianityGallerySearch') }}</span>
-              <input type="search" [value]="gallerySearch()" (input)="setGallerySearch($event)" [placeholder]="t('christianityGallerySearchPlaceholder')" />
+              <input
+                type="search"
+                [value]="gallerySearch()"
+                (input)="setGallerySearch($event)"
+                [placeholder]="t('christianityGallerySearchPlaceholder')"
+              />
             </label>
             <label>
               <span>{{ t('christianityGalleryFilter') }}</span>
@@ -77653,7 +78151,12 @@ class ChristianityGameComponent {
           </div>
           <div class="christianity-gallery-grid">
             @for (card of galleryCards(); track card.id) {
-              <button type="button" class="christianity-gallery-card-button christianity-render-card-button" valLightRipple (click)="inspectGalleryCard(card.id)">
+              <button
+                type="button"
+                class="christianity-gallery-card-button christianity-render-card-button"
+                valLightRipple
+                (click)="inspectGalleryCard(card.id)"
+              >
                 <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
               </button>
             } @empty {
@@ -77665,12 +78168,23 @@ class ChristianityGameComponent {
 
       @if (offeringsSeat()) {
         @let offeringPlayer = game().players[offeringsSeat()!];
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseOfferings')" (click)="closeOfferings()"></button>
-        <section class="christianity-history-drawer christianity-offerings-drawer" [attr.data-testid]="offeringsDrawerTestId(offeringsSeat()!)">
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseOfferings')"
+          (click)="closeOfferings()"
+        ></button>
+        <section
+          class="christianity-history-drawer christianity-offerings-drawer"
+          [attr.data-testid]="offeringsDrawerTestId(offeringsSeat()!)"
+        >
           <header>
             <h2>{{ t('christianityOfferings') }}</h2>
             <div class="christianity-dialog-actions">
-              <span>{{ t('christianityOfferingReserve') }} {{ readyOfferings(offeringPlayer) }} · {{ t('christianityOfferingBase') }} {{ totalOfferings(offeringPlayer) }}</span>
+              <span
+                >{{ t('christianityOfferingReserve') }} {{ readyOfferings(offeringPlayer) }} ·
+                {{ t('christianityOfferingBase') }} {{ totalOfferings(offeringPlayer) }}</span
+              >
               <button type="button" class="christianity-dialog-close" (click)="closeOfferings()">
                 {{ t('close') }}
               </button>
@@ -77680,14 +78194,25 @@ class ChristianityGameComponent {
             <span class="christianity-rule-note-icon" aria-hidden="true">i</span>
             <p>{{ t('christianityOfferingsRuleBody') }}</p>
           </div>
-            <div class="christianity-offering-list" [attr.data-testid]="offeringListTestId(offeringsSeat()!)">
-              @for (offering of offeringPlayer.offerings; track offering.instanceId) {
-                <article class="christianity-offering-row" [class.is-exhausted]="!offering.ready">
-                <button type="button" class="christianity-offering-card christianity-render-card-button" [attr.data-testid]="offeringCardTestId(offering)" valLightRipple (click)="inspectOffering(offering)">
-                  <val-christianity-card [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()" [variant]="offering.ready ? 'baby' : 'back'"></val-christianity-card>
+          <div class="christianity-offering-list" [attr.data-testid]="offeringListTestId(offeringsSeat()!)">
+            @for (offering of offeringPlayer.offerings; track offering.instanceId) {
+              <article class="christianity-offering-row" [class.is-exhausted]="!offering.ready">
+                <button
+                  type="button"
+                  class="christianity-offering-card christianity-render-card-button"
+                  [attr.data-testid]="offeringCardTestId(offering)"
+                  valLightRipple
+                  (click)="inspectOffering(offering)"
+                >
+                  <val-christianity-card
+                    [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
+                    [variant]="offering.ready ? 'baby' : 'back'"
+                  ></val-christianity-card>
                 </button>
                 <div>
-                  <strong>{{ offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted') }}</strong>
+                  <strong>{{
+                    offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted')
+                  }}</strong>
                   <p>{{ offeringAbilityText(offering) }}</p>
                   @if (offering.abilityName) {
                     <button
@@ -77796,418 +78321,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </section>
         </section>
       } @else {
-      <section class="christianity-match-strip" data-testid="christianity-match-strip" [attr.aria-label]="t('christianityMatchScore')">
-        <article class="christianity-match-player">
-          <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
-          <div>
-            <strong>{{ player().displayName }}</strong>
-            <small>{{ playerLeaderDisplayName(player()) }} · {{ player().leaderHp }}/{{ player().leaderMaxHp }}</small>
-          </div>
-        </article>
-        <div class="christianity-scoreboard">
-          <span>{{ t('christianityMatch') }}</span>
-          <strong>{{ game().matchScore.P1 }}-{{ game().matchScore.P2 }}</strong>
-        </div>
-        <article class="christianity-match-player christianity-match-player--opponent">
-          <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-          <div>
-            <strong>{{ opponent().displayName }}</strong>
-            <small>{{ playerLeaderDisplayName(opponent()) }} · {{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</small>
+        <section
+          class="christianity-match-strip"
+          data-testid="christianity-match-strip"
+          [attr.aria-label]="t('christianityMatchScore')"
+        >
+          <article class="christianity-match-player">
+            <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
+            <div>
+              <strong>{{ player().displayName }}</strong>
+              <small
+                >{{ playerLeaderDisplayName(player()) }} · {{ player().leaderHp }}/{{ player().leaderMaxHp }}</small
+              >
+            </div>
+          </article>
+          <div class="christianity-scoreboard">
+            <span>{{ t('christianityMatch') }}</span>
+            <strong>{{ game().matchScore.P1 }}-{{ game().matchScore.P2 }}</strong>
           </div>
-        </article>
-      </section>
+          <article class="christianity-match-player christianity-match-player--opponent">
+            <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
+            <div>
+              <strong>{{ opponent().displayName }}</strong>
+              <small
+                >{{ playerLeaderDisplayName(opponent()) }} · {{ opponent().leaderHp }}/{{
+                  opponent().leaderMaxHp
+                }}</small
+              >
+            </div>
+          </article>
+        </section>
 
-      <section
-        class="christianity-turn-banner"
-        data-testid="christianity-turn-banner"
-        [class.is-own-turn]="isOwnTurn()"
-        [class.is-rival-turn]="!isOwnTurn() && game().status === 'in_progress'"
-        [class.is-finished]="game().status === 'finished'"
-        aria-live="polite"
-      >
-        <div>
-          <span>{{ t('christianityTurn') }} {{ game().turnCount }}</span>
-          <strong>{{ turnBannerTitle() }}</strong>
-          <p>{{ turnBannerBody() }}</p>
-        </div>
-        <div class="christianity-turn-actions">
-          <button
-            type="button"
-            class="christianity-end-turn"
-            data-testid="christianity-end-turn"
-            [disabled]="!isOwnTurn() || tutorialPhase() !== 'in_progress' || !!combatAnimation()"
-            (click)="endTurn()"
-          >
-            {{ t('christianityEndTurn') }}
-          </button>
-          <button type="button" class="christianity-options-button" data-testid="christianity-options-button" valLightRipple (click)="toggleOptions()">
-            {{ t('christianityOptions') }}
-          </button>
-        </div>
-        @if (showOptions()) {
-          <div class="christianity-options-menu" data-testid="christianity-options-menu">
-            <button type="button" (click)="restartTutorial()">{{ t('christianityRestart') }}</button>
-            <button type="button" [disabled]="game().status === 'finished'" (click)="resignTutorial()">{{ t('christianityResign') }}</button>
-            <button type="button" (click)="returnToChristianityHome()">{{ t('christianityBackToMenu') }}</button>
+        <section
+          class="christianity-turn-banner"
+          data-testid="christianity-turn-banner"
+          [class.is-own-turn]="isOwnTurn()"
+          [class.is-rival-turn]="!isOwnTurn() && game().status === 'in_progress'"
+          [class.is-finished]="game().status === 'finished'"
+          aria-live="polite"
+        >
+          <div>
+            <span>{{ t('christianityTurn') }} {{ game().turnCount }}</span>
+            <strong>{{ turnBannerTitle() }}</strong>
+            <p>{{ turnBannerBody() }}</p>
           </div>
-        }
-      </section>
-
-      <section class="christianity-hand-shelf christianity-hand-shelf--opponent">
-        <div class="christianity-hand-meter christianity-hand-meter--opponent">
-          <span>{{ t('christianityHand') }}</span>
-          <strong>{{ opponentHandCount() }}</strong>
-        </div>
-        <section class="christianity-hand-fan christianity-hand-fan--opponent" data-testid="christianity-opponent-hand" [attr.aria-label]="t('christianityOpponentHand')">
-          @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
+          <div class="christianity-turn-actions">
+            <button
+              type="button"
+              class="christianity-end-turn"
+              data-testid="christianity-end-turn"
+              [disabled]="!isOwnTurn() || tutorialPhase() !== 'in_progress' || !!combatAnimation()"
+              (click)="endTurn()"
+            >
+              {{ t('christianityEndTurn') }}
+            </button>
             <button
               type="button"
-              class="christianity-hidden-card-button christianity-render-card-button"
+              class="christianity-options-button"
+              data-testid="christianity-options-button"
               valLightRipple
-              [style.transform]="fanTransform($index, opponentHandCount(), true)"
-              [attr.aria-label]="t('christianityHiddenCard')"
+              (click)="toggleOptions()"
             >
-              <val-christianity-card [card]="hiddenCardRenderCard()" variant="back"></val-christianity-card>
+              {{ t('christianityOptions') }}
             </button>
+          </div>
+          @if (showOptions()) {
+            <div class="christianity-options-menu" data-testid="christianity-options-menu">
+              <button type="button" (click)="restartTutorial()">{{ t('christianityRestart') }}</button>
+              <button type="button" [disabled]="game().status === 'finished'" (click)="resignTutorial()">
+                {{ t('christianityResign') }}
+              </button>
+              <button type="button" (click)="returnToChristianityHome()">{{ t('christianityBackToMenu') }}</button>
+            </div>
           }
         </section>
-      </section>
 
-      <section class="christianity-table" data-testid="christianity-table" [attr.aria-label]="t('christianityTable')">
-        @if (tutorialPhase() !== 'in_progress' && tutorialPhase() !== 'finished') {
+        <section class="christianity-hand-shelf christianity-hand-shelf--opponent">
+          <div class="christianity-hand-meter christianity-hand-meter--opponent">
+            <span>{{ t('christianityHand') }}</span>
+            <strong>{{ opponentHandCount() }}</strong>
+          </div>
           <section
-            class="christianity-setup-panel"
-            [class.christianity-setup-panel--coin]="tutorialPhase() === 'coin'"
-            [class.christianity-setup-panel--leader-pick]="tutorialPhase() === 'leader_pick'"
-            data-testid="christianity-setup-panel"
-            aria-live="polite"
+            class="christianity-hand-fan christianity-hand-fan--opponent"
+            data-testid="christianity-opponent-hand"
+            [attr.aria-label]="t('christianityOpponentHand')"
           >
-            @if (tutorialPhase() === 'coin') {
-              <div
-                class="christianity-setup-coin"
-                [class.is-rival-won]="tutorialSetup()?.coinWinner === 'P2'"
-                aria-hidden="true"
-              >
-                <span></span>
-                <span></span>
-              </div>
-            }
-            <div>
-              <span>{{ t('christianityMatchSetup') }}</span>
-              <h2>{{ setupTitle() }}</h2>
-              <p>{{ setupBody() }}</p>
-            </div>
-            @if (tutorialPhase() === 'coin') {
-              <button type="button" class="christianity-primary-action" data-testid="christianity-continue-setup" valLightRipple (click)="continueAfterCoin()">
-                {{ t('christianityContinue') }}
-              </button>
-            }
-            @if (tutorialPhase() === 'leader_pick') {
-              @if (tutorialSetup()?.leaderPicker === 'P1' && (tutorialSetup()?.availableLeaders?.length ?? 0) > 1) {
-                <div class="christianity-leader-choice-meter" aria-live="polite">
-                  <span>{{ t('christianityLeaderChoiceTimer').replace('{seconds}', leaderChoiceSeconds().toString()) }}</span>
-                  <i [style.transform]="'scaleX(' + (leaderChoiceSeconds() / leaderChoiceTotalSeconds) + ')'"></i>
-                </div>
-                <div class="christianity-leader-choice-grid" data-testid="christianity-leader-choice-grid">
-                  @for (leaderId of tutorialSetup()?.availableLeaders ?? []; track leaderId) {
-                    @let leader = cardDefinition(leaderId);
-                    <article class="christianity-leader-choice-option" [class.is-selected]="selectedTutorialLeaderId() === leaderId">
-                      <button
-                        type="button"
-                        class="christianity-leader-choice-card christianity-render-card-button"
-                        valLightRipple
-                        [attr.aria-pressed]="selectedTutorialLeaderId() === leaderId"
-                        (click)="selectTutorialLeader(leaderId)"
-                      >
-                        <val-christianity-card [card]="definitionToRenderCard(leader)" variant="baby"></val-christianity-card>
-                      </button>
-                      <div>
-                        <span>{{ selectedTutorialLeaderId() === leaderId ? t('christianityLeaderSelected') : t('christianitySelectLeader') }}</span>
-                        <button type="button" class="christianity-leader-choice-detail" valLightRipple (click)="inspectLeaderChoice(leaderId)">
-                          {{ t('christianityViewDetails') }}
-                        </button>
-                      </div>
-                    </article>
-                  }
-                </div>
-                <button type="button" class="christianity-primary-action" data-testid="christianity-confirm-leader" valLightRipple (click)="confirmTutorialLeader()">
-                  {{ t('christianityChooseThisLeader') }}
-                </button>
-              } @else {
-                <button type="button" class="christianity-primary-action" data-testid="christianity-continue-setup" valLightRipple (click)="continueAfterCoin()">
-                  {{ t('christianityContinue') }}
-                </button>
-              }
-            }
-          </section>
-        }
-        @if (game().status === 'finished') {
-          <section class="christianity-result-panel" data-testid="christianity-result-panel" aria-live="polite">
-            <span>{{ t('christianityGameOver') }}</span>
-            <h2>{{ resultTitle() }}</h2>
-            <p>{{ resultBody() }}</p>
-            <div>
-              <button type="button" class="christianity-primary-action" data-testid="christianity-play-again" valLightRipple (click)="restartTutorial()">
-                {{ t('christianityPlayAgain') }}
-              </button>
-              <button type="button" class="christianity-secondary-action" valLightRipple (click)="returnToChristianityHome()">
-                {{ t('christianityBackToMenu') }}
-              </button>
-            </div>
-          </section>
-        }
-        <div class="christianity-impact-layer">
-          @if (combatTrail(); as trail) {
-            <span
-              class="christianity-combat-trail"
-              aria-hidden="true"
-              [class.is-leader-target]="trail.tone === 'leader'"
-              [class.is-character-target]="trail.tone === 'character'"
-              [style.--christianity-combat-trail-x]="trail.fromX"
-              [style.--christianity-combat-trail-y]="trail.fromY"
-              [style.--christianity-combat-trail-mid-x]="trail.midX"
-              [style.--christianity-combat-trail-mid-y]="trail.midY"
-              [style.--christianity-combat-trail-length]="trail.length"
-              [style.--christianity-combat-trail-angle]="trail.angle"
-            >
-              <span></span>
-            </span>
-          }
-          @for (impact of impactEvents(); track impact.id) {
-            <val-mini-game-score-pop [props]="impactPopProps(impact)" />
-          }
-          @if (combatCallout(); as callout) {
-            <val-mini-game-callout [props]="callout" />
-          }
-        </div>
-        <section class="christianity-player-side christianity-player-side--opponent">
-          <section class="christianity-player-rack christianity-player-rack--opponent">
-            <div class="christianity-offerings-zone">
-              <button type="button" class="christianity-offering-pile" data-testid="christianity-offerings-P2" [class.is-empty-zone]="!topOffering('P2')" valLightRipple (click)="openOfferings('P2')">
-                @if (offeringStack('P2').length) {
-                  <span class="christianity-zone-card-stack" aria-hidden="true">
-                    @for (offering of offeringStack('P2'); track offering.instanceId) {
-                      <val-christianity-card
-                        [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
-                        [variant]="offering.ready ? 'baby' : 'back'"
-                        [style.transform]="zoneStackTransform($index, offeringStack('P2').length)"
-                      ></val-christianity-card>
-                    }
-                  </span>
-                } @else {
-                  <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-                }
-                <span>{{ t('christianityOfferingReserve') }}</span>
-                <strong>{{ readyOfferings(opponent()) }}</strong>
-                <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(opponent()) }}</small>
-              </button>
-            </div>
-            <div
-              class="christianity-attack-drop-target"
-              cdkDropList
-              id="christianity-opponent-leader-drop"
-              [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
-              [cdkDropListEnterPredicate]="canDropOnOpponentLeader"
-              [cdkDropListSortingDisabled]="true"
-              (cdkDropListDropped)="dropOnOpponentLeader($event)"
-            >
+            @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
               <button
                 type="button"
-                class="christianity-leader-card christianity-render-card-button"
-                data-testid="christianity-leader-P2"
+                class="christianity-hidden-card-button christianity-render-card-button"
                 valLightRipple
-                [class.is-target]="isOpponentLeaderTarget()"
-                [class.is-protected-target]="selectedAttacker() && hasOpponentGuards()"
-                [class.is-combat-target]="isCombatLeaderTarget('P2')"
-                (click)="handleOpponentLeader()"
+                [style.transform]="fanTransform($index, opponentHandCount(), true)"
+                [attr.aria-label]="t('christianityHiddenCard')"
               >
-              <val-christianity-card [card]="leaderRenderCard(opponent())" variant="board"></val-christianity-card>
+                <val-christianity-card [card]="hiddenCardRenderCard()" variant="back"></val-christianity-card>
               </button>
-            </div>
-            <span class="christianity-rack-spacer" aria-hidden="true"></span>
+            }
           </section>
+        </section>
 
-          <section class="christianity-battle-zone christianity-battle-zone--opponent" data-testid="christianity-battle-P2" [attr.aria-label]="t('christianityOpponentBattle')">
-            @for (slot of battleSlots('P2'); track slot.trackId) {
-              @if (slot.card) {
+        <section class="christianity-table" data-testid="christianity-table" [attr.aria-label]="t('christianityTable')">
+          @if (tutorialPhase() !== 'in_progress' && tutorialPhase() !== 'finished') {
+            <section
+              class="christianity-setup-panel"
+              [class.christianity-setup-panel--coin]="tutorialPhase() === 'coin'"
+              [class.christianity-setup-panel--leader-pick]="tutorialPhase() === 'leader_pick'"
+              data-testid="christianity-setup-panel"
+              aria-live="polite"
+            >
+              @if (tutorialPhase() === 'coin') {
+                <div
+                  class="christianity-setup-coin"
+                  [class.is-rival-won]="tutorialSetup()?.coinWinner === 'P2'"
+                  aria-hidden="true"
+                >
+                  <span></span>
+                  <span></span>
+                </div>
+              }
+              <div>
+                <span>{{ t('christianityMatchSetup') }}</span>
+                <h2>{{ setupTitle() }}</h2>
+                <p>{{ setupBody() }}</p>
+              </div>
+              @if (tutorialPhase() === 'coin') {
                 <button
                   type="button"
-                  class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
-                  [attr.data-testid]="battleCardTestId('P2', slot.card)"
-                  cdkDropList
-                  [id]="opponentTargetDropId(slot.card)"
-                  [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
-                  [cdkDropListEnterPredicate]="canDropOnOpponentCharacter"
-                  [cdkDropListSortingDisabled]="true"
+                  class="christianity-primary-action"
+                  data-testid="christianity-continue-setup"
                   valLightRipple
-                  [class.is-target]="isOpponentCharacterTarget(slot.card)"
-                  [class.is-combat-target]="isCombatCharacterTarget(slot.card)"
-                  (cdkDropListDropped)="dropOnOpponentCharacter($event, slot.card)"
-                  (click)="handleOpponentCharacter(slot.card)"
+                  (click)="continueAfterCoin()"
                 >
-                  <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
+                  {{ t('christianityContinue') }}
                 </button>
-              } @else {
-                <span class="christianity-slot"></span>
               }
-            }
-          </section>
-        </section>
-
-        <section class="christianity-shared-zone" data-testid="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
-          <button type="button" class="christianity-zone-pile christianity-zone-pile--history" data-testid="christianity-history-zone" [class.is-empty-zone]="!topHistoryCard()" [class.has-new-card]="historyPulse()" valLightRipple (click)="openHistory()">
-            @if (historyStack().length) {
-              <span class="christianity-zone-card-stack" aria-hidden="true">
-                @for (cardId of historyStack(); track cardId + $index) {
-                  <val-christianity-card
-                    [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityHistory') })"
-                    variant="baby"
-                    [style.transform]="zoneStackTransform($index, historyStack().length)"
-                  ></val-christianity-card>
+              @if (tutorialPhase() === 'leader_pick') {
+                @if (tutorialSetup()?.leaderPicker === 'P1' && (tutorialSetup()?.availableLeaders?.length ?? 0) > 1) {
+                  <div class="christianity-leader-choice-meter" aria-live="polite">
+                    <span>{{
+                      t('christianityLeaderChoiceTimer').replace('{seconds}', leaderChoiceSeconds().toString())
+                    }}</span>
+                    <i [style.transform]="'scaleX(' + leaderChoiceSeconds() / leaderChoiceTotalSeconds + ')'"></i>
+                  </div>
+                  <div class="christianity-leader-choice-grid" data-testid="christianity-leader-choice-grid">
+                    @for (leaderId of tutorialSetup()?.availableLeaders ?? []; track leaderId) {
+                      @let leader = cardDefinition(leaderId);
+                      <article
+                        class="christianity-leader-choice-option"
+                        [class.is-selected]="selectedTutorialLeaderId() === leaderId"
+                      >
+                        <button
+                          type="button"
+                          class="christianity-leader-choice-card christianity-render-card-button"
+                          valLightRipple
+                          [attr.aria-pressed]="selectedTutorialLeaderId() === leaderId"
+                          (click)="selectTutorialLeader(leaderId)"
+                        >
+                          <val-christianity-card
+                            [card]="definitionToRenderCard(leader)"
+                            variant="baby"
+                          ></val-christianity-card>
+                        </button>
+                        <div>
+                          <span>{{
+                            selectedTutorialLeaderId() === leaderId
+                              ? t('christianityLeaderSelected')
+                              : t('christianitySelectLeader')
+                          }}</span>
+                          <button
+                            type="button"
+                            class="christianity-leader-choice-detail"
+                            valLightRipple
+                            (click)="inspectLeaderChoice(leaderId)"
+                          >
+                            {{ t('christianityViewDetails') }}
+                          </button>
+                        </div>
+                      </article>
+                    }
+                  </div>
+                  <button
+                    type="button"
+                    class="christianity-primary-action"
+                    data-testid="christianity-confirm-leader"
+                    valLightRipple
+                    (click)="confirmTutorialLeader()"
+                  >
+                    {{ t('christianityChooseThisLeader') }}
+                  </button>
+                } @else {
+                  <button
+                    type="button"
+                    class="christianity-primary-action"
+                    data-testid="christianity-continue-setup"
+                    valLightRipple
+                    (click)="continueAfterCoin()"
+                  >
+                    {{ t('christianityContinue') }}
+                  </button>
                 }
-              </span>
-            } @else {
-              <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-            }
-            <span>{{ t('christianityHistory') }}</span>
-            <strong>{{ game().historyZone.length }}</strong>
-          </button>
-          <button type="button" class="christianity-zone-pile christianity-zone-pile--deck" data-testid="christianity-deck-zone" valLightRipple aria-live="polite" (click)="inspectDeck()">
-            <span class="christianity-pile-card-hint christianity-pile-card-hint--deck" aria-hidden="true">
-              <i></i>
-            </span>
-            <span>{{ t('christianityDeck') }}</span>
-            <strong>{{ game().sharedDeck.length }}</strong>
-          </button>
-          <button
-            type="button"
-            class="christianity-zone-card christianity-zone-card--place christianity-render-card-button"
-            data-testid="christianity-place-zone"
-            cdkDropList
-            id="christianity-place-drop"
-            [cdkDropListConnectedTo]="['christianity-hand-source']"
-            [cdkDropListEnterPredicate]="canDropOnPlace"
-            [cdkDropListSortingDisabled]="true"
-            [class.is-empty-zone]="!activePlaceCard()"
-            [class.is-play-target]="canPlaceSelectedPlace() || isDraggingPlace()"
-            valLightRipple
-            (cdkDropListDropped)="dropOnPlace($event)"
-            (click)="playSelectedPlaceOrInspect()"
-          >
-            @if (placeStack().length) {
-              @if (activePlaceCard(); as placeCard) {
-              <div class="christianity-place-backdrop" [style.background-image]="placeBackdropImage(placeCard)" aria-hidden="true"></div>
               }
-              <span class="christianity-zone-card-stack" aria-hidden="true">
-                @for (cardId of placeStack(); track cardId + $index) {
-                  <val-christianity-card
-                    [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
-                    variant="baby"
-                    [style.transform]="zoneStackTransform($index, placeStack().length)"
-                  ></val-christianity-card>
-                }
-              </span>
-            } @else {
-              <span class="christianity-empty-card-slot" aria-hidden="true"></span>
-            }
-            <span>{{ t('christianityPlace') }}</span>
-            <strong>{{ game().placeZone.length }}</strong>
-            @if (canPlaceSelectedPlace() || isDraggingPlace()) {
-              <em>{{ t('christianityPlayHere') }}</em>
-            }
-          </button>
-        </section>
-
-        <section class="christianity-player-side">
-          <section
-            class="christianity-battle-zone"
-            data-testid="christianity-battle-P1"
-            cdkDropList
-            id="christianity-player-battle-source"
-            [cdkDropListConnectedTo]="attackTargetDropIds()"
-            [cdkDropListSortingDisabled]="true"
-            [class.is-placing-card]="canPlaceSelectedCharacter() || isDraggingCharacter()"
-            [attr.aria-label]="t('christianityYourBattle')"
-          >
-            @for (slot of battleSlots('P1'); track slot.trackId) {
-              @if (slot.card) {
+            </section>
+          }
+          @if (game().status === 'finished') {
+            <section class="christianity-result-panel" data-testid="christianity-result-panel" aria-live="polite">
+              <span>{{ t('christianityGameOver') }}</span>
+              <h2>{{ resultTitle() }}</h2>
+              <p>{{ resultBody() }}</p>
+              <div>
                 <button
                   type="button"
-                  class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
-                  [attr.data-testid]="battleCardTestId('P1', slot.card)"
-                  cdkDrag
-                  [cdkDragData]="slot.card.instanceId"
-                  [cdkDragDisabled]="!canDragAttacker(slot.card)"
+                  class="christianity-primary-action"
+                  data-testid="christianity-play-again"
                   valLightRipple
-                  [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
-                  [class.is-exhausted]="!slot.card.canAttack"
-                  [class.is-ready-attacker]="isOwnTurn() && slot.card.canAttack"
-                  [class.is-combat-attacker]="isCombatAttacker(slot.card)"
-                  (cdkDragStarted)="startDraggingAttacker(slot.card)"
-                  (cdkDragEnded)="endDraggingAttacker()"
-                  (click)="selectAttacker(slot.card)"
+                  (click)="restartTutorial()"
                 >
-                  <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
-                  <ng-template cdkDragPreview>
-                    <div class="christianity-card-drag-preview">
-                      <val-christianity-card [card]="characterRenderCard(slot.card)" variant="board"></val-christianity-card>
-                    </div>
-                  </ng-template>
-                  <ng-template cdkDragPlaceholder>
-                    <div class="christianity-card-drag-placeholder"></div>
-                  </ng-template>
+                  {{ t('christianityPlayAgain') }}
                 </button>
-              } @else {
                 <button
                   type="button"
-                  class="christianity-slot"
-                  [attr.data-testid]="battleSlotTestId('P1', $index)"
-                  cdkDropList
-                  [id]="battleSlotDropId($index)"
-                  [cdkDropListData]="$index"
-                  [cdkDropListConnectedTo]="['christianity-hand-source']"
-                  [cdkDropListEnterPredicate]="canDropOnBattleSlot"
-                  [cdkDropListSortingDisabled]="true"
-                  [class.christianity-slot--play-target]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+                  class="christianity-secondary-action"
                   valLightRipple
-                  (cdkDropListDropped)="dropOnBattleSlot($event, $index)"
-                  (click)="playSelectedCard($index)"
+                  (click)="returnToChristianityHome()"
                 >
-                  @if (canPlaceSelectedCharacter() || isDraggingCharacter()) {
-                    <span>{{ t('christianityPlayHere') }}</span>
-                  }
+                  {{ t('christianityBackToMenu') }}
                 </button>
-              }
-            }
-          </section>
-
-          <section class="christianity-player-rack">
-            <div class="christianity-offerings-zone">
-              <div
-                class="christianity-offering-drop-target"
-                cdkDropList
-                id="christianity-offerings-drop"
-                [cdkDropListConnectedTo]="['christianity-hand-source']"
-                [class.is-play-target]="canPlaceSelectedOffering() || isDraggingOffering()"
-                [cdkDropListEnterPredicate]="canDropOnOfferings"
-                [cdkDropListSortingDisabled]="true"
-                (cdkDropListDropped)="dropOnOfferings($event)"
+              </div>
+            </section>
+          }
+          <div class="christianity-impact-layer">
+            @if (combatTrail(); as trail) {
+              <span
+                class="christianity-combat-trail"
+                aria-hidden="true"
+                [class.is-leader-target]="trail.tone === 'leader'"
+                [class.is-character-target]="trail.tone === 'character'"
+                [style.--christianity-combat-trail-x]="trail.fromX"
+                [style.--christianity-combat-trail-y]="trail.fromY"
+                [style.--christianity-combat-trail-mid-x]="trail.midX"
+                [style.--christianity-combat-trail-mid-y]="trail.midY"
+                [style.--christianity-combat-trail-length]="trail.length"
+                [style.--christianity-combat-trail-angle]="trail.angle"
               >
+                <span></span>
+              </span>
+            }
+            @for (impact of impactEvents(); track impact.id) {
+              <val-mini-game-score-pop [props]="impactPopProps(impact)" />
+            }
+            @if (combatCallout(); as callout) {
+              <val-mini-game-callout [props]="callout" />
+            }
+          </div>
+          <section class="christianity-player-side christianity-player-side--opponent">
+            <section class="christianity-player-rack christianity-player-rack--opponent">
+              <div class="christianity-offerings-zone">
                 <button
                   type="button"
                   class="christianity-offering-pile"
-                  data-testid="christianity-offerings-P1"
-                  [class.is-empty-zone]="!topOffering('P1')"
+                  data-testid="christianity-offerings-P2"
+                  [class.is-empty-zone]="!topOffering('P2')"
                   valLightRipple
-                  (click)="handleOfferingPile('P1')"
+                  (click)="openOfferings('P2')"
                 >
-                  @if (offeringStack('P1').length) {
+                  @if (offeringStack('P2').length) {
                     <span class="christianity-zone-card-stack" aria-hidden="true">
-                      @for (offering of offeringStack('P1'); track offering.instanceId) {
+                      @for (offering of offeringStack('P2'); track offering.instanceId) {
                         <val-christianity-card
                           [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
                           [variant]="offering.ready ? 'baby' : 'back'"
-                          [style.transform]="zoneStackTransform($index, offeringStack('P1').length)"
+                          [style.transform]="zoneStackTransform($index, offeringStack('P2').length)"
                         ></val-christianity-card>
                       }
                     </span>
@@ -78215,89 +78598,358 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     <span class="christianity-empty-card-slot" aria-hidden="true"></span>
                   }
                   <span>{{ t('christianityOfferingReserve') }}</span>
-                  <strong>{{ readyOfferings(player()) }}</strong>
-                  <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(player()) }}</small>
+                  <strong>{{ readyOfferings(opponent()) }}</strong>
+                  <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(opponent()) }}</small>
                 </button>
               </div>
-            </div>
-            <button type="button" class="christianity-leader-card christianity-render-card-button" data-testid="christianity-leader-P1" valLightRipple (click)="inspectLeader('P1')">
-              <val-christianity-card [card]="leaderRenderCard(player())" variant="board"></val-christianity-card>
-            </button>
-            <div class="christianity-player-command">
-              <div class="christianity-player-badge">
-                <span class="christianity-avatar" [style.background]="player().avatarColor">{{ player().avatar }}</span>
-                <strong>{{ player().displayName }}</strong>
+              <div
+                class="christianity-attack-drop-target"
+                cdkDropList
+                id="christianity-opponent-leader-drop"
+                [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
+                [cdkDropListEnterPredicate]="canDropOnOpponentLeader"
+                [cdkDropListSortingDisabled]="true"
+                (cdkDropListDropped)="dropOnOpponentLeader($event)"
+              >
+                <button
+                  type="button"
+                  class="christianity-leader-card christianity-render-card-button"
+                  data-testid="christianity-leader-P2"
+                  valLightRipple
+                  [class.is-target]="isOpponentLeaderTarget()"
+                  [class.is-protected-target]="selectedAttacker() && hasOpponentGuards()"
+                  [class.is-combat-target]="isCombatLeaderTarget('P2')"
+                  (click)="handleOpponentLeader()"
+                >
+                  <val-christianity-card [card]="leaderRenderCard(opponent())" variant="board"></val-christianity-card>
+                </button>
               </div>
-            </div>
+              <span class="christianity-rack-spacer" aria-hidden="true"></span>
+            </section>
+
+            <section
+              class="christianity-battle-zone christianity-battle-zone--opponent"
+              data-testid="christianity-battle-P2"
+              [attr.aria-label]="t('christianityOpponentBattle')"
+            >
+              @for (slot of battleSlots('P2'); track slot.trackId) {
+                @if (slot.card) {
+                  <button
+                    type="button"
+                    class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
+                    [attr.data-testid]="battleCardTestId('P2', slot.card)"
+                    cdkDropList
+                    [id]="opponentTargetDropId(slot.card)"
+                    [cdkDropListConnectedTo]="ownAttackerDropSourceIds()"
+                    [cdkDropListEnterPredicate]="canDropOnOpponentCharacter"
+                    [cdkDropListSortingDisabled]="true"
+                    valLightRipple
+                    [class.is-target]="isOpponentCharacterTarget(slot.card)"
+                    [class.is-combat-target]="isCombatCharacterTarget(slot.card)"
+                    (cdkDropListDropped)="dropOnOpponentCharacter($event, slot.card)"
+                    (click)="handleOpponentCharacter(slot.card)"
+                  >
+                    <val-christianity-card
+                      [card]="characterRenderCard(slot.card)"
+                      variant="board"
+                    ></val-christianity-card>
+                  </button>
+                } @else {
+                  <span class="christianity-slot"></span>
+                }
+              }
+            </section>
           </section>
-        </section>
-      </section>
 
-      <section class="christianity-hand-shelf">
-        <div class="christianity-hand-meter">
-          <span>{{ t('christianityHand') }}</span>
-          <strong>{{ player().hand?.length ?? 0 }}</strong>
-        </div>
-        <section
-          class="christianity-hand-fan"
-          data-testid="christianity-hand-P1"
-          cdkDropList
-          id="christianity-hand-source"
-          [cdkDropListConnectedTo]="dropTargetIds()"
-          [attr.aria-label]="t('christianityYourHand')"
-          (pointerleave)="clearHoveredHandIndex()"
-        >
-          @for (cardId of player().hand ?? []; track cardId + $index) {
-            @let card = cardDefinition(cardId);
-            <div
-              class="christianity-hand-card-wrap"
-              [class.is-selected]="selectedHandCard() === cardId"
-              [class.is-dragging]="draggingCardId() === cardId"
-              [style.z-index]="handCardZIndex($index)"
-              [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
-              (pointerenter)="setHoveredHandIndex($index)"
-              (pointerdown)="setHoveredHandIndex($index)"
-              (pointerup)="releaseHoveredHand($event)"
+          <section
+            class="christianity-shared-zone"
+            data-testid="christianity-shared-zone"
+            [attr.aria-label]="t('christianitySharedZone')"
+          >
+            <button
+              type="button"
+              class="christianity-zone-pile christianity-zone-pile--history"
+              data-testid="christianity-history-zone"
+              [class.is-empty-zone]="!topHistoryCard()"
+              [class.has-new-card]="historyPulse()"
+              valLightRipple
+              (click)="openHistory()"
+            >
+              @if (historyStack().length) {
+                <span class="christianity-zone-card-stack" aria-hidden="true">
+                  @for (cardId of historyStack(); track cardId + $index) {
+                    <val-christianity-card
+                      [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityHistory') })"
+                      variant="baby"
+                      [style.transform]="zoneStackTransform($index, historyStack().length)"
+                    ></val-christianity-card>
+                  }
+                </span>
+              } @else {
+                <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+              }
+              <span>{{ t('christianityHistory') }}</span>
+              <strong>{{ game().historyZone.length }}</strong>
+            </button>
+            <button
+              type="button"
+              class="christianity-zone-pile christianity-zone-pile--deck"
+              data-testid="christianity-deck-zone"
+              valLightRipple
+              aria-live="polite"
+              (click)="inspectDeck()"
+            >
+              <span class="christianity-pile-card-hint christianity-pile-card-hint--deck" aria-hidden="true">
+                <i></i>
+              </span>
+              <span>{{ t('christianityDeck') }}</span>
+              <strong>{{ game().sharedDeck.length }}</strong>
+            </button>
+            <button
+              type="button"
+              class="christianity-zone-card christianity-zone-card--place christianity-render-card-button"
+              data-testid="christianity-place-zone"
+              cdkDropList
+              id="christianity-place-drop"
+              [cdkDropListConnectedTo]="['christianity-hand-source']"
+              [cdkDropListEnterPredicate]="canDropOnPlace"
+              [cdkDropListSortingDisabled]="true"
+              [class.is-empty-zone]="!activePlaceCard()"
+              [class.is-play-target]="canPlaceSelectedPlace() || isDraggingPlace()"
+              valLightRipple
+              (cdkDropListDropped)="dropOnPlace($event)"
+              (click)="playSelectedPlaceOrInspect()"
+            >
+              @if (placeStack().length) {
+                @if (activePlaceCard(); as placeCard) {
+                  <div
+                    class="christianity-place-backdrop"
+                    [style.background-image]="placeBackdropImage(placeCard)"
+                    aria-hidden="true"
+                  ></div>
+                }
+                <span class="christianity-zone-card-stack" aria-hidden="true">
+                  @for (cardId of placeStack(); track cardId + $index) {
+                    <val-christianity-card
+                      [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
+                      variant="baby"
+                      [style.transform]="zoneStackTransform($index, placeStack().length)"
+                    ></val-christianity-card>
+                  }
+                </span>
+              } @else {
+                <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+              }
+              <span>{{ t('christianityPlace') }}</span>
+              <strong>{{ game().placeZone.length }}</strong>
+              @if (canPlaceSelectedPlace() || isDraggingPlace()) {
+                <em>{{ t('christianityPlayHere') }}</em>
+              }
+            </button>
+          </section>
+
+          <section class="christianity-player-side">
+            <section
+              class="christianity-battle-zone"
+              data-testid="christianity-battle-P1"
+              cdkDropList
+              id="christianity-player-battle-source"
+              [cdkDropListConnectedTo]="attackTargetDropIds()"
+              [cdkDropListSortingDisabled]="true"
+              [class.is-placing-card]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+              [attr.aria-label]="t('christianityYourBattle')"
             >
+              @for (slot of battleSlots('P1'); track slot.trackId) {
+                @if (slot.card) {
+                  <button
+                    type="button"
+                    class="christianity-card-preview-card christianity-card-preview-card--battle christianity-render-card-button"
+                    [attr.data-testid]="battleCardTestId('P1', slot.card)"
+                    cdkDrag
+                    [cdkDragData]="slot.card.instanceId"
+                    [cdkDragDisabled]="!canDragAttacker(slot.card)"
+                    valLightRipple
+                    [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
+                    [class.is-exhausted]="!slot.card.canAttack"
+                    [class.is-ready-attacker]="isOwnTurn() && slot.card.canAttack"
+                    [class.is-combat-attacker]="isCombatAttacker(slot.card)"
+                    (cdkDragStarted)="startDraggingAttacker(slot.card)"
+                    (cdkDragEnded)="endDraggingAttacker()"
+                    (click)="selectAttacker(slot.card)"
+                  >
+                    <val-christianity-card
+                      [card]="characterRenderCard(slot.card)"
+                      variant="board"
+                    ></val-christianity-card>
+                    <ng-template cdkDragPreview>
+                      <div class="christianity-card-drag-preview">
+                        <val-christianity-card
+                          [card]="characterRenderCard(slot.card)"
+                          variant="board"
+                        ></val-christianity-card>
+                      </div>
+                    </ng-template>
+                    <ng-template cdkDragPlaceholder>
+                      <div class="christianity-card-drag-placeholder"></div>
+                    </ng-template>
+                  </button>
+                } @else {
+                  <button
+                    type="button"
+                    class="christianity-slot"
+                    [attr.data-testid]="battleSlotTestId('P1', $index)"
+                    cdkDropList
+                    [id]="battleSlotDropId($index)"
+                    [cdkDropListData]="$index"
+                    [cdkDropListConnectedTo]="['christianity-hand-source']"
+                    [cdkDropListEnterPredicate]="canDropOnBattleSlot"
+                    [cdkDropListSortingDisabled]="true"
+                    [class.christianity-slot--play-target]="canPlaceSelectedCharacter() || isDraggingCharacter()"
+                    valLightRipple
+                    (cdkDropListDropped)="dropOnBattleSlot($event, $index)"
+                    (click)="playSelectedCard($index)"
+                  >
+                    @if (canPlaceSelectedCharacter() || isDraggingCharacter()) {
+                      <span>{{ t('christianityPlayHere') }}</span>
+                    }
+                  </button>
+                }
+              }
+            </section>
+
+            <section class="christianity-player-rack">
+              <div class="christianity-offerings-zone">
+                <div
+                  class="christianity-offering-drop-target"
+                  cdkDropList
+                  id="christianity-offerings-drop"
+                  [cdkDropListConnectedTo]="['christianity-hand-source']"
+                  [class.is-play-target]="canPlaceSelectedOffering() || isDraggingOffering()"
+                  [cdkDropListEnterPredicate]="canDropOnOfferings"
+                  [cdkDropListSortingDisabled]="true"
+                  (cdkDropListDropped)="dropOnOfferings($event)"
+                >
+                  <button
+                    type="button"
+                    class="christianity-offering-pile"
+                    data-testid="christianity-offerings-P1"
+                    [class.is-empty-zone]="!topOffering('P1')"
+                    valLightRipple
+                    (click)="handleOfferingPile('P1')"
+                  >
+                    @if (offeringStack('P1').length) {
+                      <span class="christianity-zone-card-stack" aria-hidden="true">
+                        @for (offering of offeringStack('P1'); track offering.instanceId) {
+                          <val-christianity-card
+                            [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
+                            [variant]="offering.ready ? 'baby' : 'back'"
+                            [style.transform]="zoneStackTransform($index, offeringStack('P1').length)"
+                          ></val-christianity-card>
+                        }
+                      </span>
+                    } @else {
+                      <span class="christianity-empty-card-slot" aria-hidden="true"></span>
+                    }
+                    <span>{{ t('christianityOfferingReserve') }}</span>
+                    <strong>{{ readyOfferings(player()) }}</strong>
+                    <small>{{ t('christianityOfferingBase') }} {{ totalOfferings(player()) }}</small>
+                  </button>
+                </div>
+              </div>
               <button
                 type="button"
-                class="christianity-card-preview-card christianity-card-preview-card--hand christianity-render-card-button"
-                [attr.data-testid]="handCardTestId(cardId, $index)"
-                cdkDrag
+                class="christianity-leader-card christianity-render-card-button"
+                data-testid="christianity-leader-P1"
                 valLightRipple
-                [cdkDragData]="cardId"
-                [cdkDragDisabled]="!canPlay(card)"
-                [attr.aria-label]="handCardActionLabel(card)"
-                [class.is-selected]="selectedHandCard() === cardId"
-                [class.is-disabled]="!canPlay(card)"
-                (cdkDragStarted)="startDraggingCard(cardId)"
-                (cdkDragEnded)="endDraggingCard()"
-                (click)="selectHandCard(cardId)"
+                (click)="inspectLeader('P1')"
               >
-                <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
-                <ng-template cdkDragPreview>
-                  <div class="christianity-card-drag-preview">
-                    <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
-                  </div>
-                </ng-template>
-                <ng-template cdkDragPlaceholder>
-                  <div class="christianity-card-drag-placeholder"></div>
-                </ng-template>
+                <val-christianity-card [card]="leaderRenderCard(player())" variant="board"></val-christianity-card>
               </button>
-              <button
-                type="button"
-                class="christianity-card-eye"
-                [attr.aria-label]="t('christianityPreviewCard')"
-                (click)="inspectHandCard(cardId, true); $event.stopPropagation()"
-              ></button>
-            </div>
-          }
+              <div class="christianity-player-command">
+                <div class="christianity-player-badge">
+                  <span class="christianity-avatar" [style.background]="player().avatarColor">{{
+                    player().avatar
+                  }}</span>
+                  <strong>{{ player().displayName }}</strong>
+                </div>
+              </div>
+            </section>
+          </section>
+        </section>
+
+        <section class="christianity-hand-shelf">
+          <div class="christianity-hand-meter">
+            <span>{{ t('christianityHand') }}</span>
+            <strong>{{ player().hand?.length ?? 0 }}</strong>
+          </div>
+          <section
+            class="christianity-hand-fan"
+            data-testid="christianity-hand-P1"
+            cdkDropList
+            id="christianity-hand-source"
+            [cdkDropListConnectedTo]="dropTargetIds()"
+            [attr.aria-label]="t('christianityYourHand')"
+            (pointerleave)="clearHoveredHandIndex()"
+          >
+            @for (cardId of player().hand ?? []; track cardId + $index) {
+              @let card = cardDefinition(cardId);
+              <div
+                class="christianity-hand-card-wrap"
+                [class.is-selected]="selectedHandCard() === cardId"
+                [class.is-dragging]="draggingCardId() === cardId"
+                [style.z-index]="handCardZIndex($index)"
+                [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
+                (pointerenter)="setHoveredHandIndex($index)"
+                (pointerdown)="setHoveredHandIndex($index)"
+                (pointerup)="releaseHoveredHand($event)"
+              >
+                <button
+                  type="button"
+                  class="christianity-card-preview-card christianity-card-preview-card--hand christianity-render-card-button"
+                  [attr.data-testid]="handCardTestId(cardId, $index)"
+                  cdkDrag
+                  valLightRipple
+                  [cdkDragData]="cardId"
+                  [cdkDragDisabled]="!canPlay(card)"
+                  [attr.aria-label]="handCardActionLabel(card)"
+                  [class.is-selected]="selectedHandCard() === cardId"
+                  [class.is-disabled]="!canPlay(card)"
+                  (cdkDragStarted)="startDraggingCard(cardId)"
+                  (cdkDragEnded)="endDraggingCard()"
+                  (click)="selectHandCard(cardId)"
+                >
+                  <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
+                  <ng-template cdkDragPreview>
+                    <div class="christianity-card-drag-preview">
+                      <val-christianity-card
+                        [card]="definitionToRenderCard(card)"
+                        variant="baby"
+                      ></val-christianity-card>
+                    </div>
+                  </ng-template>
+                  <ng-template cdkDragPlaceholder>
+                    <div class="christianity-card-drag-placeholder"></div>
+                  </ng-template>
+                </button>
+                <button
+                  type="button"
+                  class="christianity-card-eye"
+                  [attr.aria-label]="t('christianityPreviewCard')"
+                  (click)="inspectHandCard(cardId, true); $event.stopPropagation()"
+                ></button>
+              </div>
+            }
+          </section>
         </section>
-      </section>
       }
 
       @if (selectedPreview()) {
-        <button type="button" class="christianity-preview-backdrop" [attr.aria-label]="t('christianityClosePreview')" (click)="closePreview()"></button>
+        <button
+          type="button"
+          class="christianity-preview-backdrop"
+          [attr.aria-label]="t('christianityClosePreview')"
+          (click)="closePreview()"
+        ></button>
         <aside
           class="christianity-floating-card-shell"
           [class.is-history-preview]="canNavigatePreview()"
@@ -78337,7 +78989,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 </button>
               }
               @if (selectedPreviewNeighborRenderCard(-1); as previousCard) {
-                <val-christianity-card class="christianity-preview-ghost christianity-preview-ghost--previous" [card]="previousCard" variant="full"></val-christianity-card>
+                <val-christianity-card
+                  class="christianity-preview-ghost christianity-preview-ghost--previous"
+                  [card]="previousCard"
+                  variant="full"
+                ></val-christianity-card>
               }
               <div
                 class="christianity-floating-card"
@@ -78356,7 +79012,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }
               </div>
               @if (selectedPreviewNeighborRenderCard(1); as nextCard) {
-                <val-christianity-card class="christianity-preview-ghost christianity-preview-ghost--next" [card]="nextCard" variant="full"></val-christianity-card>
+                <val-christianity-card
+                  class="christianity-preview-ghost christianity-preview-ghost--next"
+                  [card]="nextCard"
+                  variant="full"
+                ></val-christianity-card>
               }
             </div>
             <div class="christianity-preview-side">
@@ -78440,7 +79100,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       @if (selectedInfo(); as info) {
-        <button type="button" class="christianity-info-backdrop" [attr.aria-label]="t('close')" (click)="closeInfo()"></button>
+        <button
+          type="button"
+          class="christianity-info-backdrop"
+          [attr.aria-label]="t('close')"
+          (click)="closeInfo()"
+        ></button>
         <aside class="christianity-info-panel" aria-live="polite">
           <button type="button" class="christianity-dialog-close christianity-info-close" (click)="closeInfo()">
             {{ t('close') }}
@@ -78465,14 +79130,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (screen() === 'table') {
         <section class="christianity-actions" data-testid="christianity-actions" aria-live="polite">
           <p class="christianity-sr-only" data-testid="christianity-status">{{ statusText() }}</p>
-          <button type="button" data-testid="christianity-primary-action" [disabled]="tutorialPhase() !== 'in_progress' || selectedActionDisabled()" (click)="playSelectedCard()">
+          <button
+            type="button"
+            data-testid="christianity-primary-action"
+            [disabled]="tutorialPhase() !== 'in_progress' || selectedActionDisabled()"
+            (click)="playSelectedCard()"
+          >
             {{ selectedActionLabel() }}
           </button>
         </section>
       }
 
       @if (showHistory()) {
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseHistory')" (click)="closeHistory()"></button>
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseHistory')"
+          (click)="closeHistory()"
+        ></button>
         <section class="christianity-history-drawer" data-testid="christianity-history-drawer">
           <header>
             <h2>{{ t('christianityHistory') }}</h2>
@@ -78487,7 +79162,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <div class="christianity-history-grid" data-testid="christianity-history-grid">
               @for (cardId of game().historyZone; track cardId + $index) {
                 @let card = cardDefinition(cardId);
-                <button type="button" class="christianity-gallery-card-button christianity-render-card-button" [attr.data-testid]="historyCardTestId(cardId, $index)" valLightRipple (click)="inspectHistoryCard(cardId)">
+                <button
+                  type="button"
+                  class="christianity-gallery-card-button christianity-render-card-button"
+                  [attr.data-testid]="historyCardTestId(cardId, $index)"
+                  valLightRipple
+                  (click)="inspectHistoryCard(cardId)"
+                >
                   <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
                 </button>
               }
@@ -78499,7 +79180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       @if (showPlace()) {
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseHistory')" (click)="closePlace()"></button>
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseHistory')"
+          (click)="closePlace()"
+        ></button>
         <section class="christianity-history-drawer christianity-place-drawer" data-testid="christianity-place-drawer">
           <header>
             <h2>{{ t('christianityPlace') }}</h2>
@@ -78512,8 +79198,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </header>
           <div class="christianity-history-grid" data-testid="christianity-place-grid">
             @for (cardId of game().placeZone; track cardId + $index) {
-              <button type="button" class="christianity-gallery-card-button christianity-render-card-button" [attr.data-testid]="'christianity-place-card-' + $index" valLightRipple (click)="inspectPlaceCard(cardId)">
-                <val-christianity-card [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })" variant="baby"></val-christianity-card>
+              <button
+                type="button"
+                class="christianity-gallery-card-button christianity-render-card-button"
+                [attr.data-testid]="'christianity-place-card-' + $index"
+                valLightRipple
+                (click)="inspectPlaceCard(cardId)"
+              >
+                <val-christianity-card
+                  [card]="definitionToRenderCard(cardDefinition(cardId), { statusText: t('christianityPlace') })"
+                  variant="baby"
+                ></val-christianity-card>
               </button>
             }
           </div>
@@ -78521,8 +79216,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       @if (showGallery()) {
-        <button type="button" class="christianity-history-backdrop christianity-gallery-backdrop" [attr.aria-label]="t('christianityCloseGallery')" (click)="closeGallery()"></button>
-        <section class="christianity-history-drawer christianity-gallery-drawer" data-testid="christianity-gallery-drawer">
+        <button
+          type="button"
+          class="christianity-history-backdrop christianity-gallery-backdrop"
+          [attr.aria-label]="t('christianityCloseGallery')"
+          (click)="closeGallery()"
+        ></button>
+        <section
+          class="christianity-history-drawer christianity-gallery-drawer"
+          data-testid="christianity-gallery-drawer"
+        >
           <header>
             <div>
               <h2>{{ t('christianityGallery') }}</h2>
@@ -78538,7 +79241,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="christianity-gallery-controls">
             <label>
               <span>{{ t('christianityGallerySearch') }}</span>
-              <input type="search" [value]="gallerySearch()" (input)="setGallerySearch($event)" [placeholder]="t('christianityGallerySearchPlaceholder')" />
+              <input
+                type="search"
+                [value]="gallerySearch()"
+                (input)="setGallerySearch($event)"
+                [placeholder]="t('christianityGallerySearchPlaceholder')"
+              />
             </label>
             <label>
               <span>{{ t('christianityGalleryFilter') }}</span>
@@ -78557,7 +79265,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
           <div class="christianity-gallery-grid">
             @for (card of galleryCards(); track card.id) {
-              <button type="button" class="christianity-gallery-card-button christianity-render-card-button" valLightRipple (click)="inspectGalleryCard(card.id)">
+              <button
+                type="button"
+                class="christianity-gallery-card-button christianity-render-card-button"
+                valLightRipple
+                (click)="inspectGalleryCard(card.id)"
+              >
                 <val-christianity-card [card]="definitionToRenderCard(card)" variant="baby"></val-christianity-card>
               </button>
             } @empty {
@@ -78569,12 +79282,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       @if (offeringsSeat()) {
         @let offeringPlayer = game().players[offeringsSeat()!];
-        <button type="button" class="christianity-history-backdrop" [attr.aria-label]="t('christianityCloseOfferings')" (click)="closeOfferings()"></button>
-        <section class="christianity-history-drawer christianity-offerings-drawer" [attr.data-testid]="offeringsDrawerTestId(offeringsSeat()!)">
+        <button
+          type="button"
+          class="christianity-history-backdrop"
+          [attr.aria-label]="t('christianityCloseOfferings')"
+          (click)="closeOfferings()"
+        ></button>
+        <section
+          class="christianity-history-drawer christianity-offerings-drawer"
+          [attr.data-testid]="offeringsDrawerTestId(offeringsSeat()!)"
+        >
           <header>
             <h2>{{ t('christianityOfferings') }}</h2>
             <div class="christianity-dialog-actions">
-              <span>{{ t('christianityOfferingReserve') }} {{ readyOfferings(offeringPlayer) }} · {{ t('christianityOfferingBase') }} {{ totalOfferings(offeringPlayer) }}</span>
+              <span
+                >{{ t('christianityOfferingReserve') }} {{ readyOfferings(offeringPlayer) }} ·
+                {{ t('christianityOfferingBase') }} {{ totalOfferings(offeringPlayer) }}</span
+              >
               <button type="button" class="christianity-dialog-close" (click)="closeOfferings()">
                 {{ t('close') }}
               </button>
@@ -78584,14 +79308,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <span class="christianity-rule-note-icon" aria-hidden="true">i</span>
             <p>{{ t('christianityOfferingsRuleBody') }}</p>
           </div>
-            <div class="christianity-offering-list" [attr.data-testid]="offeringListTestId(offeringsSeat()!)">
-              @for (offering of offeringPlayer.offerings; track offering.instanceId) {
-                <article class="christianity-offering-row" [class.is-exhausted]="!offering.ready">
-                <button type="button" class="christianity-offering-card christianity-render-card-button" [attr.data-testid]="offeringCardTestId(offering)" valLightRipple (click)="inspectOffering(offering)">
-                  <val-christianity-card [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()" [variant]="offering.ready ? 'baby' : 'back'"></val-christianity-card>
+          <div class="christianity-offering-list" [attr.data-testid]="offeringListTestId(offeringsSeat()!)">
+            @for (offering of offeringPlayer.offerings; track offering.instanceId) {
+              <article class="christianity-offering-row" [class.is-exhausted]="!offering.ready">
+                <button
+                  type="button"
+                  class="christianity-offering-card christianity-render-card-button"
+                  [attr.data-testid]="offeringCardTestId(offering)"
+                  valLightRipple
+                  (click)="inspectOffering(offering)"
+                >
+                  <val-christianity-card
+                    [card]="offering.ready ? offeringRenderCard(offering) : hiddenCardRenderCard()"
+                    [variant]="offering.ready ? 'baby' : 'back'"
+                  ></val-christianity-card>
                 </button>
                 <div>
-                  <strong>{{ offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted') }}</strong>
+                  <strong>{{
+                    offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted')
+                  }}</strong>
                   <p>{{ offeringAbilityText(offering) }}</p>
                   @if (offering.abilityName) {
                     <button