valtech-components 4.0.431 → 4.0.433

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.431';
+const VERSION = '4.0.433';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -62466,6 +62466,8 @@ const MINI_GAMES_I18N = {
         christianityYourBattle: 'Tu zona de batalla',
         christianityOpponentHand: 'Mano rival',
         christianitySharedZone: 'Zona compartida',
+        christianityMatch: 'Match',
+        christianityMatchScore: 'Marcador de match',
         christianityHistory: 'Historia',
         christianityDeck: 'Mazo',
         christianityPlace: 'Lugar',
@@ -62490,6 +62492,9 @@ const MINI_GAMES_I18N = {
         christianityOfferingReady: 'Lista',
         christianityOfferingExhausted: 'Agotada',
         christianityOfferingBody: 'Se agota para pagar costes y vuelve a estar lista al comenzar tu turno.',
+        christianityOfferingNoAbility: 'Esta ofrenda no tiene habilidad activable.',
+        christianityUseAbility: 'Usar',
+        christianityCloseOfferings: 'Cerrar ofrendas',
         christianityCharacterBody: 'Entra a batalla y debe esperar un turno para atacar.',
         christianityCharacterReady: 'Listo para atacar.',
         christianityCharacterExhausted: 'No puede atacar todavía.',
@@ -62887,6 +62892,8 @@ const MINI_GAMES_I18N = {
         christianityYourBattle: 'Your battle zone',
         christianityOpponentHand: 'Opponent hand',
         christianitySharedZone: 'Shared zone',
+        christianityMatch: 'Match',
+        christianityMatchScore: 'Match score',
         christianityHistory: 'History',
         christianityDeck: 'Deck',
         christianityPlace: 'Place',
@@ -62911,6 +62918,9 @@ const MINI_GAMES_I18N = {
         christianityOfferingReady: 'Ready',
         christianityOfferingExhausted: 'Exhausted',
         christianityOfferingBody: 'Exhaust it to pay costs. It readies again at the start of your turn.',
+        christianityOfferingNoAbility: 'This offering has no active ability.',
+        christianityUseAbility: 'Use',
+        christianityCloseOfferings: 'Close offerings',
         christianityCharacterBody: 'Enters battle and must wait one turn before attacking.',
         christianityCharacterReady: 'Ready to attack.',
         christianityCharacterExhausted: 'Cannot attack yet.',
@@ -67917,6 +67927,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 const STARTER_CARDS = {
     o_simple: { id: 'o_simple', name: 'Ofrenda simple', type: 'offering', cost: 0, attack: 0, life: 1 },
+    o_forbidden: {
+        id: 'o_forbidden',
+        name: 'El fruto prohibido',
+        type: 'offering',
+        cost: 0,
+        attack: 0,
+        life: 2,
+        abilityName: 'Conocimiento del bien y del mal',
+        abilityText: 'Al usarla, disminuye en 1 los puntos de vida de tu Lider.',
+        abilityCost: 0,
+    },
     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 },
@@ -67926,6 +67947,7 @@ const STARTER_CARDS = {
 const STARTING_SHARED_DECK = [
     'o_simple',
     'p_scout',
+    'o_forbidden',
     'o_simple',
     'p_guard',
     'p_warrior',
@@ -67950,6 +67972,7 @@ const STARTING_GAME = {
     turnOwner: 'P1',
     revision: 0,
     turnCount: 1,
+    matchScore: { P1: 1, P2: 0 },
     sharedDeck: STARTING_SHARED_DECK,
     historyZone: [],
     players: {
@@ -67961,7 +67984,20 @@ const STARTING_GAME = {
             leaderName: 'Adam',
             leaderHp: 15,
             leaderMaxHp: 15,
-            offerings: [{ instanceId: 'p1_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P1', ready: true, value: 1 }],
+            offerings: [
+                { instanceId: 'p1_offering_001', cardId: 'o_simple', name: 'Ofrenda simple', owner: 'P1', ready: true, value: 1 },
+                {
+                    instanceId: 'p1_offering_002',
+                    cardId: 'o_forbidden',
+                    name: 'El fruto prohibido',
+                    owner: 'P1',
+                    ready: true,
+                    value: 2,
+                    abilityName: 'Conocimiento del bien y del mal',
+                    abilityText: 'Al usarla, disminuye en 1 los puntos de vida de tu Lider.',
+                    abilityCost: 0,
+                },
+            ],
             offeringPlayedThisTurn: false,
             hand: ['o_simple', 'p_scout', 'p_warrior', 'p_guard'],
             battleZone: [],
@@ -68001,7 +68037,9 @@ class ChristianityGameComponent {
         this.selectedHandCard = signal(null);
         this.selectedAttacker = signal(null);
         this.selectedPreview = signal(null);
+        this.previewTilt = signal({ rotateX: 5, rotateY: -5, shiftX: 0, shiftY: 0 });
         this.showHistory = signal(false);
+        this.offeringsSeat = signal(null);
         this.player = computed(() => this.game().players.P1);
         this.opponent = computed(() => this.game().players.P2);
         this.currentPlayer = computed(() => this.game().players[this.game().turnOwner]);
@@ -68055,6 +68093,9 @@ class ChristianityGameComponent {
     readyOfferings(player) {
         return player.offerings.reduce((total, offering) => total + (offering.ready ? offering.value : 0), 0);
     }
+    totalOfferings(player) {
+        return player.offerings.reduce((total, offering) => total + offering.value, 0);
+    }
     canPlay(card) {
         if (!this.isOwnTurn())
             return false;
@@ -68093,6 +68134,9 @@ class ChristianityGameComponent {
                     owner: 'P1',
                     ready: true,
                     value: card.life,
+                    abilityName: card.abilityName,
+                    abilityText: card.abilityText,
+                    abilityCost: card.abilityCost,
                 });
                 player.offeringPlayedThisTurn = true;
             }
@@ -68221,9 +68265,33 @@ class ChristianityGameComponent {
         this.selectedAttacker.set(null);
         this.selectedPreview.set(null);
         this.showHistory.set(false);
+        this.offeringsSeat.set(null);
     }
     closePreview() {
         this.selectedPreview.set(null);
+        this.resetPreviewTilt();
+    }
+    openOfferings(seat) {
+        this.selectedPreview.set(null);
+        this.showHistory.set(false);
+        this.offeringsSeat.set(seat);
+    }
+    closeOfferings() {
+        this.offeringsSeat.set(null);
+    }
+    tiltPreview(event) {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const x = (event.clientX - bounds.left) / bounds.width - 0.5;
+        const y = (event.clientY - bounds.top) / bounds.height - 0.5;
+        this.previewTilt.set({
+            rotateX: 5 - y * 18,
+            rotateY: -5 + x * 18,
+            shiftX: x * 10,
+            shiftY: y * 10,
+        });
+    }
+    resetPreviewTilt() {
+        this.previewTilt.set({ rotateX: 5, rotateY: -5, shiftX: 0, shiftY: 0 });
     }
     cleanupDestroyed(player, game) {
         const destroyed = player.battleZone.filter(card => card.currentHp <= 0);
@@ -68246,7 +68314,32 @@ class ChristianityGameComponent {
             title: offering.name,
             eyebrow: this.t('christianityOfferingCard'),
             meta: offering.ready ? this.t('christianityOfferingReady') : this.t('christianityOfferingExhausted'),
-            body: this.t('christianityOfferingBody'),
+            body: offering.abilityText || this.t('christianityOfferingBody'),
+        });
+    }
+    canUseOfferingAbility(offering, seat) {
+        if (seat !== 'P1' || !this.isOwnTurn())
+            return false;
+        if (!offering.ready || !offering.abilityName)
+            return false;
+        return this.readyOfferings(this.game().players[seat]) >= (offering.abilityCost ?? 0);
+    }
+    useOfferingAbility(offering, seat) {
+        if (!this.canUseOfferingAbility(offering, seat))
+            return;
+        this.game.update(game => {
+            const next = structuredClone(game);
+            const player = next.players[seat];
+            const liveOffering = player.offerings.find(card => card.instanceId === offering.instanceId);
+            if (!liveOffering || !liveOffering.ready)
+                return game;
+            const offeringId = liveOffering.instanceId;
+            this.spendOfferings(player, liveOffering.abilityCost ?? 0);
+            player.offerings = player.offerings.map(card => (card.instanceId === offeringId ? { ...card, ready: false } : card));
+            player.leaderHp = Math.max(0, player.leaderHp - 1);
+            next.revision++;
+            next.log = [`${liveOffering.name}: ${liveOffering.abilityName}.`, ...next.log].slice(0, 4);
+            return next;
         });
     }
     inspectDeck() {
@@ -68301,64 +68394,79 @@ class ChristianityGameComponent {
         </div>
       </section>
 
-      <section class="christianity-opponent-hand-area" [attr.aria-label]="t('christianityOpponentHand')">
-        <div class="christianity-player-badge christianity-player-badge--opponent">
-          <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-          <strong>{{ opponent().displayName }}</strong>
-        </div>
-        <div class="christianity-hand-fan christianity-hand-fan--opponent">
-          @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 class="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>{{ player().leaderName }} · {{ 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>{{ opponent().leaderName }} · {{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</small>
+          </div>
+        </article>
       </section>
 
       <section class="christianity-table" [attr.aria-label]="t('christianityTable')">
-        <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>
+        <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" (click)="openOfferings('P2')">
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <span>{{ t('christianityOfferings') }}</span>
+                <strong>{{ readyOfferings(opponent()) }}/{{ totalOfferings(opponent()) }}</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>
-          <div class="christianity-player-badge">
-            <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-            <strong>{{ opponent().displayName }}</strong>
-          </div>
-        </section>
+            </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>
+            <div class="christianity-hand-count">
+              <span>{{ t('christianityHand') }}</span>
+              <strong>{{ opponentHandCount() }}</strong>
+            </div>
+          </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 class="christianity-opponent-hand-area" [attr.aria-label]="t('christianityOpponentHand')">
+            <div class="christianity-hand-fan christianity-hand-fan--opponent">
+              @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>
+              }
+            </div>
+          </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>
 
         <section class="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
@@ -68382,88 +68490,101 @@ class ChristianityGameComponent {
           </div>
         </section>
 
-        <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 class="christianity-player-side">
+          <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>
 
-        <section class="christianity-player-rack">
-          <div class="christianity-offerings-zone">
-            @for (offering of player().offerings; track offering.instanceId) {
+          <section class="christianity-player-rack">
+            <div class="christianity-offerings-zone">
+              <button type="button" class="christianity-offering-pile" (click)="openOfferings('P1')">
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <span>{{ t('christianityOfferings') }}</span>
+                <strong>{{ readyOfferings(player()) }}/{{ totalOfferings(player()) }}</strong>
+              </button>
+            </div>
+            <button type="button" class="christianity-leader-card" (click)="inspectLeader('P1')">
+              <span>{{ player().leaderName }}</span>
+              <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
+            </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>
               <button
                 type="button"
-                class="christianity-card-mini christianity-card-mini--offering"
-                [class.is-exhausted]="!offering.ready"
-                (click)="inspectOffering(offering)"
+                class="christianity-end-turn"
+                (click)="endTurn()"
               >
-                <span>{{ t('christianityOfferingCard') }}</span>
-                <strong>+{{ offering.value }}</strong>
+                {{ 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>
-          <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>
-            <button type="button" class="christianity-end-turn" (click)="endTurn()">
-              {{ t('christianityEndTurn') }}
-            </button>
-          </div>
+          </section>
         </section>
       </section>
 
-      <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-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>
-              @if (card.type === 'offering') {
-                {{ t('christianityOfferingCard') }}
-              } @else {
-                {{ t('christianityCost') }} {{ card.cost }}
-              }
-            </small>
-            <span>{{ card.name }}</span>
-            <strong>
-              @if (card.type === 'offering') {
-                +{{ card.life }}
-              } @else {
-                {{ card.attack }} / {{ card.life }}
-              }
-            </strong>
-          </button>
-        }
+      <section class="christianity-hand-shelf">
+        <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-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>
+                @if (card.type === 'offering') {
+                  {{ t('christianityOfferingCard') }}
+                } @else {
+                  {{ t('christianityCost') }} {{ card.cost }}
+                }
+              </small>
+              <span>{{ card.name }}</span>
+              <strong>
+                @if (card.type === 'offering') {
+                  +{{ card.life }}
+                } @else {
+                  {{ card.attack }} / {{ card.life }}
+                }
+              </strong>
+            </button>
+          }
+        </section>
       </section>
 
       @if (selectedPreview()) {
         <button type="button" class="christianity-preview-backdrop" [attr.aria-label]="t('christianityClosePreview')" (click)="closePreview()"></button>
-        <aside class="christianity-floating-card" aria-live="polite">
+        <aside
+          class="christianity-floating-card"
+          aria-live="polite"
+          [style.--preview-rotate-x]="previewTilt().rotateX + 'deg'"
+          [style.--preview-rotate-y]="previewTilt().rotateY + 'deg'"
+          [style.--preview-shift-x]="previewTilt().shiftX + 'px'"
+          [style.--preview-shift-y]="previewTilt().shiftY + 'px'"
+          (pointermove)="tiltPreview($event)"
+          (pointerleave)="resetPreviewTilt()"
+        >
           <small>{{ selectedPreview()?.eyebrow }}</small>
           <strong>{{ selectedPreview()?.title }}</strong>
           <span>{{ selectedPreview()?.meta }}</span>
@@ -68512,8 +68633,46 @@ class ChristianityGameComponent {
           }
         </section>
       }
+
+      @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">
+          <header>
+            <h2>{{ t('christianityOfferings') }}</h2>
+            <span>{{ readyOfferings(offeringPlayer) }}/{{ totalOfferings(offeringPlayer) }}</span>
+          </header>
+          <div class="christianity-offering-list">
+            @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" (click)="inspectOffering(offering)">
+                  <small>{{ t('christianityOfferingCard') }}</small>
+                  <span>{{ offering.name }}</span>
+                  <strong>+{{ offering.value }}</strong>
+                  @if (offering.abilityName) {
+                    <p>{{ offering.abilityName }}</p>
+                  }
+                </button>
+                <div>
+                  <strong>{{ offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted') }}</strong>
+                  <p>{{ offering.abilityText || t('christianityOfferingNoAbility') }}</p>
+                  @if (offering.abilityName) {
+                    <button
+                      type="button"
+                      [disabled]="!canUseOfferingAbility(offering, offeringsSeat()!)"
+                      (click)="useOfferingAbility(offering, offeringsSeat()!)"
+                    >
+                      {{ t('christianityUseAbility') }}
+                    </button>
+                  }
+                </div>
+              </article>
+            }
+          </div>
+        </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}.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:5.2rem}.christianity-opponent-hand-area{display:grid;gap:.25rem;min-height:6.7rem;align-items:start;padding-bottom:.35rem}.christianity-card-preview-card,.christianity-card-mini,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile,.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,.christianity-zone-pile span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-leader-card strong,.christianity-zone-card strong,.christianity-zone-pile 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-player-badge,.christianity-player-command{display:grid;gap:.35rem;justify-items:center;min-width:0}.christianity-player-badge{align-content:start;color:#1f2933c2;font-size:.74rem}.christianity-player-badge--opponent{justify-self:center;grid-auto-flow:column;align-items:center;justify-content:center}.christianity-player-badge strong{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-avatar{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:999px;color:#fff;font-size:.76rem;font-weight:800;box-shadow:0 .35rem .9rem #102a4329}.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,.christianity-zone-pile{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-zone-pile{position:relative;isolation:isolate;overflow:hidden;min-height:5.6rem;box-shadow:inset 0 0 0 999px #ffffff1f}.christianity-zone-pile i{position:absolute;inset:.62rem .72rem auto auto;z-index:-1;width:2.7rem;height:3.7rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:#f8fafc;box-shadow:0 .35rem .85rem #102a431c;transform:rotate(4deg)}.christianity-zone-pile i:nth-child(2){transform:translate(-.28rem,.12rem) rotate(-3deg)}.christianity-zone-pile i:nth-child(3){background:linear-gradient(135deg,#102a4329,#102a4308),repeating-linear-gradient(45deg,#dbeafe 0 .33rem,#fff .33rem .66rem);transform:translate(-.54rem,.24rem) rotate(2deg)}.christianity-floating-card{position:fixed;top:50%;left:50%;z-index:21;display:grid;gap:.45rem;width:min(20rem,calc(100vw - 2rem));min-height:min(27rem,calc(100vh - 5rem));padding:1rem;border:1px solid rgba(36,48,68,.18);border-radius:.75rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 20% 0%,rgba(37,99,235,.12),transparent 45%);box-shadow:0 2.4rem 5rem #102a4357,inset 0 0 0 .35rem #ffffff8c;transform:translate(-50%,-50%) perspective(48rem) rotateX(5deg) rotateY(-5deg)}.christianity-preview-backdrop,.christianity-history-backdrop{position:fixed;inset:0;z-index:20;border:0;border-radius:0;background:#0f172a75}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:clamp(1.35rem,8vw,2rem);line-height:1.05}.christianity-floating-card p{margin:0;align-self:end;font-size:.95rem;line-height:1.35}.christianity-history-backdrop{z-index:22}.christianity-history-drawer{position:fixed;right:max(.5rem,env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));left:max(.5rem,env(safe-area-inset-left));z-index:23;display:grid;gap:.75rem;max-height:min(27rem,calc(100vh - 4rem));padding:.8rem;border:1px solid rgba(36,48,68,.16);border-radius:.75rem;background:#fffffffa;box-shadow:0 1.5rem 4rem #102a4347}.christianity-history-drawer header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-history-drawer h2,.christianity-history-drawer p{margin:0}.christianity-history-drawer header span{display:grid;place-items:center;min-width:1.85rem;height:1.85rem;border-radius:999px;background:#edf2f7;font-weight:800}.christianity-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.55rem;overflow-y:auto;padding:.1rem .1rem .25rem}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-opponent-hand-area{min-height:6.2rem}}\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-match-strip,.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-match-player strong,.christianity-match-player small,.christianity-scoreboard span,.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-match-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:.45rem;border:1px solid rgba(36,48,68,.1);border-radius:.75rem;background:#fff}.christianity-match-player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:center;min-width:0}.christianity-match-player--opponent{direction:rtl}.christianity-match-player--opponent div{direction:ltr;text-align:right}.christianity-match-player div{display:grid;min-width:0}.christianity-match-player strong,.christianity-match-player small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-match-player small,.christianity-scoreboard span{color:#1f293394;font-size:.72rem}.christianity-scoreboard{display:grid;justify-items:center;min-width:4.2rem;padding:0 .55rem;border-right:1px solid rgba(36,48,68,.1);border-left:1px solid rgba(36,48,68,.1)}.christianity-scoreboard strong{font-size:1.2rem;line-height:1}.christianity-table{display:grid;gap:.45rem;padding:.45rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player-side{display:grid;gap:.35rem;padding:.35rem .3rem;border-radius:.7rem;background:#ffffff57;min-height:0}.christianity-player-side--opponent{grid-template-rows:auto minmax(4.55rem,auto) auto}.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-shelf{display:grid;min-height:8.1rem;padding:.35rem .25rem 0;overflow:hidden}.christianity-hand-fan--opponent{min-height:4.4rem;align-items:start}.christianity-opponent-hand-area{display:grid;min-height:4.55rem;align-items:start;overflow:hidden}.christianity-card-preview-card,.christianity-card-mini,.christianity-offering-pile,.christianity-offering-card,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile,.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{width:clamp(4rem,14vw,5.7rem);min-height:clamp(5rem,16vw,6.6rem);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-offering-pile span,.christianity-offering-card span,.christianity-leader-card span,.christianity-zone-card span,.christianity-zone-pile span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-offering-pile strong,.christianity-offering-card strong,.christianity-leader-card strong,.christianity-zone-card strong,.christianity-zone-pile strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-player-rack{display:grid;grid-template-columns:minmax(5.9rem,7rem) minmax(5rem,1fr) minmax(4.2rem,7rem);gap:.45rem;align-items:end;justify-items:stretch}.christianity-player-rack--opponent{align-items:start}.christianity-hand-count{display:grid;align-content:center;justify-items:center;width:100%;min-height:3.4rem;padding:.35rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#ffffffad}.christianity-hand-count span{color:#1f293394;font-size:.72rem}.christianity-hand-count strong{font-size:1.05rem}.christianity-player-badge,.christianity-player-command{display:grid;gap:.35rem;justify-items:center;min-width:0}.christianity-player-badge{align-content:start;color:#1f2933c2;font-size:.74rem}.christianity-player-badge--opponent{justify-self:center;grid-auto-flow:column;align-items:center;justify-content:center}.christianity-player-badge strong{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-avatar{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:999px;color:#fff;font-size:.76rem;font-weight:800;box-shadow:0 .35rem .9rem #102a4329}.christianity-offerings-zone{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:flex-start;justify-self:start;width:100%}.christianity-card-mini,.christianity-offering-pile,.christianity-offering-card,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile{display:grid;align-content:space-between;min-height:4.9rem;padding:.48rem;text-align:left}.christianity-card-mini{width:3.5rem}.christianity-offering-pile{position:relative;isolation:isolate;overflow:hidden;justify-self:start;width:min(100%,5.9rem);min-height:5.8rem;background:linear-gradient(180deg,#fff,#f8fafc),linear-gradient(135deg,rgba(250,204,21,.18),transparent 42%)}.christianity-offering-pile i{position:absolute;inset:.6rem auto auto .7rem;z-index:-1;width:2.55rem;height:3.55rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:linear-gradient(180deg,#ffffffeb,#f1f5f9eb),radial-gradient(circle at 78% 18%,#facc15 0 .38rem,transparent .4rem);box-shadow:0 .35rem .85rem #102a431a;transform:rotate(-5deg)}.christianity-offering-pile i:nth-child(2){transform:translate(.28rem,.08rem) rotate(3deg)}.christianity-offering-pile i:nth-child(3){transform:translate(.55rem,.18rem) rotate(-1deg)}.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-zone-pile{position:relative;isolation:isolate;overflow:hidden;min-height:5.6rem;box-shadow:inset 0 0 0 999px #ffffff1f}.christianity-zone-pile i{position:absolute;inset:.62rem .72rem auto auto;z-index:-1;width:2.7rem;height:3.7rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:#f8fafc;box-shadow:0 .35rem .85rem #102a431c;transform:rotate(4deg)}.christianity-zone-pile i:nth-child(2){transform:translate(-.28rem,.12rem) rotate(-3deg)}.christianity-zone-pile i:nth-child(3){background:linear-gradient(135deg,#102a4329,#102a4308),repeating-linear-gradient(45deg,#dbeafe 0 .33rem,#fff .33rem .66rem);transform:translate(-.54rem,.24rem) rotate(2deg)}.christianity-floating-card{position:fixed;top:50%;left:50%;z-index:21;display:grid;gap:.45rem;width:min(20rem,calc(100vw - 2rem));min-height:min(27rem,calc(100vh - 5rem));padding:1rem;border:1px solid rgba(36,48,68,.18);border-radius:.75rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 20% 0%,rgba(37,99,235,.12),transparent 45%);box-shadow:0 2.4rem 5rem #102a4357,inset 0 0 0 .35rem #ffffff8c;touch-action:none;transform:translate(calc(-50% + var(--preview-shift-x, 0px)),calc(-50% + var(--preview-shift-y, 0px))) perspective(48rem) rotateX(var(--preview-rotate-x, 5deg)) rotateY(var(--preview-rotate-y, -5deg));transition:transform 90ms ease-out}.christianity-preview-backdrop,.christianity-history-backdrop{position:fixed;inset:0;z-index:20;border:0;border-radius:0;background:#0f172a75}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:clamp(1.35rem,8vw,2rem);line-height:1.05}.christianity-floating-card p{margin:0;align-self:end;font-size:.95rem;line-height:1.35}.christianity-history-backdrop{z-index:22}.christianity-history-drawer{position:fixed;right:max(.5rem,env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));left:max(.5rem,env(safe-area-inset-left));z-index:23;display:grid;gap:.75rem;max-height:min(27rem,calc(100vh - 4rem));padding:.8rem;border:1px solid rgba(36,48,68,.16);border-radius:.75rem;background:#fffffffa;box-shadow:0 1.5rem 4rem #102a4347}.christianity-history-drawer header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-history-drawer h2,.christianity-history-drawer p{margin:0}.christianity-history-drawer header span{display:grid;place-items:center;min-width:1.85rem;height:1.85rem;border-radius:999px;background:#edf2f7;font-weight:800}.christianity-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.55rem;overflow-y:auto;padding:.1rem .1rem .25rem}.christianity-offerings-drawer{max-height:min(30rem,calc(100vh - 3rem))}.christianity-offering-list{display:grid;gap:.6rem;overflow-y:auto;padding:.1rem}.christianity-offering-row{display:grid;grid-template-columns:minmax(4.9rem,6.2rem) minmax(0,1fr);gap:.65rem;align-items:stretch;padding:.45rem;border:1px solid rgba(36,48,68,.12);border-radius:.65rem;background:#fff}.christianity-offering-row.is-exhausted{opacity:.68}.christianity-offering-card{min-height:7.4rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 82% 14%,#facc15 0 .48rem,transparent .5rem);box-shadow:0 .45rem 1rem #102a431a}.christianity-offering-card small{color:#1f293394;font-size:.66rem;text-transform:uppercase}.christianity-offering-card p,.christianity-offering-row p{margin:0}.christianity-offering-card p{align-self:end;color:#1f2933a3;font-size:.72rem;line-height:1.2}.christianity-offering-row>div{display:grid;gap:.35rem;align-content:center;min-width:0}.christianity-offering-row>div p{color:#1f2933b8;font-size:.85rem;line-height:1.3}.christianity-offering-row>div button{justify-self:start;min-height:2.2rem;padding:0 .7rem;border:1px solid rgba(16,42,67,.16);border-radius:.5rem;background:#102a43;color:#fff;font:inherit;font-weight:800}.christianity-offering-row>div button:disabled{background:#e2e8f0;color:#1f293394}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-match-strip{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.35rem;padding:.35rem}.christianity-match-player{gap:.35rem}.christianity-match-player small{display:none}.christianity-scoreboard{min-width:3.65rem;padding:0 .35rem}.christianity-scoreboard strong{font-size:1.05rem}.christianity-table{gap:.35rem}.christianity-player-side{padding:.3rem .25rem}.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-hand-shelf{min-height:7.4rem;padding-top:.25rem}.christianity-player-rack{grid-template-columns:minmax(4.7rem,5.9rem) minmax(4.8rem,1fr) minmax(3.7rem,5rem)}.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-offering-row{grid-template-columns:minmax(4.5rem,5.5rem) minmax(0,1fr);gap:.5rem}.christianity-opponent-hand-area{min-height:4.15rem}.christianity-hand-fan--opponent{min-height:4rem}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChristianityGameComponent, decorators: [{
             type: Component,
@@ -68530,64 +68689,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </section>
 
-      <section class="christianity-opponent-hand-area" [attr.aria-label]="t('christianityOpponentHand')">
-        <div class="christianity-player-badge christianity-player-badge--opponent">
-          <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-          <strong>{{ opponent().displayName }}</strong>
-        </div>
-        <div class="christianity-hand-fan christianity-hand-fan--opponent">
-          @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 class="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>{{ player().leaderName }} · {{ 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>{{ opponent().leaderName }} · {{ opponent().leaderHp }}/{{ opponent().leaderMaxHp }}</small>
+          </div>
+        </article>
       </section>
 
       <section class="christianity-table" [attr.aria-label]="t('christianityTable')">
-        <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>
+        <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" (click)="openOfferings('P2')">
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <span>{{ t('christianityOfferings') }}</span>
+                <strong>{{ readyOfferings(opponent()) }}/{{ totalOfferings(opponent()) }}</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>
-          <div class="christianity-player-badge">
-            <span class="christianity-avatar" [style.background]="opponent().avatarColor">{{ opponent().avatar }}</span>
-            <strong>{{ opponent().displayName }}</strong>
-          </div>
-        </section>
+            </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>
+            <div class="christianity-hand-count">
+              <span>{{ t('christianityHand') }}</span>
+              <strong>{{ opponentHandCount() }}</strong>
+            </div>
+          </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 class="christianity-opponent-hand-area" [attr.aria-label]="t('christianityOpponentHand')">
+            <div class="christianity-hand-fan christianity-hand-fan--opponent">
+              @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>
+              }
+            </div>
+          </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>
 
         <section class="christianity-shared-zone" [attr.aria-label]="t('christianitySharedZone')">
@@ -68611,88 +68785,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         </section>
 
-        <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 class="christianity-player-side">
+          <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>
 
-        <section class="christianity-player-rack">
-          <div class="christianity-offerings-zone">
-            @for (offering of player().offerings; track offering.instanceId) {
+          <section class="christianity-player-rack">
+            <div class="christianity-offerings-zone">
+              <button type="button" class="christianity-offering-pile" (click)="openOfferings('P1')">
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <i aria-hidden="true"></i>
+                <span>{{ t('christianityOfferings') }}</span>
+                <strong>{{ readyOfferings(player()) }}/{{ totalOfferings(player()) }}</strong>
+              </button>
+            </div>
+            <button type="button" class="christianity-leader-card" (click)="inspectLeader('P1')">
+              <span>{{ player().leaderName }}</span>
+              <strong>{{ player().leaderHp }}/{{ player().leaderMaxHp }}</strong>
+            </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>
               <button
                 type="button"
-                class="christianity-card-mini christianity-card-mini--offering"
-                [class.is-exhausted]="!offering.ready"
-                (click)="inspectOffering(offering)"
+                class="christianity-end-turn"
+                (click)="endTurn()"
               >
-                <span>{{ t('christianityOfferingCard') }}</span>
-                <strong>+{{ offering.value }}</strong>
+                {{ 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>
-          <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>
-            <button type="button" class="christianity-end-turn" (click)="endTurn()">
-              {{ t('christianityEndTurn') }}
-            </button>
-          </div>
+          </section>
         </section>
       </section>
 
-      <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-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>
-              @if (card.type === 'offering') {
-                {{ t('christianityOfferingCard') }}
-              } @else {
-                {{ t('christianityCost') }} {{ card.cost }}
-              }
-            </small>
-            <span>{{ card.name }}</span>
-            <strong>
-              @if (card.type === 'offering') {
-                +{{ card.life }}
-              } @else {
-                {{ card.attack }} / {{ card.life }}
-              }
-            </strong>
-          </button>
-        }
+      <section class="christianity-hand-shelf">
+        <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-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>
+                @if (card.type === 'offering') {
+                  {{ t('christianityOfferingCard') }}
+                } @else {
+                  {{ t('christianityCost') }} {{ card.cost }}
+                }
+              </small>
+              <span>{{ card.name }}</span>
+              <strong>
+                @if (card.type === 'offering') {
+                  +{{ card.life }}
+                } @else {
+                  {{ card.attack }} / {{ card.life }}
+                }
+              </strong>
+            </button>
+          }
+        </section>
       </section>
 
       @if (selectedPreview()) {
         <button type="button" class="christianity-preview-backdrop" [attr.aria-label]="t('christianityClosePreview')" (click)="closePreview()"></button>
-        <aside class="christianity-floating-card" aria-live="polite">
+        <aside
+          class="christianity-floating-card"
+          aria-live="polite"
+          [style.--preview-rotate-x]="previewTilt().rotateX + 'deg'"
+          [style.--preview-rotate-y]="previewTilt().rotateY + 'deg'"
+          [style.--preview-shift-x]="previewTilt().shiftX + 'px'"
+          [style.--preview-shift-y]="previewTilt().shiftY + 'px'"
+          (pointermove)="tiltPreview($event)"
+          (pointerleave)="resetPreviewTilt()"
+        >
           <small>{{ selectedPreview()?.eyebrow }}</small>
           <strong>{{ selectedPreview()?.title }}</strong>
           <span>{{ selectedPreview()?.meta }}</span>
@@ -68741,8 +68928,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
         </section>
       }
+
+      @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">
+          <header>
+            <h2>{{ t('christianityOfferings') }}</h2>
+            <span>{{ readyOfferings(offeringPlayer) }}/{{ totalOfferings(offeringPlayer) }}</span>
+          </header>
+          <div class="christianity-offering-list">
+            @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" (click)="inspectOffering(offering)">
+                  <small>{{ t('christianityOfferingCard') }}</small>
+                  <span>{{ offering.name }}</span>
+                  <strong>+{{ offering.value }}</strong>
+                  @if (offering.abilityName) {
+                    <p>{{ offering.abilityName }}</p>
+                  }
+                </button>
+                <div>
+                  <strong>{{ offering.ready ? t('christianityOfferingReady') : t('christianityOfferingExhausted') }}</strong>
+                  <p>{{ offering.abilityText || t('christianityOfferingNoAbility') }}</p>
+                  @if (offering.abilityName) {
+                    <button
+                      type="button"
+                      [disabled]="!canUseOfferingAbility(offering, offeringsSeat()!)"
+                      (click)="useOfferingAbility(offering, offeringsSeat()!)"
+                    >
+                      {{ t('christianityUseAbility') }}
+                    </button>
+                  }
+                </div>
+              </article>
+            }
+          </div>
+        </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}.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:5.2rem}.christianity-opponent-hand-area{display:grid;gap:.25rem;min-height:6.7rem;align-items:start;padding-bottom:.35rem}.christianity-card-preview-card,.christianity-card-mini,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile,.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,.christianity-zone-pile span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-leader-card strong,.christianity-zone-card strong,.christianity-zone-pile 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-player-badge,.christianity-player-command{display:grid;gap:.35rem;justify-items:center;min-width:0}.christianity-player-badge{align-content:start;color:#1f2933c2;font-size:.74rem}.christianity-player-badge--opponent{justify-self:center;grid-auto-flow:column;align-items:center;justify-content:center}.christianity-player-badge strong{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-avatar{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:999px;color:#fff;font-size:.76rem;font-weight:800;box-shadow:0 .35rem .9rem #102a4329}.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,.christianity-zone-pile{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-zone-pile{position:relative;isolation:isolate;overflow:hidden;min-height:5.6rem;box-shadow:inset 0 0 0 999px #ffffff1f}.christianity-zone-pile i{position:absolute;inset:.62rem .72rem auto auto;z-index:-1;width:2.7rem;height:3.7rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:#f8fafc;box-shadow:0 .35rem .85rem #102a431c;transform:rotate(4deg)}.christianity-zone-pile i:nth-child(2){transform:translate(-.28rem,.12rem) rotate(-3deg)}.christianity-zone-pile i:nth-child(3){background:linear-gradient(135deg,#102a4329,#102a4308),repeating-linear-gradient(45deg,#dbeafe 0 .33rem,#fff .33rem .66rem);transform:translate(-.54rem,.24rem) rotate(2deg)}.christianity-floating-card{position:fixed;top:50%;left:50%;z-index:21;display:grid;gap:.45rem;width:min(20rem,calc(100vw - 2rem));min-height:min(27rem,calc(100vh - 5rem));padding:1rem;border:1px solid rgba(36,48,68,.18);border-radius:.75rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 20% 0%,rgba(37,99,235,.12),transparent 45%);box-shadow:0 2.4rem 5rem #102a4357,inset 0 0 0 .35rem #ffffff8c;transform:translate(-50%,-50%) perspective(48rem) rotateX(5deg) rotateY(-5deg)}.christianity-preview-backdrop,.christianity-history-backdrop{position:fixed;inset:0;z-index:20;border:0;border-radius:0;background:#0f172a75}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:clamp(1.35rem,8vw,2rem);line-height:1.05}.christianity-floating-card p{margin:0;align-self:end;font-size:.95rem;line-height:1.35}.christianity-history-backdrop{z-index:22}.christianity-history-drawer{position:fixed;right:max(.5rem,env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));left:max(.5rem,env(safe-area-inset-left));z-index:23;display:grid;gap:.75rem;max-height:min(27rem,calc(100vh - 4rem));padding:.8rem;border:1px solid rgba(36,48,68,.16);border-radius:.75rem;background:#fffffffa;box-shadow:0 1.5rem 4rem #102a4347}.christianity-history-drawer header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-history-drawer h2,.christianity-history-drawer p{margin:0}.christianity-history-drawer header span{display:grid;place-items:center;min-width:1.85rem;height:1.85rem;border-radius:999px;background:#edf2f7;font-weight:800}.christianity-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.55rem;overflow-y:auto;padding:.1rem .1rem .25rem}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-opponent-hand-area{min-height:6.2rem}}\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-match-strip,.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-match-player strong,.christianity-match-player small,.christianity-scoreboard span,.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-match-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:.45rem;border:1px solid rgba(36,48,68,.1);border-radius:.75rem;background:#fff}.christianity-match-player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:center;min-width:0}.christianity-match-player--opponent{direction:rtl}.christianity-match-player--opponent div{direction:ltr;text-align:right}.christianity-match-player div{display:grid;min-width:0}.christianity-match-player strong,.christianity-match-player small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-match-player small,.christianity-scoreboard span{color:#1f293394;font-size:.72rem}.christianity-scoreboard{display:grid;justify-items:center;min-width:4.2rem;padding:0 .55rem;border-right:1px solid rgba(36,48,68,.1);border-left:1px solid rgba(36,48,68,.1)}.christianity-scoreboard strong{font-size:1.2rem;line-height:1}.christianity-table{display:grid;gap:.45rem;padding:.45rem .35rem;border-radius:.75rem;background:#dceafb}.christianity-player-side{display:grid;gap:.35rem;padding:.35rem .3rem;border-radius:.7rem;background:#ffffff57;min-height:0}.christianity-player-side--opponent{grid-template-rows:auto minmax(4.55rem,auto) auto}.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-shelf{display:grid;min-height:8.1rem;padding:.35rem .25rem 0;overflow:hidden}.christianity-hand-fan--opponent{min-height:4.4rem;align-items:start}.christianity-opponent-hand-area{display:grid;min-height:4.55rem;align-items:start;overflow:hidden}.christianity-card-preview-card,.christianity-card-mini,.christianity-offering-pile,.christianity-offering-card,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile,.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{width:clamp(4rem,14vw,5.7rem);min-height:clamp(5rem,16vw,6.6rem);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-offering-pile span,.christianity-offering-card span,.christianity-leader-card span,.christianity-zone-card span,.christianity-zone-pile span{font-weight:700}.christianity-card-preview-card strong,.christianity-card-mini strong,.christianity-offering-pile strong,.christianity-offering-card strong,.christianity-leader-card strong,.christianity-zone-card strong,.christianity-zone-pile strong{justify-self:end;padding:.15rem .35rem;border-radius:999px;background:#edf2f7;font-size:.8rem}.christianity-player-rack{display:grid;grid-template-columns:minmax(5.9rem,7rem) minmax(5rem,1fr) minmax(4.2rem,7rem);gap:.45rem;align-items:end;justify-items:stretch}.christianity-player-rack--opponent{align-items:start}.christianity-hand-count{display:grid;align-content:center;justify-items:center;width:100%;min-height:3.4rem;padding:.35rem;border:1px solid rgba(36,48,68,.12);border-radius:.5rem;background:#ffffffad}.christianity-hand-count span{color:#1f293394;font-size:.72rem}.christianity-hand-count strong{font-size:1.05rem}.christianity-player-badge,.christianity-player-command{display:grid;gap:.35rem;justify-items:center;min-width:0}.christianity-player-badge{align-content:start;color:#1f2933c2;font-size:.74rem}.christianity-player-badge--opponent{justify-self:center;grid-auto-flow:column;align-items:center;justify-content:center}.christianity-player-badge strong{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.christianity-avatar{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:999px;color:#fff;font-size:.76rem;font-weight:800;box-shadow:0 .35rem .9rem #102a4329}.christianity-offerings-zone{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:flex-start;justify-self:start;width:100%}.christianity-card-mini,.christianity-offering-pile,.christianity-offering-card,.christianity-leader-card,.christianity-zone-card,.christianity-zone-pile{display:grid;align-content:space-between;min-height:4.9rem;padding:.48rem;text-align:left}.christianity-card-mini{width:3.5rem}.christianity-offering-pile{position:relative;isolation:isolate;overflow:hidden;justify-self:start;width:min(100%,5.9rem);min-height:5.8rem;background:linear-gradient(180deg,#fff,#f8fafc),linear-gradient(135deg,rgba(250,204,21,.18),transparent 42%)}.christianity-offering-pile i{position:absolute;inset:.6rem auto auto .7rem;z-index:-1;width:2.55rem;height:3.55rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:linear-gradient(180deg,#ffffffeb,#f1f5f9eb),radial-gradient(circle at 78% 18%,#facc15 0 .38rem,transparent .4rem);box-shadow:0 .35rem .85rem #102a431a;transform:rotate(-5deg)}.christianity-offering-pile i:nth-child(2){transform:translate(.28rem,.08rem) rotate(3deg)}.christianity-offering-pile i:nth-child(3){transform:translate(.55rem,.18rem) rotate(-1deg)}.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-zone-pile{position:relative;isolation:isolate;overflow:hidden;min-height:5.6rem;box-shadow:inset 0 0 0 999px #ffffff1f}.christianity-zone-pile i{position:absolute;inset:.62rem .72rem auto auto;z-index:-1;width:2.7rem;height:3.7rem;border:1px solid rgba(16,42,67,.18);border-radius:.35rem;background:#f8fafc;box-shadow:0 .35rem .85rem #102a431c;transform:rotate(4deg)}.christianity-zone-pile i:nth-child(2){transform:translate(-.28rem,.12rem) rotate(-3deg)}.christianity-zone-pile i:nth-child(3){background:linear-gradient(135deg,#102a4329,#102a4308),repeating-linear-gradient(45deg,#dbeafe 0 .33rem,#fff .33rem .66rem);transform:translate(-.54rem,.24rem) rotate(2deg)}.christianity-floating-card{position:fixed;top:50%;left:50%;z-index:21;display:grid;gap:.45rem;width:min(20rem,calc(100vw - 2rem));min-height:min(27rem,calc(100vh - 5rem));padding:1rem;border:1px solid rgba(36,48,68,.18);border-radius:.75rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 20% 0%,rgba(37,99,235,.12),transparent 45%);box-shadow:0 2.4rem 5rem #102a4357,inset 0 0 0 .35rem #ffffff8c;touch-action:none;transform:translate(calc(-50% + var(--preview-shift-x, 0px)),calc(-50% + var(--preview-shift-y, 0px))) perspective(48rem) rotateX(var(--preview-rotate-x, 5deg)) rotateY(var(--preview-rotate-y, -5deg));transition:transform 90ms ease-out}.christianity-preview-backdrop,.christianity-history-backdrop{position:fixed;inset:0;z-index:20;border:0;border-radius:0;background:#0f172a75}.christianity-floating-card small,.christianity-floating-card span{color:#1f2933a3}.christianity-floating-card strong{font-size:clamp(1.35rem,8vw,2rem);line-height:1.05}.christianity-floating-card p{margin:0;align-self:end;font-size:.95rem;line-height:1.35}.christianity-history-backdrop{z-index:22}.christianity-history-drawer{position:fixed;right:max(.5rem,env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));left:max(.5rem,env(safe-area-inset-left));z-index:23;display:grid;gap:.75rem;max-height:min(27rem,calc(100vh - 4rem));padding:.8rem;border:1px solid rgba(36,48,68,.16);border-radius:.75rem;background:#fffffffa;box-shadow:0 1.5rem 4rem #102a4347}.christianity-history-drawer header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.christianity-history-drawer h2,.christianity-history-drawer p{margin:0}.christianity-history-drawer header span{display:grid;place-items:center;min-width:1.85rem;height:1.85rem;border-radius:999px;background:#edf2f7;font-weight:800}.christianity-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.55rem;overflow-y:auto;padding:.1rem .1rem .25rem}.christianity-offerings-drawer{max-height:min(30rem,calc(100vh - 3rem))}.christianity-offering-list{display:grid;gap:.6rem;overflow-y:auto;padding:.1rem}.christianity-offering-row{display:grid;grid-template-columns:minmax(4.9rem,6.2rem) minmax(0,1fr);gap:.65rem;align-items:stretch;padding:.45rem;border:1px solid rgba(36,48,68,.12);border-radius:.65rem;background:#fff}.christianity-offering-row.is-exhausted{opacity:.68}.christianity-offering-card{min-height:7.4rem;background:linear-gradient(180deg,#fffffff5,#f8fafcf5),radial-gradient(circle at 82% 14%,#facc15 0 .48rem,transparent .5rem);box-shadow:0 .45rem 1rem #102a431a}.christianity-offering-card small{color:#1f293394;font-size:.66rem;text-transform:uppercase}.christianity-offering-card p,.christianity-offering-row p{margin:0}.christianity-offering-card p{align-self:end;color:#1f2933a3;font-size:.72rem;line-height:1.2}.christianity-offering-row>div{display:grid;gap:.35rem;align-content:center;min-width:0}.christianity-offering-row>div p{color:#1f2933b8;font-size:.85rem;line-height:1.3}.christianity-offering-row>div button{justify-self:start;min-height:2.2rem;padding:0 .7rem;border:1px solid rgba(16,42,67,.16);border-radius:.5rem;background:#102a43;color:#fff;font:inherit;font-weight:800}.christianity-offering-row>div button:disabled{background:#e2e8f0;color:#1f293394}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-match-strip{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.35rem;padding:.35rem}.christianity-match-player{gap:.35rem}.christianity-match-player small{display:none}.christianity-scoreboard{min-width:3.65rem;padding:0 .35rem}.christianity-scoreboard strong{font-size:1.05rem}.christianity-table{gap:.35rem}.christianity-player-side{padding:.3rem .25rem}.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-hand-shelf{min-height:7.4rem;padding-top:.25rem}.christianity-player-rack{grid-template-columns:minmax(4.7rem,5.9rem) minmax(4.8rem,1fr) minmax(3.7rem,5rem)}.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-offering-row{grid-template-columns:minmax(4.5rem,5.5rem) minmax(0,1fr);gap:.5rem}.christianity-opponent-hand-area{min-height:4.15rem}.christianity-hand-fan--opponent{min-height:4rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 addIcons({ refreshOutline, sparklesOutline, trophyOutline });