valtech-components 4.0.428 → 4.0.430

package/fesm2022/valtech-components.mjs

@@ -58,7 +58,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.428';
+const VERSION = '4.0.430';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -62464,6 +62464,7 @@ const MINI_GAMES_I18N = {
         christianityHand: 'Mano',
         christianityOpponentBattle: 'Zona de batalla rival',
         christianityYourBattle: 'Tu zona de batalla',
+        christianityOpponentHand: 'Mano rival',
         christianitySharedZone: 'Zona compartida',
         christianityHistory: 'Historia',
         christianityDeck: 'Mazo',
@@ -62471,14 +62472,27 @@ const MINI_GAMES_I18N = {
         christianityEmpty: 'Vacío',
         christianityYourHand: 'Tu mano',
         christianityCost: 'Coste',
+        christianityOfferingCard: 'Ofrenda',
+        christianityCharacterCard: 'Personaje',
+        christianityLeaderCard: 'Líder',
+        christianityHiddenCard: 'Carta oculta',
         christianityEndTurn: 'Terminar turno',
         christianityPlayCard: 'Jugar carta',
         christianityReset: 'Reiniciar mock',
         christianityWaitTurn: 'Espera el turno rival.',
         christianityChooseTarget: 'Elige un objetivo para atacar.',
+        christianityChooseCharacterTarget: 'El rival tiene personajes: debes atacarlos antes que al líder.',
         christianityReadyToPlay: 'Puedes jugar esta carta.',
         christianityNeedOfferings: 'Necesitas más ofrendas para jugar esa carta.',
         christianityChooseCard: 'Elige una carta o un personaje listo para actuar.',
+        christianityLeaderProtected: 'No puedes atacar directamente al líder mientras tenga personajes en batalla.',
+        christianityLeaderBody: 'Si su vida llega a 0, la partida termina.',
+        christianityOfferingReady: 'Lista',
+        christianityOfferingExhausted: 'Agotada',
+        christianityOfferingBody: 'Se agota para pagar costes y vuelve a estar lista al comenzar tu turno.',
+        christianityCharacterBody: 'Entra a batalla y debe esperar un turno para atacar.',
+        christianityCharacterReady: 'Listo para atacar.',
+        christianityCharacterExhausted: 'No puede atacar todavía.',
         christianityHistoryEmpty: 'Todavía no hay cartas en historia.',
         soonTitle: 'Próximamente',
         openGame: 'Jugar',
@@ -62868,6 +62882,7 @@ const MINI_GAMES_I18N = {
         christianityHand: 'Hand',
         christianityOpponentBattle: 'Opponent battle zone',
         christianityYourBattle: 'Your battle zone',
+        christianityOpponentHand: 'Opponent hand',
         christianitySharedZone: 'Shared zone',
         christianityHistory: 'History',
         christianityDeck: 'Deck',
@@ -62875,14 +62890,27 @@ const MINI_GAMES_I18N = {
         christianityEmpty: 'Empty',
         christianityYourHand: 'Your hand',
         christianityCost: 'Cost',
+        christianityOfferingCard: 'Offering',
+        christianityCharacterCard: 'Character',
+        christianityLeaderCard: 'Leader',
+        christianityHiddenCard: 'Hidden card',
         christianityEndTurn: 'End turn',
         christianityPlayCard: 'Play card',
         christianityReset: 'Reset mock',
         christianityWaitTurn: 'Wait for the opponent turn.',
         christianityChooseTarget: 'Choose a target to attack.',
+        christianityChooseCharacterTarget: 'The opponent has characters: attack them before the leader.',
         christianityReadyToPlay: 'You can play this card.',
         christianityNeedOfferings: 'You need more offerings to play that card.',
         christianityChooseCard: 'Choose a card or a ready character.',
+        christianityLeaderProtected: 'You cannot attack the leader directly while they have characters in battle.',
+        christianityLeaderBody: 'If this leader reaches 0 life, the game ends.',
+        christianityOfferingReady: 'Ready',
+        christianityOfferingExhausted: 'Exhausted',
+        christianityOfferingBody: 'Exhaust it to pay costs. It readies again at the start of your turn.',
+        christianityCharacterBody: 'Enters battle and must wait one turn before attacking.',
+        christianityCharacterReady: 'Ready to attack.',
+        christianityCharacterExhausted: 'Cannot attack yet.',
         christianityHistoryEmpty: 'There are no cards in history yet.',
         soonTitle: 'Coming soon',
         openGame: 'Play',
@@ -67882,11 +67910,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 const STARTER_CARDS = {
-    p_scout: { id: 'p_scout', name: 'Scout', cost: 1, attack: 1, life: 1 },
-    p_guard: { id: 'p_guard', name: 'Guard', cost: 2, attack: 1, life: 3 },
-    p_warrior: { id: 'p_warrior', name: 'Warrior', cost: 2, attack: 2, life: 2 },
-    p_elder: { id: 'p_elder', name: 'Elder', cost: 3, attack: 2, life: 4 },
-    p_champion: { id: 'p_champion', name: 'Champion', cost: 4, attack: 4, life: 4 },
+    o_simple: { id: 'o_simple', name: 'Ofrenda simple', type: 'offering', cost: 0, attack: 0, life: 1 },
+    p_scout: { id: 'p_scout', name: 'Scout', type: 'character', cost: 1, attack: 1, life: 1 },
+    p_guard: { id: 'p_guard', name: 'Guard', type: 'character', cost: 2, attack: 1, life: 3 },
+    p_warrior: { id: 'p_warrior', name: 'Warrior', type: 'character', cost: 2, attack: 2, life: 2 },
+    p_elder: { id: 'p_elder', name: 'Elder', type: 'character', cost: 3, attack: 2, life: 4 },
+    p_champion: { id: 'p_champion', name: 'Champion', type: 'character', cost: 4, attack: 4, life: 4 },
 };
 const STARTING_GAME = {
     gameId: 'mock-christianity',
@@ -67904,9 +67933,9 @@ const STARTING_GAME = {
             leaderName: 'Adam',
             leaderHp: 15,
             leaderMaxHp: 15,
-            maxOfferings: 3,
-            offeringPoints: 3,
-            hand: ['p_scout', 'p_warrior', 'p_guard', 'p_elder'],
+            offerings: [{ instanceId: 'p1_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P1', ready: true, value: 1 }],
+            offeringPlayedThisTurn: false,
+            hand: ['o_simple', 'p_scout', 'p_warrior', 'p_guard'],
             battleZone: [],
         },
         P2: {
@@ -67915,8 +67944,8 @@ const STARTING_GAME = {
             leaderName: 'Noah',
             leaderHp: 15,
             leaderMaxHp: 15,
-            maxOfferings: 3,
-            offeringPoints: 3,
+            offerings: [{ instanceId: 'p2_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P2', ready: true, value: 1 }],
+            offeringPlayedThisTurn: false,
             handCount: 4,
             battleZone: [
                 {
@@ -67941,11 +67970,13 @@ class ChristianityGameComponent {
         this.game = signal(structuredClone(STARTING_GAME));
         this.selectedHandCard = signal(null);
         this.selectedAttacker = signal(null);
+        this.selectedPreview = signal(null);
         this.showHistory = signal(false);
         this.player = computed(() => this.game().players.P1);
         this.opponent = computed(() => this.game().players.P2);
         this.currentPlayer = computed(() => this.game().players[this.game().turnOwner]);
         this.isOwnTurn = computed(() => this.game().turnOwner === 'P1');
+        this.hasOpponentGuards = computed(() => this.opponent().battleZone.length > 0);
         this.opponentHandCount = computed(() => this.opponent().handCount ?? this.opponent().hand?.length ?? 0);
         this.statusText = computed(() => {
             const attacker = this.selectedAttacker();
@@ -67954,7 +67985,7 @@ class ChristianityGameComponent {
                 return this.t('christianityWaitTurn');
             }
             if (attacker) {
-                return this.t('christianityChooseTarget');
+                return this.hasOpponentGuards() ? this.t('christianityChooseCharacterTarget') : this.t('christianityChooseTarget');
             }
             if (handCard) {
                 const card = this.cardDefinition(handCard);
@@ -67973,16 +68004,33 @@ class ChristianityGameComponent {
     }
     battleSlots(seat) {
         const cards = this.game().players[seat].battleZone;
-        return Array.from({ length: 5 }, (_, index) => ({
+        return Array.from({ length: 4 }, (_, index) => ({
             trackId: cards[index]?.instanceId ?? `${seat}-empty-${index}`,
             card: cards[index],
         }));
     }
-    offeringCards(player) {
-        return Array.from({ length: Math.max(0, player.maxOfferings) });
+    hiddenHandCards(count) {
+        return Array.from({ length: count });
+    }
+    fanTransform(index, total, opponent) {
+        if (total <= 1)
+            return opponent ? 'rotate(180deg)' : 'none';
+        const center = (total - 1) / 2;
+        const offset = index - center;
+        const rotate = offset * 5;
+        const lift = Math.abs(offset) * 0.25;
+        const base = opponent ? 'rotate(180deg)' : '';
+        return `${base} translateY(${lift}rem) rotate(${rotate}deg)`;
+    }
+    readyOfferings(player) {
+        return player.offerings.reduce((total, offering) => total + (offering.ready ? offering.value : 0), 0);
     }
     canPlay(card) {
-        return this.isOwnTurn() && this.player().offeringPoints >= card.cost && this.player().battleZone.length < 5;
+        if (!this.isOwnTurn())
+            return false;
+        if (card.type === 'offering')
+            return !this.player().offeringPlayedThisTurn;
+        return this.readyOfferings(this.player()) >= card.cost && this.player().battleZone.length < 4;
     }
     canPlaySelected() {
         const selected = this.selectedHandCard();
@@ -67991,6 +68039,7 @@ class ChristianityGameComponent {
     selectHandCard(cardId) {
         this.selectedAttacker.set(null);
         this.selectedHandCard.set(this.selectedHandCard() === cardId ? null : cardId);
+        this.inspectHandCard(cardId);
     }
     playSelectedCard() {
         const cardId = this.selectedHandCard();
@@ -68006,34 +68055,72 @@ class ChristianityGameComponent {
             if (handIndex < 0 || !player.hand)
                 return game;
             player.hand.splice(handIndex, 1);
-            player.offeringPoints -= card.cost;
-            player.battleZone.push({
-                instanceId: `p1_${next.revision + 1}_${player.battleZone.length}`,
-                cardId: card.id,
-                name: card.name,
-                owner: 'P1',
-                controller: 'P1',
-                attack: card.attack,
-                currentHp: card.life,
-                maxHp: card.life,
-                canAttack: false,
-            });
+            if (card.type === 'offering') {
+                player.offerings.push({
+                    instanceId: `p1_offering_${next.revision + 1}`,
+                    cardId: card.id,
+                    name: card.name,
+                    owner: 'P1',
+                    ready: true,
+                    value: card.life,
+                });
+                player.offeringPlayedThisTurn = true;
+            }
+            else {
+                this.spendOfferings(player, card.cost);
+                player.battleZone.push({
+                    instanceId: `p1_${next.revision + 1}_${player.battleZone.length}`,
+                    cardId: card.id,
+                    name: card.name,
+                    owner: 'P1',
+                    controller: 'P1',
+                    attack: card.attack,
+                    currentHp: card.life,
+                    maxHp: card.life,
+                    canAttack: false,
+                });
+            }
             next.revision++;
-            next.log = [`${card.name} entra en batalla.`, ...next.log].slice(0, 4);
+            next.log = [
+                card.type === 'offering' ? `${card.name} queda lista como ofrenda.` : `${card.name} entra en batalla.`,
+                ...next.log,
+            ].slice(0, 4);
             return next;
         });
         this.selectedHandCard.set(null);
     }
     selectAttacker(card) {
         this.selectedHandCard.set(null);
+        this.inspectCharacter(card);
         if (!this.isOwnTurn() || !card.canAttack)
             return;
         this.selectedAttacker.set(this.selectedAttacker()?.instanceId === card.instanceId ? null : card);
     }
+    handleOpponentCharacter(card) {
+        this.inspectCharacter(card);
+        if (this.selectedAttacker()) {
+            this.attackCharacter(card);
+        }
+    }
+    handleOpponentLeader() {
+        this.inspectLeader('P2');
+        if (this.selectedAttacker() && !this.hasOpponentGuards()) {
+            this.attackLeader();
+        }
+    }
     attackLeader() {
         const attacker = this.selectedAttacker();
         if (!attacker)
             return;
+        if (this.hasOpponentGuards()) {
+            this.selectedPreview.set({
+                title: this.opponent().leaderName,
+                eyebrow: this.t('christianityLeaderCard'),
+                meta: `${this.opponent().leaderHp}/${this.opponent().leaderMaxHp}`,
+                body: this.t('christianityLeaderProtected'),
+            });
+            return;
+        }
         this.game.update(game => {
             const next = structuredClone(game);
             const liveAttacker = next.players.P1.battleZone.find(card => card.instanceId === attacker.instanceId);
@@ -68076,8 +68163,8 @@ class ChristianityGameComponent {
             next.turnOwner = next.turnOwner === 'P1' ? 'P2' : 'P1';
             next.turnCount++;
             const current = next.players[next.turnOwner];
-            current.maxOfferings = Math.min(10, current.maxOfferings + 1);
-            current.offeringPoints = current.maxOfferings;
+            current.offeringPlayedThisTurn = false;
+            current.offerings = current.offerings.map(offering => ({ ...offering, ready: true }));
             current.battleZone = current.battleZone.map(card => ({ ...card, canAttack: true }));
             next.revision++;
             next.log = [`Turno de ${current.displayName}.`, ...next.log].slice(0, 4);
@@ -68088,6 +68175,7 @@ class ChristianityGameComponent {
         this.game.set(structuredClone(STARTING_GAME));
         this.selectedHandCard.set(null);
         this.selectedAttacker.set(null);
+        this.selectedPreview.set(null);
     }
     historyNames() {
         return this.game()
@@ -68101,6 +68189,49 @@ class ChristianityGameComponent {
         game.historyZone.push(...destroyed.map(card => card.cardId));
         player.battleZone = player.battleZone.filter(card => card.currentHp > 0);
     }
+    inspectLeader(seat) {
+        const player = this.game().players[seat];
+        this.selectedPreview.set({
+            title: player.leaderName,
+            eyebrow: this.t('christianityLeaderCard'),
+            meta: `${player.leaderHp}/${player.leaderMaxHp}`,
+            body: seat === 'P2' && this.hasOpponentGuards() ? this.t('christianityLeaderProtected') : this.t('christianityLeaderBody'),
+        });
+    }
+    inspectOffering(offering) {
+        this.selectedPreview.set({
+            title: offering.name,
+            eyebrow: this.t('christianityOfferingCard'),
+            meta: offering.ready ? this.t('christianityOfferingReady') : this.t('christianityOfferingExhausted'),
+            body: this.t('christianityOfferingBody'),
+        });
+    }
+    inspectHandCard(cardId) {
+        const card = this.cardDefinition(cardId);
+        this.selectedPreview.set({
+            title: card.name,
+            eyebrow: card.type === 'offering' ? this.t('christianityOfferingCard') : this.t('christianityCharacterCard'),
+            meta: card.type === 'offering' ? `+${card.life}` : `${this.t('christianityCost')} ${card.cost} · ${card.attack}/${card.life}`,
+            body: card.type === 'offering' ? this.t('christianityOfferingBody') : this.t('christianityCharacterBody'),
+        });
+    }
+    inspectCharacter(card) {
+        this.selectedPreview.set({
+            title: card.name,
+            eyebrow: this.t('christianityCharacterCard'),
+            meta: `${card.attack}/${card.currentHp}`,
+            body: card.canAttack ? this.t('christianityCharacterReady') : this.t('christianityCharacterExhausted'),
+        });
+    }
+    spendOfferings(player, cost) {
+        let remaining = cost;
+        player.offerings = player.offerings.map(offering => {
+            if (remaining <= 0 || !offering.ready)
+                return offering;
+            remaining -= offering.value;
+            return { ...offering, ready: false };
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChristianityGameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChristianityGameComponent, isStandalone: true, selector: "val-christianity-game", ngImport: i0, template: `
     <main class="christianity-shell">
@@ -68115,118 +68246,153 @@ class ChristianityGameComponent {
         </div>
       </section>
 
+      <section class="christianity-hand-fan christianity-hand-fan--opponent" [attr.aria-label]="t('christianityOpponentHand')">
+        @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
+          <button
+            type="button"
+            class="christianity-card-preview-card christianity-card-preview-card--back"
+            [style.transform]="fanTransform($index, opponentHandCount(), true)"
+            [attr.aria-label]="t('christianityHiddenCard')"
+          ></button>
+        }
+      </section>
+
       <section class="christianity-table" [attr.aria-label]="t('christianityTable')">
-        <section class="christianity-player christianity-player--opponent">
-          <div class="christianity-player__summary">
-            <div class="christianity-leader">
-              <span>{{ opponent().leaderName }}</span>
-              <strong>{{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</strong>
-            </div>
-            <div class="christianity-offerings">
-              <span>{{ t('christianityOfferings') }}</span>
-              <strong>{{ opponent().offeringPoints }}/{{ opponent().maxOfferings }}</strong>
-              <div class="christianity-offering-cards" aria-hidden="true">
-                @for (_ of offeringCards(opponent()); track $index) {
-                  <i [class.is-used]="$index >= opponent().offeringPoints"></i>
-                }
-              </div>
-            </div>
-            <div class="christianity-hidden-hand">
-              <span>{{ t('christianityHand') }}</span>
-              <strong>{{ opponentHandCount() }}</strong>
-            </div>
-          </div>
-          <div class="christianity-battle-zone" [attr.aria-label]="t('christianityOpponentBattle')">
-            @for (slot of battleSlots('P2'); track slot.trackId) {
-              @if (slot.card) {
-                <button
-                  type="button"
-                  class="christianity-card christianity-card--battle"
-                  [class.is-target]="selectedAttacker()"
-                  (click)="attackCharacter(slot.card)"
-                >
-                  <span>{{ slot.card.name }}</span>
-                  <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
-                </button>
-              } @else {
-                <span class="christianity-slot"></span>
-              }
+        <section class="christianity-player-rack christianity-player-rack--opponent">
+          <div class="christianity-offerings-zone">
+            @for (offering of opponent().offerings; track offering.instanceId) {
+              <button
+                type="button"
+                class="christianity-card-mini christianity-card-mini--offering"
+                [class.is-exhausted]="!offering.ready"
+                (click)="inspectOffering(offering)"
+              >
+                <span>{{ t('christianityOfferingCard') }}</span>
+                <strong>+{{ offering.value }}</strong>
+              </button>
             }
           </div>
+          <button type="button" class="christianity-leader-card" [class.is-target]="selectedAttacker() && !hasOpponentGuards()" (click)="handleOpponentLeader()">
+            <span>{{ opponent().leaderName }}</span>
+            <strong>{{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</strong>
+          </button>
+        </section>
+
+        <section class="christianity-battle-zone christianity-battle-zone--opponent" [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"
+                [class.is-target]="selectedAttacker()"
+                (click)="handleOpponentCharacter(slot.card)"
+              >
+                <span>{{ slot.card.name }}</span>
+                <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
+              </button>
+            } @else {
+              <span class="christianity-slot"></span>
+            }
+          }
         </section>
 
         <section class="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
-          <button type="button" class="christianity-pile" (click)="showHistory.set(!showHistory())">
+          <button type="button" class="christianity-zone-card" (click)="showHistory.set(!showHistory())">
             <span>{{ t('christianityHistory') }}</span>
             <strong>{{ game().historyZone.length }}</strong>
           </button>
-          <div class="christianity-deck" aria-live="polite">
+          <div class="christianity-zone-card" aria-live="polite">
             <span>{{ t('christianityDeck') }}</span>
             <strong>{{ game().sharedDeckCount }}</strong>
           </div>
-          <div class="christianity-place">
+          <div class="christianity-zone-card">
             <span>{{ t('christianityPlace') }}</span>
             <strong>{{ t('christianityEmpty') }}</strong>
           </div>
         </section>
 
-        <section class="christianity-player">
-          <div class="christianity-battle-zone" [attr.aria-label]="t('christianityYourBattle')">
-            @for (slot of battleSlots('P1'); track slot.trackId) {
-              @if (slot.card) {
-                <button
-                  type="button"
-                  class="christianity-card christianity-card--battle"
-                  [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
-                  [class.is-exhausted]="!slot.card.canAttack"
-                  (click)="selectAttacker(slot.card)"
-                >
-                  <span>{{ slot.card.name }}</span>
-                  <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
-                </button>
-              } @else {
-                <span class="christianity-slot"></span>
-              }
+        <section class="christianity-battle-zone" [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"
+                [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
+                [class.is-exhausted]="!slot.card.canAttack"
+                (click)="selectAttacker(slot.card)"
+              >
+                <span>{{ slot.card.name }}</span>
+                <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
+              </button>
+            } @else {
+              <span class="christianity-slot"></span>
+            }
+          }
+        </section>
+
+        <section class="christianity-player-rack">
+          <div class="christianity-offerings-zone">
+            @for (offering of player().offerings; track offering.instanceId) {
+              <button
+                type="button"
+                class="christianity-card-mini christianity-card-mini--offering"
+                [class.is-exhausted]="!offering.ready"
+                (click)="inspectOffering(offering)"
+              >
+                <span>{{ t('christianityOfferingCard') }}</span>
+                <strong>+{{ offering.value }}</strong>
+              </button>
             }
           </div>
-          <div class="christianity-player__summary">
-            <div class="christianity-offerings">
-              <span>{{ t('christianityOfferings') }}</span>
-              <strong>{{ player().offeringPoints }}/{{ player().maxOfferings }}</strong>
-              <div class="christianity-offering-cards" aria-hidden="true">
-                @for (_ of offeringCards(player()); track $index) {
-                  <i [class.is-used]="$index >= player().offeringPoints"></i>
-                }
-              </div>
-            </div>
-            <button type="button" class="christianity-leader christianity-leader--target" (click)="attackLeader()">
-              <span>{{ player().leaderName }}</span>
-              <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
-            </button>
-            <button type="button" class="christianity-end-turn" (click)="endTurn()">
-              {{ t('christianityEndTurn') }}
-            </button>
-          </div>
+          <button type="button" class="christianity-leader-card" (click)="inspectLeader('P1')">
+            <span>{{ player().leaderName }}</span>
+            <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
+          </button>
+          <button type="button" class="christianity-end-turn" (click)="endTurn()">
+            {{ t('christianityEndTurn') }}
+          </button>
         </section>
       </section>
 
-      <section class="christianity-hand" [attr.aria-label]="t('christianityYourHand')">
+      <section class="christianity-hand-fan" [attr.aria-label]="t('christianityYourHand')">
         @for (cardId of player().hand ?? []; track cardId + $index) {
           @let card = cardDefinition(cardId);
           <button
             type="button"
-            class="christianity-card christianity-card--hand"
+            class="christianity-card-preview-card christianity-card-preview-card--hand"
             [class.is-selected]="selectedHandCard() === cardId"
             [class.is-disabled]="!canPlay(card)"
+            [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
             (click)="selectHandCard(cardId)"
           >
-            <small>{{ t('christianityCost') }} {{ card.cost }}</small>
+            <small>
+              @if (card.type === 'offering') {
+                {{ t('christianityOfferingCard') }}
+              } @else {
+                {{ t('christianityCost') }} {{ card.cost }}
+              }
+            </small>
             <span>{{ card.name }}</span>
-            <strong>{{ card.attack }} / {{ card.life }}</strong>
+            <strong>
+              @if (card.type === 'offering') {
+                +{{ card.life }}
+              } @else {
+                {{ card.attack }} / {{ card.life }}
+              }
+            </strong>
           </button>
         }
       </section>
 
+      @if (selectedPreview()) {
+        <aside class="christianity-floating-card" aria-live="polite">
+          <small>{{ selectedPreview()?.eyebrow }}</small>
+          <strong>{{ selectedPreview()?.title }}</strong>
+          <span>{{ selectedPreview()?.meta }}</span>
+          <p>{{ selectedPreview()?.body }}</p>
+        </aside>
+      }
+
       <section class="christianity-actions" aria-live="polite">
         <p>{{ statusText() }}</p>
         <div>
@@ -68250,7 +68416,7 @@ class ChristianityGameComponent {
         </section>
       }
     </main>
-  `, isInline: true, styles: [":host{display:block;color:var(--val-text-color, #1f2933)}.christianity-shell{display:grid;gap:.875rem;padding:.75rem .25rem;border:1px solid rgba(36,48,68,.12);border-radius:.75rem;background:#f6f8fb}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-header h1,.christianity-header p,.christianity-history h2,.christianity-actions p{margin:0}.christianity-header h1{font-size:1.35rem;line-height:1.1}.christianity-header p,.christianity-turn span,.christianity-offerings span,.christianity-hidden-hand span,.christianity-deck span,.christianity-place span,.christianity-pile span,.christianity-leader span{color:#1f2933a3;font-size:.75rem}.christianity-turn,.christianity-leader,.christianity-offerings,.christianity-hidden-hand,.christianity-pile,.christianity-deck,.christianity-place{display:grid;gap:.15rem;min-width:5.25rem;padding:.55rem .65rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#fff}.christianity-turn.is-own-turn{border-color:#12806c59;background:#ecfdf5}.christianity-table{display:grid;gap:.75rem;padding:.55rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player{display:grid;gap:.65rem}.christianity-battle-zone{display:grid;grid-template-columns:repeat(5,minmax(4.2rem,1fr));gap:.5rem;min-height:7rem;padding:.55rem .4rem;border-radius:.75rem;background:#ffffffc2}.christianity-shared-zone{padding:.55rem .4rem;border-radius:.75rem;background:#ffffffe6}.christianity-card,.christianity-end-turn,.christianity-actions button,.christianity-pile,.christianity-leader--target{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card{display:grid;align-content:space-between;min-height:5.8rem;padding:.5rem;text-align:left;box-shadow:0 .5rem 1.25rem #24304414}.christianity-card span{font-weight:700}.christianity-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-card.is-selected{border-color:#2563eb;box-shadow:0 0 0 .2rem #2563eb29}.christianity-card.is-disabled,.christianity-card.is-exhausted{opacity:.55}.christianity-card.is-target{border-color:#dc2626}.christianity-offering-cards{display:grid;grid-auto-flow:column;grid-auto-columns:.7rem;gap:.16rem;align-items:end;min-height:1.05rem}.christianity-offering-cards i{display:block;width:.65rem;height:.95rem;border:1px solid rgba(16,42,67,.22);border-radius:.18rem;background:#f8fafc}.christianity-offering-cards i.is-used{background:#cbd5e1;transform:rotate(90deg);transform-origin:center}.christianity-slot{min-height:5.8rem;border:1px dashed rgba(36,48,68,.22);border-radius:.5rem;background:#ffffff73}.christianity-hand{display:grid;grid-auto-columns:minmax(6rem,8rem);grid-auto-flow:column;gap:.55rem;overflow-x:auto;padding-bottom:.25rem}.christianity-actions{align-items:flex-start;padding:.75rem;border-radius:.75rem;background:#fff}.christianity-actions div{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.christianity-actions button,.christianity-end-turn{min-height:2.4rem;padding:0 .75rem;font-weight:700}.christianity-actions button:not(:disabled),.christianity-end-turn{background:#102a43;color:#fff}.christianity-history{padding:.75rem;border-radius:.75rem;background:#fff}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible{outline:.1875rem solid rgba(37,99,235,.24);outline-offset:.125rem}@media (max-width: 720px){.christianity-shell{padding:.55rem 0;border-right:0;border-left:0;border-radius:0}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{align-items:stretch;flex-direction:column}.christianity-battle-zone{grid-template-columns:repeat(5,minmax(3.8rem,1fr));overflow-x:auto}}\n"] }); }
+  `, isInline: true, styles: [":host{display:block;color:var(--val-text-color, #1f2933)}.christianity-shell{display:grid;gap:.875rem;padding:.75rem .25rem;border:1px solid rgba(36,48,68,.12);border-radius:.75rem;background:#f6f8fb}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-header h1,.christianity-header p,.christianity-history h2,.christianity-actions p{margin:0}.christianity-header h1{font-size:1.35rem;line-height:1.1}.christianity-header p,.christianity-turn span,.christianity-offerings span,.christianity-hidden-hand span,.christianity-deck span,.christianity-place span,.christianity-pile span,.christianity-leader span{color:#1f2933a3;font-size:.75rem}.christianity-turn,.christianity-leader,.christianity-offerings,.christianity-hidden-hand,.christianity-pile,.christianity-deck,.christianity-place{display:grid;gap:.15rem;min-width:5.25rem;padding:.55rem .65rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#fff}.christianity-turn.is-own-turn{border-color:#12806c59;background:#ecfdf5}.christianity-table{display:grid;gap:.75rem;padding:.55rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player{display:grid;gap:.65rem}.christianity-battle-zone{display:grid;grid-template-columns:repeat(5,minmax(4.2rem,1fr));gap:.5rem;min-height:7rem;padding:.55rem .4rem;border-radius:.75rem;background:#ffffffc2}.christianity-shared-zone{padding:.55rem .4rem;border-radius:.75rem;background:#ffffffe6}.christianity-card,.christianity-end-turn,.christianity-actions button,.christianity-pile,.christianity-leader--target{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card{display:grid;align-content:space-between;min-height:5.8rem;padding:.5rem;text-align:left;box-shadow:0 .5rem 1.25rem #24304414}.christianity-card span{font-weight:700}.christianity-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-card.is-selected{border-color:#2563eb;box-shadow:0 0 0 .2rem #2563eb29}.christianity-card.is-disabled,.christianity-card.is-exhausted{opacity:.55}.christianity-card.is-target{border-color:#dc2626}.christianity-offering-cards{display:grid;grid-auto-flow:column;grid-auto-columns:.7rem;gap:.16rem;align-items:end;min-height:1.05rem}.christianity-offering-cards i{display:block;width:.65rem;height:.95rem;border:1px solid rgba(16,42,67,.22);border-radius:.18rem;background:#f8fafc}.christianity-offering-cards i.is-used{background:#cbd5e1;transform:rotate(90deg);transform-origin:center}.christianity-slot{min-height:5.8rem;border:1px dashed rgba(36,48,68,.22);border-radius:.5rem;background:#ffffff73}.christianity-hand{display:grid;grid-auto-columns:minmax(6rem,8rem);grid-auto-flow:column;gap:.55rem;overflow-x:auto;padding-bottom:.25rem}.christianity-actions{align-items:flex-start;padding:.75rem;border-radius:.75rem;background:#fff}.christianity-actions div{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.christianity-actions button,.christianity-end-turn{min-height:2.4rem;padding:0 .75rem;font-weight:700}.christianity-actions button:not(:disabled),.christianity-end-turn{background:#102a43;color:#fff}.christianity-history{padding:.75rem;border-radius:.75rem;background:#fff}.christianity-hand-fan{position:relative;display:flex;justify-content:center;min-height:7.4rem;padding:0 .25rem;isolation:isolate}.christianity-hand-fan--opponent{min-height:4.7rem;margin-bottom:-1.1rem}.christianity-card-preview-card,.christianity-card-mini,.christianity-leader-card,.christianity-zone-card,.christianity-end-turn{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card-preview-card{display:grid;align-content:space-between;width:clamp(4.9rem,17vw,7.1rem);min-height:clamp(6.6rem,22vw,8.8rem);margin-inline:-.42rem;padding:.48rem;text-align:left;transform-origin:50% 115%;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;box-shadow:0 .5rem 1.25rem #2430441a}.christianity-card-preview-card--hand:hover,.christianity-card-preview-card--hand.is-selected{z-index:3;border-color:#2563eb;box-shadow:0 1rem 2rem #2563eb2e}.christianity-card-preview-card--back{min-height:4.8rem;background:linear-gradient(135deg,#102a431f,#102a4305),repeating-linear-gradient(45deg,#e2e8f0 0 .35rem,#f8fafc .35rem .7rem)}.christianity-card-preview-card--battle{width:100%;min-height:5.7rem;margin-inline:0}.christianity-card-preview-card span,.christianity-card-mini span,.christianity-leader-card span,.christianity-zone-card span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-leader-card strong,.christianity-zone-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-player-rack{display:grid;grid-template-columns:minmax(4.2rem,1fr) minmax(5rem,6.5rem) minmax(4.2rem,1fr);gap:.55rem;align-items:end;justify-items:center}.christianity-player-rack--opponent{align-items:start}.christianity-offerings-zone{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:flex-end;width:100%}.christianity-card-mini,.christianity-leader-card,.christianity-zone-card{display:grid;align-content:space-between;min-height:4.9rem;padding:.48rem;text-align:left}.christianity-card-mini{width:3.5rem}.christianity-leader-card{width:min(100%,6.5rem);min-height:5.8rem}.christianity-battle-zone{grid-template-columns:repeat(4,minmax(4rem,1fr))}.christianity-shared-zone{display:grid;grid-template-columns:repeat(3,minmax(4.3rem,1fr));align-items:stretch}.christianity-floating-card{position:fixed;right:max(.75rem,env(safe-area-inset-right));bottom:max(5.8rem,env(safe-area-inset-bottom));z-index:10;display:grid;gap:.28rem;width:min(14rem,calc(100vw - 1.5rem));min-height:10rem;padding:.8rem;border:1px solid rgba(36,48,68,.18);border-radius:.6rem;background:#fffffff5;box-shadow:0 1.25rem 2.5rem #102a432e}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:1.05rem}.christianity-floating-card p{margin:0;font-size:.86rem;line-height:1.35}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible{outline:.1875rem solid rgba(37,99,235,.24);outline-offset:.125rem}@media (max-width: 720px){.christianity-shell{padding:.55rem 0;border-right:0;border-left:0;border-radius:0}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{align-items:stretch;flex-direction:column}.christianity-battle-zone{grid-template-columns:repeat(4,minmax(3.35rem,1fr));overflow-x:auto}.christianity-hand-fan{min-height:6.8rem;overflow-x:clip}.christianity-player-rack{grid-template-columns:minmax(3.6rem,1fr) minmax(4.8rem,5.6rem) minmax(3.6rem,1fr)}.christianity-shared-zone{grid-template-columns:repeat(3,minmax(3.7rem,1fr))}.christianity-card-preview-card{width:clamp(4.2rem,20vw,5.7rem);min-height:clamp(5.8rem,26vw,7.4rem)}.christianity-floating-card{right:.5rem;bottom:4.8rem}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChristianityGameComponent, decorators: [{
             type: Component,
@@ -68267,118 +68433,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </section>
 
+      <section class="christianity-hand-fan christianity-hand-fan--opponent" [attr.aria-label]="t('christianityOpponentHand')">
+        @for (_ of hiddenHandCards(opponentHandCount()); track $index) {
+          <button
+            type="button"
+            class="christianity-card-preview-card christianity-card-preview-card--back"
+            [style.transform]="fanTransform($index, opponentHandCount(), true)"
+            [attr.aria-label]="t('christianityHiddenCard')"
+          ></button>
+        }
+      </section>
+
       <section class="christianity-table" [attr.aria-label]="t('christianityTable')">
-        <section class="christianity-player christianity-player--opponent">
-          <div class="christianity-player__summary">
-            <div class="christianity-leader">
-              <span>{{ opponent().leaderName }}</span>
-              <strong>{{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</strong>
-            </div>
-            <div class="christianity-offerings">
-              <span>{{ t('christianityOfferings') }}</span>
-              <strong>{{ opponent().offeringPoints }}/{{ opponent().maxOfferings }}</strong>
-              <div class="christianity-offering-cards" aria-hidden="true">
-                @for (_ of offeringCards(opponent()); track $index) {
-                  <i [class.is-used]="$index >= opponent().offeringPoints"></i>
-                }
-              </div>
-            </div>
-            <div class="christianity-hidden-hand">
-              <span>{{ t('christianityHand') }}</span>
-              <strong>{{ opponentHandCount() }}</strong>
-            </div>
-          </div>
-          <div class="christianity-battle-zone" [attr.aria-label]="t('christianityOpponentBattle')">
-            @for (slot of battleSlots('P2'); track slot.trackId) {
-              @if (slot.card) {
-                <button
-                  type="button"
-                  class="christianity-card christianity-card--battle"
-                  [class.is-target]="selectedAttacker()"
-                  (click)="attackCharacter(slot.card)"
-                >
-                  <span>{{ slot.card.name }}</span>
-                  <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
-                </button>
-              } @else {
-                <span class="christianity-slot"></span>
-              }
+        <section class="christianity-player-rack christianity-player-rack--opponent">
+          <div class="christianity-offerings-zone">
+            @for (offering of opponent().offerings; track offering.instanceId) {
+              <button
+                type="button"
+                class="christianity-card-mini christianity-card-mini--offering"
+                [class.is-exhausted]="!offering.ready"
+                (click)="inspectOffering(offering)"
+              >
+                <span>{{ t('christianityOfferingCard') }}</span>
+                <strong>+{{ offering.value }}</strong>
+              </button>
             }
           </div>
+          <button type="button" class="christianity-leader-card" [class.is-target]="selectedAttacker() && !hasOpponentGuards()" (click)="handleOpponentLeader()">
+            <span>{{ opponent().leaderName }}</span>
+            <strong>{{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</strong>
+          </button>
+        </section>
+
+        <section class="christianity-battle-zone christianity-battle-zone--opponent" [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"
+                [class.is-target]="selectedAttacker()"
+                (click)="handleOpponentCharacter(slot.card)"
+              >
+                <span>{{ slot.card.name }}</span>
+                <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
+              </button>
+            } @else {
+              <span class="christianity-slot"></span>
+            }
+          }
         </section>
 
         <section class="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
-          <button type="button" class="christianity-pile" (click)="showHistory.set(!showHistory())">
+          <button type="button" class="christianity-zone-card" (click)="showHistory.set(!showHistory())">
             <span>{{ t('christianityHistory') }}</span>
             <strong>{{ game().historyZone.length }}</strong>
           </button>
-          <div class="christianity-deck" aria-live="polite">
+          <div class="christianity-zone-card" aria-live="polite">
             <span>{{ t('christianityDeck') }}</span>
             <strong>{{ game().sharedDeckCount }}</strong>
           </div>
-          <div class="christianity-place">
+          <div class="christianity-zone-card">
             <span>{{ t('christianityPlace') }}</span>
             <strong>{{ t('christianityEmpty') }}</strong>
           </div>
         </section>
 
-        <section class="christianity-player">
-          <div class="christianity-battle-zone" [attr.aria-label]="t('christianityYourBattle')">
-            @for (slot of battleSlots('P1'); track slot.trackId) {
-              @if (slot.card) {
-                <button
-                  type="button"
-                  class="christianity-card christianity-card--battle"
-                  [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
-                  [class.is-exhausted]="!slot.card.canAttack"
-                  (click)="selectAttacker(slot.card)"
-                >
-                  <span>{{ slot.card.name }}</span>
-                  <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
-                </button>
-              } @else {
-                <span class="christianity-slot"></span>
-              }
+        <section class="christianity-battle-zone" [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"
+                [class.is-selected]="selectedAttacker()?.instanceId === slot.card.instanceId"
+                [class.is-exhausted]="!slot.card.canAttack"
+                (click)="selectAttacker(slot.card)"
+              >
+                <span>{{ slot.card.name }}</span>
+                <strong>{{ slot.card.attack }} / {{ slot.card.currentHp }}</strong>
+              </button>
+            } @else {
+              <span class="christianity-slot"></span>
+            }
+          }
+        </section>
+
+        <section class="christianity-player-rack">
+          <div class="christianity-offerings-zone">
+            @for (offering of player().offerings; track offering.instanceId) {
+              <button
+                type="button"
+                class="christianity-card-mini christianity-card-mini--offering"
+                [class.is-exhausted]="!offering.ready"
+                (click)="inspectOffering(offering)"
+              >
+                <span>{{ t('christianityOfferingCard') }}</span>
+                <strong>+{{ offering.value }}</strong>
+              </button>
             }
           </div>
-          <div class="christianity-player__summary">
-            <div class="christianity-offerings">
-              <span>{{ t('christianityOfferings') }}</span>
-              <strong>{{ player().offeringPoints }}/{{ player().maxOfferings }}</strong>
-              <div class="christianity-offering-cards" aria-hidden="true">
-                @for (_ of offeringCards(player()); track $index) {
-                  <i [class.is-used]="$index >= player().offeringPoints"></i>
-                }
-              </div>
-            </div>
-            <button type="button" class="christianity-leader christianity-leader--target" (click)="attackLeader()">
-              <span>{{ player().leaderName }}</span>
-              <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
-            </button>
-            <button type="button" class="christianity-end-turn" (click)="endTurn()">
-              {{ t('christianityEndTurn') }}
-            </button>
-          </div>
+          <button type="button" class="christianity-leader-card" (click)="inspectLeader('P1')">
+            <span>{{ player().leaderName }}</span>
+            <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
+          </button>
+          <button type="button" class="christianity-end-turn" (click)="endTurn()">
+            {{ t('christianityEndTurn') }}
+          </button>
         </section>
       </section>
 
-      <section class="christianity-hand" [attr.aria-label]="t('christianityYourHand')">
+      <section class="christianity-hand-fan" [attr.aria-label]="t('christianityYourHand')">
         @for (cardId of player().hand ?? []; track cardId + $index) {
           @let card = cardDefinition(cardId);
           <button
             type="button"
-            class="christianity-card christianity-card--hand"
+            class="christianity-card-preview-card christianity-card-preview-card--hand"
             [class.is-selected]="selectedHandCard() === cardId"
             [class.is-disabled]="!canPlay(card)"
+            [style.transform]="fanTransform($index, player().hand?.length ?? 0, false)"
             (click)="selectHandCard(cardId)"
           >
-            <small>{{ t('christianityCost') }} {{ card.cost }}</small>
+            <small>
+              @if (card.type === 'offering') {
+                {{ t('christianityOfferingCard') }}
+              } @else {
+                {{ t('christianityCost') }} {{ card.cost }}
+              }
+            </small>
             <span>{{ card.name }}</span>
-            <strong>{{ card.attack }} / {{ card.life }}</strong>
+            <strong>
+              @if (card.type === 'offering') {
+                +{{ card.life }}
+              } @else {
+                {{ card.attack }} / {{ card.life }}
+              }
+            </strong>
           </button>
         }
       </section>
 
+      @if (selectedPreview()) {
+        <aside class="christianity-floating-card" aria-live="polite">
+          <small>{{ selectedPreview()?.eyebrow }}</small>
+          <strong>{{ selectedPreview()?.title }}</strong>
+          <span>{{ selectedPreview()?.meta }}</span>
+          <p>{{ selectedPreview()?.body }}</p>
+        </aside>
+      }
+
       <section class="christianity-actions" aria-live="polite">
         <p>{{ statusText() }}</p>
         <div>
@@ -68402,7 +68603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </section>
       }
     </main>
-  `, styles: [":host{display:block;color:var(--val-text-color, #1f2933)}.christianity-shell{display:grid;gap:.875rem;padding:.75rem .25rem;border:1px solid rgba(36,48,68,.12);border-radius:.75rem;background:#f6f8fb}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-header h1,.christianity-header p,.christianity-history h2,.christianity-actions p{margin:0}.christianity-header h1{font-size:1.35rem;line-height:1.1}.christianity-header p,.christianity-turn span,.christianity-offerings span,.christianity-hidden-hand span,.christianity-deck span,.christianity-place span,.christianity-pile span,.christianity-leader span{color:#1f2933a3;font-size:.75rem}.christianity-turn,.christianity-leader,.christianity-offerings,.christianity-hidden-hand,.christianity-pile,.christianity-deck,.christianity-place{display:grid;gap:.15rem;min-width:5.25rem;padding:.55rem .65rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#fff}.christianity-turn.is-own-turn{border-color:#12806c59;background:#ecfdf5}.christianity-table{display:grid;gap:.75rem;padding:.55rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player{display:grid;gap:.65rem}.christianity-battle-zone{display:grid;grid-template-columns:repeat(5,minmax(4.2rem,1fr));gap:.5rem;min-height:7rem;padding:.55rem .4rem;border-radius:.75rem;background:#ffffffc2}.christianity-shared-zone{padding:.55rem .4rem;border-radius:.75rem;background:#ffffffe6}.christianity-card,.christianity-end-turn,.christianity-actions button,.christianity-pile,.christianity-leader--target{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card{display:grid;align-content:space-between;min-height:5.8rem;padding:.5rem;text-align:left;box-shadow:0 .5rem 1.25rem #24304414}.christianity-card span{font-weight:700}.christianity-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-card.is-selected{border-color:#2563eb;box-shadow:0 0 0 .2rem #2563eb29}.christianity-card.is-disabled,.christianity-card.is-exhausted{opacity:.55}.christianity-card.is-target{border-color:#dc2626}.christianity-offering-cards{display:grid;grid-auto-flow:column;grid-auto-columns:.7rem;gap:.16rem;align-items:end;min-height:1.05rem}.christianity-offering-cards i{display:block;width:.65rem;height:.95rem;border:1px solid rgba(16,42,67,.22);border-radius:.18rem;background:#f8fafc}.christianity-offering-cards i.is-used{background:#cbd5e1;transform:rotate(90deg);transform-origin:center}.christianity-slot{min-height:5.8rem;border:1px dashed rgba(36,48,68,.22);border-radius:.5rem;background:#ffffff73}.christianity-hand{display:grid;grid-auto-columns:minmax(6rem,8rem);grid-auto-flow:column;gap:.55rem;overflow-x:auto;padding-bottom:.25rem}.christianity-actions{align-items:flex-start;padding:.75rem;border-radius:.75rem;background:#fff}.christianity-actions div{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.christianity-actions button,.christianity-end-turn{min-height:2.4rem;padding:0 .75rem;font-weight:700}.christianity-actions button:not(:disabled),.christianity-end-turn{background:#102a43;color:#fff}.christianity-history{padding:.75rem;border-radius:.75rem;background:#fff}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible{outline:.1875rem solid rgba(37,99,235,.24);outline-offset:.125rem}@media (max-width: 720px){.christianity-shell{padding:.55rem 0;border-right:0;border-left:0;border-radius:0}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{align-items:stretch;flex-direction:column}.christianity-battle-zone{grid-template-columns:repeat(5,minmax(3.8rem,1fr));overflow-x:auto}}\n"] }]
+  `, styles: [":host{display:block;color:var(--val-text-color, #1f2933)}.christianity-shell{display:grid;gap:.875rem;padding:.75rem .25rem;border:1px solid rgba(36,48,68,.12);border-radius:.75rem;background:#f6f8fb}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-header h1,.christianity-header p,.christianity-history h2,.christianity-actions p{margin:0}.christianity-header h1{font-size:1.35rem;line-height:1.1}.christianity-header p,.christianity-turn span,.christianity-offerings span,.christianity-hidden-hand span,.christianity-deck span,.christianity-place span,.christianity-pile span,.christianity-leader span{color:#1f2933a3;font-size:.75rem}.christianity-turn,.christianity-leader,.christianity-offerings,.christianity-hidden-hand,.christianity-pile,.christianity-deck,.christianity-place{display:grid;gap:.15rem;min-width:5.25rem;padding:.55rem .65rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#fff}.christianity-turn.is-own-turn{border-color:#12806c59;background:#ecfdf5}.christianity-table{display:grid;gap:.75rem;padding:.55rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player{display:grid;gap:.65rem}.christianity-battle-zone{display:grid;grid-template-columns:repeat(5,minmax(4.2rem,1fr));gap:.5rem;min-height:7rem;padding:.55rem .4rem;border-radius:.75rem;background:#ffffffc2}.christianity-shared-zone{padding:.55rem .4rem;border-radius:.75rem;background:#ffffffe6}.christianity-card,.christianity-end-turn,.christianity-actions button,.christianity-pile,.christianity-leader--target{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card{display:grid;align-content:space-between;min-height:5.8rem;padding:.5rem;text-align:left;box-shadow:0 .5rem 1.25rem #24304414}.christianity-card span{font-weight:700}.christianity-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-card.is-selected{border-color:#2563eb;box-shadow:0 0 0 .2rem #2563eb29}.christianity-card.is-disabled,.christianity-card.is-exhausted{opacity:.55}.christianity-card.is-target{border-color:#dc2626}.christianity-offering-cards{display:grid;grid-auto-flow:column;grid-auto-columns:.7rem;gap:.16rem;align-items:end;min-height:1.05rem}.christianity-offering-cards i{display:block;width:.65rem;height:.95rem;border:1px solid rgba(16,42,67,.22);border-radius:.18rem;background:#f8fafc}.christianity-offering-cards i.is-used{background:#cbd5e1;transform:rotate(90deg);transform-origin:center}.christianity-slot{min-height:5.8rem;border:1px dashed rgba(36,48,68,.22);border-radius:.5rem;background:#ffffff73}.christianity-hand{display:grid;grid-auto-columns:minmax(6rem,8rem);grid-auto-flow:column;gap:.55rem;overflow-x:auto;padding-bottom:.25rem}.christianity-actions{align-items:flex-start;padding:.75rem;border-radius:.75rem;background:#fff}.christianity-actions div{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.christianity-actions button,.christianity-end-turn{min-height:2.4rem;padding:0 .75rem;font-weight:700}.christianity-actions button:not(:disabled),.christianity-end-turn{background:#102a43;color:#fff}.christianity-history{padding:.75rem;border-radius:.75rem;background:#fff}.christianity-hand-fan{position:relative;display:flex;justify-content:center;min-height:7.4rem;padding:0 .25rem;isolation:isolate}.christianity-hand-fan--opponent{min-height:4.7rem;margin-bottom:-1.1rem}.christianity-card-preview-card,.christianity-card-mini,.christianity-leader-card,.christianity-zone-card,.christianity-end-turn{border:1px solid rgba(36,48,68,.16);border-radius:.5rem;background:#fff;color:inherit;font:inherit}.christianity-card-preview-card{display:grid;align-content:space-between;width:clamp(4.9rem,17vw,7.1rem);min-height:clamp(6.6rem,22vw,8.8rem);margin-inline:-.42rem;padding:.48rem;text-align:left;transform-origin:50% 115%;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;box-shadow:0 .5rem 1.25rem #2430441a}.christianity-card-preview-card--hand:hover,.christianity-card-preview-card--hand.is-selected{z-index:3;border-color:#2563eb;box-shadow:0 1rem 2rem #2563eb2e}.christianity-card-preview-card--back{min-height:4.8rem;background:linear-gradient(135deg,#102a431f,#102a4305),repeating-linear-gradient(45deg,#e2e8f0 0 .35rem,#f8fafc .35rem .7rem)}.christianity-card-preview-card--battle{width:100%;min-height:5.7rem;margin-inline:0}.christianity-card-preview-card span,.christianity-card-mini span,.christianity-leader-card span,.christianity-zone-card span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-leader-card strong,.christianity-zone-card strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-player-rack{display:grid;grid-template-columns:minmax(4.2rem,1fr) minmax(5rem,6.5rem) minmax(4.2rem,1fr);gap:.55rem;align-items:end;justify-items:center}.christianity-player-rack--opponent{align-items:start}.christianity-offerings-zone{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:flex-end;width:100%}.christianity-card-mini,.christianity-leader-card,.christianity-zone-card{display:grid;align-content:space-between;min-height:4.9rem;padding:.48rem;text-align:left}.christianity-card-mini{width:3.5rem}.christianity-leader-card{width:min(100%,6.5rem);min-height:5.8rem}.christianity-battle-zone{grid-template-columns:repeat(4,minmax(4rem,1fr))}.christianity-shared-zone{display:grid;grid-template-columns:repeat(3,minmax(4.3rem,1fr));align-items:stretch}.christianity-floating-card{position:fixed;right:max(.75rem,env(safe-area-inset-right));bottom:max(5.8rem,env(safe-area-inset-bottom));z-index:10;display:grid;gap:.28rem;width:min(14rem,calc(100vw - 1.5rem));min-height:10rem;padding:.8rem;border:1px solid rgba(36,48,68,.18);border-radius:.6rem;background:#fffffff5;box-shadow:0 1.25rem 2.5rem #102a432e}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:1.05rem}.christianity-floating-card p{margin:0;font-size:.86rem;line-height:1.35}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible{outline:.1875rem solid rgba(37,99,235,.24);outline-offset:.125rem}@media (max-width: 720px){.christianity-shell{padding:.55rem 0;border-right:0;border-left:0;border-radius:0}.christianity-header,.christianity-player__summary,.christianity-shared-zone,.christianity-actions{align-items:stretch;flex-direction:column}.christianity-battle-zone{grid-template-columns:repeat(4,minmax(3.35rem,1fr));overflow-x:auto}.christianity-hand-fan{min-height:6.8rem;overflow-x:clip}.christianity-player-rack{grid-template-columns:minmax(3.6rem,1fr) minmax(4.8rem,5.6rem) minmax(3.6rem,1fr)}.christianity-shared-zone{grid-template-columns:repeat(3,minmax(3.7rem,1fr))}.christianity-card-preview-card{width:clamp(4.2rem,20vw,5.7rem);min-height:clamp(5.8rem,26vw,7.4rem)}.christianity-floating-card{right:.5rem;bottom:4.8rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 addIcons({ refreshOutline, sparklesOutline, trophyOutline });