/* docs/features/game-engine/tavern-recruitment/ */

.town-tavern-page--full {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--gs-u-h) * 0.45);
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: calc(var(--gs-u-h) * 0.62) calc(var(--gs-u-w) * 1.05) calc(var(--gs-u-h) * 0.72);
  text-align: left;
}
.town-tavern-page--full > .game-mode-bar {
  text-align: left;
  /* Flex column gap already separates nav from content — avoid double spacing with nav margin */
  margin-bottom: 0;
}
.town-field--stub:has(.game-wallet-hud) .town-tavern-page .game-mode-bar__inner {
  padding-right: calc(var(--gs-u-w) * 20);
}
.town-tavern-page__err {
  margin: 0 0 calc(var(--gs-u-h) * 0.75);
  color: #ffb4a8;
  font-size: var(--gs-text-md);
}
.town-tavern-page__packs {
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--gs-u-h) * 0.5);
}
.town-tavern-page__packs h3 {
  margin: 0 0 calc(var(--gs-u-h) * 1.1);
  font-size: var(--gs-text-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 214, 174, 0.9);
  text-align: center;
  text-shadow: 0 calc(var(--gs-u-h) * 0.15) calc(var(--gs-u-h) * 0.65) rgba(0, 0, 0, 0.65);
}
.town-tavern-page__pack-shelf {
  width: 100%;
  flex: 1 1 auto;
  height: 80%;
  min-height: calc(var(--gs-u-h) * 58);
  overflow: hidden;
  overflow-y: hidden;
  touch-action: pan-y pinch-zoom;
  padding: calc(var(--gs-u-h) * 1.5) calc(var(--gs-u-w) * 7);
  border: none;
  border-radius: 0;
  background: radial-gradient(
    ellipse 45% 65% at 50% 45%,
    rgba(255, 207, 135, 0.13) 0%,
    rgba(80, 48, 24, 0.12) 35%,
    transparent 72%
  );
  box-shadow: none;
  box-sizing: border-box;
  scrollbar-width: none;
}
.town-tavern-page__pack-shelf::-webkit-scrollbar { display: none; }
.town-tavern-page__pack-shelf--dragging {
  cursor: grabbing;
  user-select: none;
}
.town-tavern-page__carousel {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-height: calc(var(--gs-u-h) * 60);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.town-tavern-page__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: calc(var(--gs-u-h) * 5);
  height: calc(var(--gs-u-h) * 5);
  border: var(--gs-hairline) solid rgba(255, 218, 160, 0.55);
  border-radius: 100%;
  background: linear-gradient(180deg, rgba(44, 30, 54, 0.92), rgba(14, 9, 22, 0.96));
  color: rgba(255, 235, 200, 0.95);
  font-size: calc(var(--gs-u-h) * 3.4);
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 calc(var(--gs-u-h) * 0.9) calc(var(--gs-u-h) * 2.1) rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}
.town-tavern-page__carousel-nav:hover:not(:disabled),
.town-tavern-page__carousel-nav:focus-visible:not(:disabled) {
  color: #fff8ea;
  border-color: rgba(255, 226, 170, 0.95);
  box-shadow:
    0 calc(var(--gs-u-h) * 1.1) calc(var(--gs-u-h) * 2.6) rgba(0, 0, 0, 0.56),
    0 0 calc(var(--gs-u-h) * 1.8) rgba(255, 190, 110, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
}
.town-tavern-page__carousel-nav:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.town-tavern-page__carousel-nav--prev {
  left: calc(var(--gs-u-w) * 2.2);
}
.town-tavern-page__carousel-nav--next {
  right: calc(var(--gs-u-w) * 2.2);
}
.town-tavern-page__carousel.is-static .town-tavern-page__carousel-nav {
  visibility: hidden;
  pointer-events: none;
}

/* Recruitment reveal overlay (post-pack flash). Teleported under .game-stage — --gs-* only. */
.tavern-reveal {
  --tavern-pack-col: calc(var(--gs-u-w) * 17);
  /* Flip + footer width; sparse batches override via .tavern-reveal--sparse. */
  --tavern-flip-width: calc(var(--gs-u-w) * 9.25);
  position: absolute;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gs-u-h) * 0.75);
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
  animation: tavern-reveal-fade-in 0.35s ease-out both;
}
/* ≤4 pulls (single pack / Rescue): larger cards so the reveal stage feels less empty. */
.tavern-reveal--sparse {
  --tavern-flip-width: calc(var(--gs-u-w) * 13);
}
@keyframes tavern-reveal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tavern-reveal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(35, 22, 58, 0.92) 0%, rgba(6, 3, 10, 0.96) 70%);
  cursor: default;
}
/* Reveal shell shares pack-shop panel chrome (``.tavern-pack-shop__panel``). */
.tavern-reveal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--gs-u-w) * 60));
  min-width: 0;
  overflow: hidden;
}
.tavern-reveal__panel.tavern-pack-shop__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tavern-reveal__skip {
  position: absolute;
  top: calc(var(--gs-u-h) * 1.2);
  left: calc(var(--gs-u-w) * 1.2);
  z-index: 3;
  appearance: none;
  border: var(--gs-hairline) solid rgba(255, 210, 160, 0.28);
  border-radius: var(--gs-radius-xs);
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.85);
  font: inherit;
  font-size: var(--gs-text-sm);
  font-weight: 600;
  color: #f5ead8;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  box-sizing: border-box;
  min-height: calc(var(--gs-u-h) * 2.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tavern-reveal__skip:hover,
.tavern-reveal__skip:focus-visible {
  border-color: var(--gs-border-gold-hover-strong);
  outline: none;
  box-shadow: 0 0 0 var(--gs-stroke) rgba(120, 180, 255, 0.35);
}
.tavern-reveal__skip--concealed {
  visibility: hidden;
  pointer-events: none;
}
.tavern-reveal__close {
  position: absolute;
  top: calc(var(--gs-u-h) * 1.2);
  right: calc(var(--gs-u-w) * 1.2);
  z-index: 3;
  appearance: none;
  border: none;
  border-radius: var(--gs-radius-xs);
  padding: calc(var(--gs-u-h) * 0.2) calc(var(--gs-u-h) * 0.45);
  font: inherit;
  font-size: calc(var(--gs-u-h) * 2.7);
  line-height: 1;
  font-weight: 400;
  color: #d8c4a8;
  background: transparent;
  cursor: pointer;
}
.tavern-reveal__close:hover,
.tavern-reveal__close:focus-visible {
  color: #fff2dc;
  background: var(--gs-border-gold-warm-subtle, rgba(255, 210, 160, 0.12));
  outline: none;
  box-shadow: 0 0 0 var(--gs-stroke) rgba(120, 180, 255, 0.35);
}
.tavern-reveal__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: calc(var(--gs-u-h) * 13);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-start;
  gap: calc(var(--gs-u-h) * 0.65) calc(var(--gs-u-h) * 0.85);
  /* Extra vertical slack: 3D flip, scale(1.06), and pull badges below each card. */
  padding: calc(var(--gs-u-h) * 2) calc(var(--gs-u-h) * 0.65) calc(var(--gs-u-h) * 2.6);
  overflow-x: hidden;
  overflow-y: auto;
}
.tavern-reveal__stage .tavern-flip-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.35);
  /* Badge row sits below the flip; do not clip 3D transforms on the card. */
  overflow: visible;
}
.tavern-flip-wrap .tavern-recruit-tile__pull-footer {
  width: var(--tavern-flip-width, calc(var(--gs-u-w) * 9.25));
  flex-shrink: 0;
}
.tavern-flip-wrap .tavern-flip {
  position: relative;
  z-index: 1;
}
.tavern-reveal__burst-layer {
  --burst-x-pct: 50%;
  --burst-y-pct: 45%;
  --burst-size: calc(var(--gs-u-w) * 22);
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.tavern-reveal__burst {
  position: absolute;
  left: var(--burst-x-pct);
  top: var(--burst-y-pct);
  width: var(--burst-size);
  height: var(--burst-size);
  max-width: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 50%, #000 48%, rgba(0, 0, 0, 0.55) 68%, transparent 82%);
  mask-image: radial-gradient(closest-side circle at 50% 50%, #000 48%, rgba(0, 0, 0, 0.55) 68%, transparent 82%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  filter: saturate(1.06);
}
.tavern-reveal__burst-svg {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  --tb-s0: rgba(210, 150, 90, 0.48);
  --tb-s1: rgba(150, 85, 45, 0.38);
  --tb-s2: rgba(230, 175, 110, 0.36);
  --tb-s3: rgba(180, 110, 60, 0.44);
  --tb-mist-mid: rgba(190, 120, 70, 0.38);
  --tb-mist-edge: rgba(40, 20, 12, 0.15);
  --tb-void-edge: rgba(24, 14, 8, 0.75);
  --tb-spark: rgba(255, 220, 185, 0.95);
}
.tavern-reveal__panel:has(.tavern-reveal__burst-layer--on) .tavern-flip--current .tavern-flip__face {
  box-shadow:
    0 0 0 2px var(--tavern-rim-shown),
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(255, 230, 160, 0.55),
    0 0 72px rgba(255, 150, 60, 0.38),
    0 0 96px rgba(255, 100, 40, 0.12);
}
.tavern-reveal__burst-layer--on .tavern-reveal__burst {
  animation: tavern-prestige-burst-shell 1.2s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}
@keyframes tavern-prestige-burst-shell {
  0% { opacity: 0; visibility: visible; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.tavern-burst-anim {
  transform-box: fill-box;
  transform-origin: center;
}
.tavern-reveal__burst-svg .tb-arms .tb-arm {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.08;
  stroke-dashoffset: 1.08;
  opacity: 0;
}
.tavern-reveal__burst-layer--on .tb-arms {
  transform-origin: 0 0;
  animation: tavern-burst-arms-corkscrew 1.12s cubic-bezier(0.12, 0.72, 0.12, 1) forwards;
}
.tavern-reveal__burst-layer--on .tavern-burst-mist {
  animation: tavern-burst-mist-vortex 1.15s cubic-bezier(0.22, 0.08, 0.2, 1) forwards;
}
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(1) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(2) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.035s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(3) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.07s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(4) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.105s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(5) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.14s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(6) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.175s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(7) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.21s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(8) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.245s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(9) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.28s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(10) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.315s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(11) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.35s; }
.tavern-reveal__burst-layer--on .tb-arms > g:nth-child(12) .tb-arm { animation: tavern-burst-arm-implode 1.12s cubic-bezier(0.14, 0.58, 0.2, 1) forwards; animation-delay: 0.385s; }
.tavern-reveal__burst-layer--on .tb-spark-0 { animation: tavern-burst-spark 1s ease-out forwards; }
.tavern-reveal__burst-layer--on .tb-spark-1 { animation: tavern-burst-spark 1s ease-out forwards; animation-delay: 0.1s; }
.tavern-reveal__burst-layer--on .tb-spark-2 { animation: tavern-burst-spark 1s ease-out forwards; animation-delay: 0.22s; }
.tavern-reveal__burst-layer--on .tb-spark-3 { animation: tavern-burst-spark 1s ease-out forwards; animation-delay: 0.06s; }
.tavern-reveal__burst-layer--on .tb-spark-4 { animation: tavern-burst-spark 1s ease-out forwards; animation-delay: 0.18s; }
@keyframes tavern-burst-mist-vortex {
  0% { transform: scale(1.38); opacity: 0.1; }
  38% { opacity: 0.32; }
  72% { transform: scale(0.74); opacity: 0.2; }
  100% { transform: scale(0.54); opacity: 0; }
}
@keyframes tavern-burst-arms-corkscrew {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-26deg); }
}
@keyframes tavern-burst-arm-implode {
  0% { stroke-dashoffset: 0; opacity: 0.08; transform: scale(1.52); }
  12% { opacity: 0.78; }
  38% { stroke-dashoffset: 0.38; transform: scale(0.98); opacity: 0.72; }
  62% { stroke-dashoffset: 0.72; transform: scale(0.58); opacity: 0.44; }
  88% { stroke-dashoffset: 1.02; transform: scale(0.34); opacity: 0.1; }
  100% { stroke-dashoffset: 1.08; transform: scale(0.26); opacity: 0; }
}
@keyframes tavern-burst-spark {
  0% { opacity: 0; transform: scale(0.35); }
  32% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.42); }
}
.tavern-reveal--prestige-anticipation:not(.tavern-reveal--summary) .tavern-flip-wrap:has(.tavern-flip--current) { z-index: 3; }
.tavern-reveal--prestige-anticipation:not(.tavern-reveal--summary) .tavern-flip:not(.is-revealed) .tavern-flip__face--back { background: transparent; }
.tavern-reveal--prestige-anticipation:not(.tavern-reveal--summary) .tavern-flip:not(.is-revealed) .tavern-flip__back-mark { opacity: 0.2; }
.library-tile--tavern-pull { cursor: default; }
.tavern-recruit-tile__name-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gs-u-h) * 0.5);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  text-align: center;
  color: #f8f0e4;
}
.tavern-recruit-tile__pull-footer { font-weight: 700; letter-spacing: 0.04em; }
.tavern-recruit-tile__new {
  color: var(--tavern-rim);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(0, 0, 0, 0.55);
}
.tavern-recruit-tile__dup { color: rgba(235, 205, 155, 0.95); font-variant-numeric: tabular-nums; }
.tavern-reveal__commerce {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex-shrink: 0;
}
.tavern-reveal--footer-pending .tavern-reveal__commerce { visibility: hidden; pointer-events: none; }
.tavern-reveal__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* First-legendary join uses the app card lightbox; dim the reveal panel underneath. */
.tavern-reveal--legendary-join-hold .tavern-reveal__panel {
  filter: brightness(0.42) saturate(0.75);
  transition: filter 0.35s ease;
}
.tavern-reveal--legendary-join-hold .tavern-reveal__skip,
.tavern-reveal--legendary-join-hold .tavern-reveal__close {
  opacity: 0.35;
  pointer-events: none;
}

.tavern-flip-wrap,
.tavern-flip {
  --tavern-rim: rgba(248, 248, 252, 0.58);
  /* Gated rim color: stays transparent until the flip completes, then resolves
     to --tavern-rim and fades in via the box-shadow transition on .tavern-flip__face. */
  --tavern-rim-shown: transparent;
  --tavern-glow: rgba(255, 255, 255, 0.14);
  --tavern-star-tint: rgba(248, 246, 255, 0.95);
  --tavern-swirl-a: rgba(255, 255, 255, 0.2);
  --tavern-swirl-b: rgba(240, 238, 250, 0.18);
  --tavern-swirl-c: rgba(255, 252, 245, 0.16);
  --tavern-swirl-d: rgba(248, 248, 255, 0.2);
  /* New shimmer: same hue/chroma as --tavern-rim; lightness sweeps 10% → 100% OKLCH L (not alpha). */
  --tavern-new-shimmer-10: oklch(from var(--tavern-rim) 0.1 c h / 1);
  --tavern-new-shimmer-100: oklch(from var(--tavern-rim) 1 c h / 1);
}
.tavern-flip {
  /* Match inset on face front (padding) and back mark so unrevealed vs revealed footprints align. */
  --tavern-flip-face-inset: calc(var(--gs-u-h) * 0.9);
  width: var(--tavern-flip-width);
  flex: 0 0 auto;
  perspective: calc(var(--gs-u-w) * 62.5);
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
.tavern-reveal--sparse .tavern-flip {
  --tavern-flip-face-inset: calc(var(--gs-u-h) * 1.15);
}
.tavern-flip-wrap[data-stars="2"],
.tavern-flip[data-stars="2"] { --tavern-rim: rgba(90, 210, 140, 0.78); --tavern-glow: rgba(60, 190, 120, 0.26); --tavern-star-tint: rgba(190, 255, 215, 0.95); --tavern-swirl-a: rgba(80, 220, 140, 0.4); --tavern-swirl-b: rgba(40, 160, 100, 0.32); --tavern-swirl-c: rgba(120, 240, 180, 0.28); --tavern-swirl-d: rgba(60, 200, 120, 0.38); }
.tavern-flip-wrap[data-stars="3"],
.tavern-flip[data-stars="3"] { --tavern-rim: rgba(110, 175, 255, 0.82); --tavern-glow: rgba(80, 150, 255, 0.3); --tavern-star-tint: rgba(200, 225, 255, 0.96); --tavern-swirl-a: rgba(100, 180, 255, 0.42); --tavern-swirl-b: rgba(60, 120, 220, 0.34); --tavern-swirl-c: rgba(160, 210, 255, 0.3); --tavern-swirl-d: rgba(80, 140, 255, 0.4); }
.tavern-flip-wrap[data-stars="4"],
.tavern-flip[data-stars="4"] { --tavern-rim: rgba(200, 130, 255, 0.85); --tavern-glow: rgba(180, 100, 255, 0.32); --tavern-star-tint: rgba(240, 210, 255, 0.96); --tavern-swirl-a: rgba(210, 140, 255, 0.4); --tavern-swirl-b: rgba(140, 70, 220, 0.34); --tavern-swirl-c: rgba(230, 180, 255, 0.32); --tavern-swirl-d: rgba(180, 110, 255, 0.38); }
.tavern-flip-wrap[data-stars="5"],
.tavern-flip[data-stars="5"] { --tavern-rim: rgba(205, 145, 88, 0.88); --tavern-glow: rgba(190, 120, 70, 0.34); --tavern-star-tint: rgba(255, 220, 185, 0.96); --tavern-swirl-a: rgba(210, 150, 90, 0.48); --tavern-swirl-b: rgba(150, 85, 45, 0.38); --tavern-swirl-c: rgba(230, 175, 110, 0.36); --tavern-swirl-d: rgba(180, 110, 60, 0.44); }
.tavern-flip-wrap[data-stars="6"],
.tavern-flip[data-stars="6"] { --tavern-rim: rgba(230, 195, 95, 0.92); --tavern-glow: rgba(255, 210, 100, 0.4); --tavern-star-tint: rgba(255, 235, 170, 0.98); --tavern-swirl-a: rgba(255, 220, 120, 0.5); --tavern-swirl-b: rgba(200, 150, 50, 0.4); --tavern-swirl-c: rgba(255, 240, 160, 0.38); --tavern-swirl-d: rgba(220, 170, 70, 0.46); }
.tavern-flip-wrap[data-stars="7"],
.tavern-flip[data-stars="7"] { --tavern-rim: rgba(220, 155, 45, 0.92); --tavern-glow: rgba(255, 175, 60, 0.42); --tavern-star-tint: rgba(255, 220, 150, 0.98); --tavern-swirl-a: rgba(255, 185, 70, 0.52); --tavern-swirl-b: rgba(190, 110, 25, 0.42); --tavern-swirl-c: rgba(255, 210, 120, 0.4); --tavern-swirl-d: rgba(230, 150, 40, 0.48); }
.tavern-flip-wrap[data-stars="8"],
.tavern-flip[data-stars="8"] { --tavern-rim: rgba(248, 236, 210, 0.88); --tavern-glow: rgba(255, 245, 220, 0.38); --tavern-star-tint: rgba(255, 250, 235, 0.98); --tavern-swirl-a: rgba(255, 248, 225, 0.48); --tavern-swirl-b: rgba(230, 210, 175, 0.4); --tavern-swirl-c: rgba(255, 252, 238, 0.36); --tavern-swirl-d: rgba(240, 225, 195, 0.44); }
.tavern-flip-wrap[data-stars="9"],
.tavern-flip[data-stars="9"] { --tavern-rim: rgba(255, 250, 230, 0.9); --tavern-glow: rgba(255, 245, 200, 0.42); --tavern-star-tint: rgba(255, 252, 238, 0.99); --tavern-swirl-a: rgba(255, 252, 230, 0.5); --tavern-swirl-b: rgba(240, 215, 150, 0.42); --tavern-swirl-c: rgba(255, 255, 245, 0.4); --tavern-swirl-d: rgba(248, 230, 180, 0.46); }
.tavern-flip-wrap[data-stars="10"],
.tavern-flip[data-stars="10"] { --tavern-rim: rgba(255, 255, 252, 0.92); --tavern-glow: rgba(255, 252, 235, 0.48); --tavern-star-tint: rgba(255, 255, 250, 0.99); --tavern-swirl-a: rgba(255, 255, 250, 0.55); --tavern-swirl-b: rgba(252, 238, 200, 0.45); --tavern-swirl-c: rgba(255, 250, 240, 0.42); --tavern-swirl-d: rgba(248, 236, 210, 0.5); }
.tavern-reveal:not(.tavern-reveal--summary) .tavern-flip:not(.tavern-flip--current):not(.tavern-flip--revealed) { opacity: 0.38; filter: saturate(0.65); }
.tavern-reveal:not(.tavern-reveal--summary) .tavern-flip--current { transform: scale(1.06); z-index: 2; }
.tavern-reveal--summary .tavern-flip { transform: none; opacity: 1; filter: none; }
.tavern-flip__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--gs-radius-xs);
}
.tavern-flip.is-revealed .tavern-flip__inner { transform: rotateY(180deg); }
/*
 * Legendary pulls: multi-axis 3D "deal" flip (not plain rotateY) + sync foil burst.
 * The flip element gets `.tavern-flip--legendary` whenever the pull is legendary.
 */
.tavern-flip--legendary { perspective: calc(var(--gs-u-w) * 80); }
.tavern-flip--legendary .tavern-flip__inner {
  transform-origin: 50% 50%;
}
.tavern-flip--legendary:not(.is-revealed) .tavern-flip__inner {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.tavern-flip--legendary.is-revealed .tavern-flip__inner {
  transition: none;
  animation: tavern-flip-legendary-tilt-in 1.18s cubic-bezier(0.2, 0.78, 0.22, 1) forwards;
}
/*
 * Legendary tilt-in: X/Y/Z wobble while rotating to face — reads as a physical card
 * settling, not a flat CSS flip. Final pose matches normal reveals (rotateY 180deg).
 */
@keyframes tavern-flip-legendary-tilt-in {
  0%   { transform: rotateX(10deg) rotateY(-16deg) rotateZ(-2.8deg) translateZ(-12px) scale(0.92); }
  12%  { transform: rotateX(-8deg) rotateY(16deg) rotateZ(3.6deg) translateZ(30px) scale(1.028); }
  24%  { transform: rotateX(6deg) rotateY(52deg) rotateZ(-2.6deg) translateZ(48px) scale(1.032); }
  38%  { transform: rotateX(-5deg) rotateY(104deg) rotateZ(2.4deg) translateZ(38px) scale(1.016); }
  54%  { transform: rotateX(4deg) rotateY(146deg) rotateZ(-1.8deg) translateZ(23px) scale(1.009); }
  70%  { transform: rotateX(-2.8deg) rotateY(168deg) rotateZ(1.2deg) translateZ(10px) scale(1.004); }
  86%  { transform: rotateX(1.4deg) rotateY(177deg) rotateZ(-0.6deg) translateZ(3px) scale(1.001); }
  100% { transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(0) scale(1); }
}
/* Skip-snap forces an immediate settled pose without playing the wobble animation. */
.tavern-reveal--skip-snap .tavern-flip--legendary.is-revealed .tavern-flip__inner,
.tavern-reveal--skip-snap .tavern-flip.is-revealed .tavern-flip__inner {
  animation: none !important;
  transition: none !important;
  transform: rotateY(180deg) !important;
}
.tavern-flip--legendary.is-revealed .tavern-flip__halo {
  animation: tavern-legendary-halo-reveal 1.32s cubic-bezier(0.25, 0.82, 0.2, 1) forwards;
}
.tavern-flip--legendary.tavern-flip--prestige.is-revealed .tavern-flip__halo {
  animation:
    tavern-legendary-halo-reveal 1.32s cubic-bezier(0.25, 0.82, 0.2, 1) forwards,
    tavern-reveal-halo-breathe 2.8s ease-in-out 1.38s infinite;
}
@keyframes tavern-legendary-halo-reveal {
  0%   { opacity: 0.38; transform: scale(0.88); filter: brightness(1) saturate(1); }
  42%  { opacity: 0.95; transform: scale(1.12); filter: brightness(1.45) saturate(1.35); }
  100% { opacity: 0.58; transform: scale(1); filter: none; }
}
.tavern-flip--legendary.tavern-flip--prestige:not(.is-revealed) .tavern-flip__halo {
  opacity: 0.65;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 245, 210, 0.55) 0%,
    var(--tavern-glow) 42%,
    transparent 64%
  );
}
/* Rim is gated by --tavern-rim-shown: transparent until is-revealed, then fades in
   *after* the 0.72s flip rotation completes (transition-delay matches the flip). */
.tavern-flip__face {
  position: absolute;
  inset: 0;
  border-radius: var(--gs-radius-xs);
  backface-visibility: hidden;
  overflow: visible;
  box-shadow: 0 0 0 2px var(--tavern-rim-shown), 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 24px var(--tavern-glow);
  transition: box-shadow 0.32s ease 0.72s;
}
.tavern-flip.is-revealed { --tavern-rim-shown: var(--tavern-rim); }
/*
 * New at this star rank: replace the static 2px rim on the revealed front face
 * with the same ring geometry (inset 0, 2px, inherit border-radius) and sweep
 * the conic-gradient angle — no second outer border on .tavern-flip__inner.
 */
@property --tavern-new-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.tavern-flip--new.is-revealed.tavern-flip--revealed .tavern-flip__face--front {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 24px var(--tavern-glow);
}
.tavern-flip--new.is-revealed.tavern-flip--revealed .tavern-flip__face--front::before {
  /* Inline gradient (not a custom prop) so --tavern-new-ring-angle can animate.
   * Base is the rim color; a narrow band brightens 10% → 100% lightness and back. */
  --tavern-new-ring-angle: 0deg;
  background: conic-gradient(
    from var(--tavern-new-ring-angle),
    var(--tavern-rim),
    var(--tavern-rim),
    var(--tavern-rim),
    var(--tavern-new-shimmer-10),
    var(--tavern-new-shimmer-100),
    var(--tavern-new-shimmer-100),
    var(--tavern-new-shimmer-10),
    var(--tavern-rim),
    var(--tavern-rim),
    var(--tavern-rim)
  );
  content: "";
  position: absolute;
  /* Match box-shadow 0 0 0 2px rim: ring sits outside the face edge, not inset. */
  inset: -2px;
  border-radius: inherit;
  box-sizing: border-box;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation:
    tavern-new-ring-fade-in 0.42s ease-out forwards,
    tavern-new-ring-gradient-spin 5.25s linear 0.42s infinite;
}
.tavern-flip-wrap:has(.tavern-flip--new.is-revealed.tavern-flip--revealed) .tavern-recruit-tile__new {
  display: inline-block;
  color: transparent;
  /* Two identical halves (0–50% / 50–100%) so one background-position cycle tiles seamlessly. */
  background: linear-gradient(
    135deg,
    var(--tavern-rim) 0%,
    var(--tavern-rim) 16%,
    var(--tavern-new-shimmer-10) 20%,
    var(--tavern-new-shimmer-100) 25%,
    var(--tavern-new-shimmer-10) 30%,
    var(--tavern-rim) 34%,
    var(--tavern-rim) 50%,
    var(--tavern-rim) 66%,
    var(--tavern-new-shimmer-10) 70%,
    var(--tavern-new-shimmer-100) 75%,
    var(--tavern-new-shimmer-10) 80%,
    var(--tavern-rim) 84%,
    var(--tavern-rim) 100%
  );
  background-size: 200% 200%;
  background-position: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
  animation: tavern-new-text-shimmer 5.25s linear 0.42s infinite;
}
@keyframes tavern-new-text-shimmer {
  from { background-position: 100% 100%; }
  to { background-position: 0% 0%; }
}
@keyframes tavern-new-ring-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tavern-new-ring-gradient-spin {
  to { --tavern-new-ring-angle: 360deg; }
}
.tavern-flip__face--back { overflow: hidden; transform: rotateY(0deg); background: rgb(18, 12, 28); display: block; }
.tavern-flip__back-mark {
  position: absolute;
  inset: var(--tavern-flip-face-inset);
  /* Replaced elements ignore right/bottom of `inset` when intrinsic width/height
     are present (the <img> has width="400" height="270" attrs), which leaves the
     image at intrinsic size anchored to top-left and visually off-centered.
     Force the box to fill the inset region so object-fit can center it. */
  width: calc(100% - 2 * var(--tavern-flip-face-inset));
  height: calc(100% - 2 * var(--tavern-flip-face-inset));
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
  opacity: 1;
  pointer-events: none;
}
.tavern-flip__face--front {
  transform: rotateY(180deg);
  background: #120a18;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  padding: var(--tavern-flip-face-inset);
}
.tavern-flip__face--front .tavern-reveal-tile-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.tavern-flip__face--front .game-card-sizing:not(.game-card-sizing--dialog),
.tavern-flip__face--front .library-tile {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  flex: 0 0 auto;
  aspect-ratio: 5 / 7;
  box-sizing: border-box;
  box-shadow: none;
}
.tavern-flip__face--front .game-card {
  box-shadow: none;
  width: 100%;
  height: 100%;
}
.tavern-flip__halo {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(circle at 50% 40%, var(--tavern-glow), transparent 62%);
  z-index: 0;
}
.tavern-flip--prestige .tavern-flip__halo { animation: tavern-reveal-halo-breathe 2.8s ease-in-out infinite; }
@keyframes tavern-reveal-halo-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.62; } }

@media (prefers-reduced-motion: reduce) {
  .tavern-flip__inner { transition-duration: 0.01ms; }
  .tavern-flip__face { transition: none; }
  .tavern-flip--prestige .tavern-flip__halo { animation: none; }
  .tavern-flip--legendary.is-revealed .tavern-flip__inner {
    animation: none !important;
    transform: rotateY(180deg) !important;
  }
  .tavern-flip--legendary.is-revealed .tavern-flip__halo { animation: none !important; }
  .tavern-flip--new.is-revealed.tavern-flip--revealed .tavern-flip__face--front::before {
    animation: tavern-new-ring-fade-in 0.01ms forwards;
    --tavern-new-ring-angle: 42deg;
  }
  .tavern-flip-wrap:has(.tavern-flip--new.is-revealed.tavern-flip--revealed) .tavern-recruit-tile__new {
    animation: none;
    color: var(--tavern-rim);
    background: none;
    background-position: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
  }
  .tavern-reveal__burst,
  .tavern-reveal__burst-layer--on .tavern-reveal__burst { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
  .tavern-reveal__burst .tavern-burst-anim { animation: none !important; }
  .tavern-reveal__burst .tb-arms { animation: none !important; transform: none !important; }
  .tavern-reveal { animation: none; }
  .tavern-recruit-buy:not(:disabled):is(:hover, :focus-visible) {
    transform: none;
  }
  .tavern-recruit-buy,
  .tavern-recruit-buy::before,
  .tavern-recruit-buy__inner {
    transition-duration: 0.01ms;
  }
}

/* Shared pack column width (carousel + pack-shop dialog). */
.town-tavern-page__pack-list {
  --tavern-pack-col: calc(var(--gs-u-w) * 17);
  position: relative;
  min-width: 100%;
  height: calc(var(--gs-u-h) * 54);
  display: block;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.town-tavern-page__pack-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tavern-pack-col);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%) scale(0.68);
  opacity: 0.28;
  filter: brightness(0.62) saturate(0.75) blur(calc(var(--gs-u-h) * 0.16));
  transition:
    transform 260ms ease,
    opacity 220ms ease,
    filter 220ms ease;
  pointer-events: none;
}
.town-tavern-page__pack-form { margin: 0; }
.town-tavern-page__pack-open {
  --recruit-pack-width: var(--tavern-pack-col);
  width: var(--tavern-pack-col);
}
.town-tavern-page__pack-slot.is-active {
  z-index: 3;
  opacity: 1;
  filter: brightness(1.08) saturate(1.08);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.town-tavern-page__pack-slot.is-prev,
.town-tavern-page__pack-slot.is-next {
  pointer-events: auto;
}
.town-tavern-page__pack-slot.is-prev {
  z-index: 2;
  opacity: 0.55;
  filter: brightness(0.75) saturate(0.85);
  transform: translate(calc(-50% - calc(var(--gs-u-w) * 12.2)), -50%) scale(0.82);
}
.town-tavern-page__pack-slot.is-next {
  z-index: 2;
  opacity: 0.55;
  filter: brightness(0.75) saturate(0.85);
  transform: translate(calc(-50% + calc(var(--gs-u-w) * 12.2)), -50%) scale(0.82);
}
.town-tavern-page__pack-slot.is-far-prev {
  z-index: 1;
  opacity: 0.18;
  filter: brightness(0.5) saturate(0.65) blur(calc(var(--gs-u-h) * 0.32));
  transform: translate(calc(-50% - calc(var(--gs-u-w) * 22.1)), -50%) scale(0.62);
}
.town-tavern-page__pack-slot.is-far-next {
  z-index: 1;
  opacity: 0.18;
  filter: brightness(0.5) saturate(0.65) blur(calc(var(--gs-u-h) * 0.32));
  transform: translate(calc(-50% + calc(var(--gs-u-w) * 22.1)), -50%) scale(0.62);
}
.town-tavern-page__pack-slot.is-active::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 216, 150, 0.2) 0%,
    rgba(255, 170, 80, 0.08) 38%,
    transparent 70%
  );
  pointer-events: none;
}
.tavern-dual-join {
  margin: 0 calc(var(--gs-u-h) * 0.25);
  font-size: var(--gs-text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(200, 190, 175, 0.85);
}

.tavern-pack-shop {
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
  box-sizing: border-box;
  width: calc(var(--gs-u-w) * 60);
  --tavern-pack-col: calc(var(--gs-u-w) * 17);
}
.tavern-pack-shop::backdrop { background: rgba(4, 2, 10, 0.72); }
.tavern-pack-shop__panel {
  width: 100%;
  /* Content-sized baseline (~647px @ 922px stage) × 1.15 — cqh only, never height:%. */
  height: calc(var(--gs-u-h) * 85);
  max-height: calc(var(--gs-u-h) * 85);
  overflow: auto;
  box-sizing: border-box;
  padding: calc(var(--gs-u-h) * 4) calc(var(--gs-u-h) * 7.5);
  border-radius: var(--gs-radius-md);
  border: none;
  box-shadow: none;
  background: url("/assets/img/tavern/recruit-notice-board.webp?v=da214fb18461") center / 100% 100% no-repeat;
}
.tavern-pack-shop__title {
  margin: calc(var(--gs-u-h) * 1.5) 0;
  font-size: var(--gs-text-lg);
  font-weight: 700;
  color: #f5ead8;
  text-align: center;
}
.tavern-pack-shop__hero {
  display: grid;
  grid-template-columns:
    minmax(calc(var(--gs-u-h) * 12.6), 1fr)
    var(--tavern-pack-col)
    minmax(calc(var(--gs-u-h) * 12.6), 1fr);
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.5);
  width: 100%;
  margin: 0 0 calc(var(--gs-u-h) * 0.55);
  min-width: 0;
  overflow: visible;
}
.tavern-pack-shop__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.tavern-pack-shop__subcard {
  width: 100%;
  max-width: calc(var(--gs-u-w) * 13.8);
  margin: 0 auto;
  padding: calc(var(--gs-u-h) * 0.42) calc(var(--gs-u-h) * 0.48) calc(var(--gs-u-h) * 0.46);
  border-radius: var(--gs-radius-sm);
  box-sizing: border-box;
  --tavern-pack-shop-stat-gold: var(--gs-stat-gold);
}
.tavern-pack-shop__subcard-heading {
  margin: 0 0 calc(var(--gs-u-h) * 0.34);
  font-size: var(--gs-text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: #e9c886;
  text-shadow: 0 0 calc(var(--gs-u-h) * 0.35) rgba(233, 200, 134, 0.38);
}

.tavern-pack-shop__odds {
  opacity: 0.8;
}

.tavern-pack-shop__odds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.12);
}
.tavern-pack-shop__odds-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.28);
  padding: calc(var(--gs-u-h) * 0.16) calc(var(--gs-u-h) * 0.12);
  border-radius: calc(var(--gs-u-h) * 0.14);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 0 calc(var(--gs-u-w) * 0.04) rgba(255, 224, 168, 0.12) inset;
}
.tavern-pack-shop__odds-stars {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  font-size: var(--gs-text-2xs);
}
.tavern-pack-shop__odds-row .stars-row {
  line-height: 1;
}
.tavern-pack-shop__odds-feel {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(var(--gs-u-w) * 5.2);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: calc(var(--gs-text-2xs) * 0.7);
  font-weight: 600;
  line-height: 1.1;
  text-align: right;
  color: var(--tavern-pack-shop-stat-gold);
  cursor: help;
  white-space: nowrap;
}
.tavern-pack-shop__odds-feel-label {
  display: block;
  overflow: hidden;
}

.tavern-pack-shop__odds-feel .game-tooltip {
  font-variant-numeric: tabular-nums;
}

.tavern-pack-shop__guaranteed {
  margin-top: calc(var(--gs-u-h) * 0.22);
}
.tavern-pack-shop__odds-divider {
  margin: 0 0 calc(var(--gs-u-h) * 0.28);
  border: none;
  height: calc(var(--gs-u-h) * 0.08);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(233, 200, 134, 0.45) 20%,
    rgba(233, 200, 134, 0.45) 80%,
    transparent
  );
}
.tavern-pack-shop__guaranteed-heading {
  margin: 0 0 calc(var(--gs-u-h) * 0.24);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #e9c886;
}
.tavern-pack-shop__guaranteed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.12);
}
.tavern-pack-shop__guarantee-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.28);
  padding: calc(var(--gs-u-h) * 0.16) calc(var(--gs-u-h) * 0.12);
  border-radius: calc(var(--gs-u-h) * 0.14);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 calc(var(--gs-u-w) * 0.04) rgba(255, 224, 168, 0.16) inset;
}
.tavern-pack-shop__guarantee-stars {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  font-size: var(--gs-text-2xs);
}
.tavern-pack-shop__guarantee-count {
  flex: 0 0 auto;
  min-width: calc(var(--gs-u-w) * 1.6);
  font-size: var(--gs-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--tavern-pack-shop-stat-gold);
  white-space: nowrap;
}
.tavern-pack-shop__rumor-card {
  width: calc(var(--gs-u-w) * 10.44);
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}
/* Same host contract as ``.tavern-flip__face--front`` (card-rendering design). */
.tavern-pack-shop__rumor-card .game-card-sizing:not(.game-card-sizing--dialog) {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  flex: 0 0 auto;
  aspect-ratio: 5 / 7;
  box-sizing: border-box;
  --game-card-width: 100%;
  box-shadow: none;
}
.tavern-pack-shop__rumor-card .game-card {
  box-shadow: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tavern-pack-shop__rumor-card .game-card__skill-icons {
  pointer-events: auto;
}
.tavern-pack-shop__pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: calc(var(--gs-u-h) * 2.5) calc(var(--gs-u-h) * 1.2);
  box-sizing: border-box;
}
.tavern-pack-shop__pack .recruit-pack__sleeve {
  filter:
    drop-shadow(0 calc(var(--gs-u-w) * 0.85) calc(var(--gs-u-h) * 2.2) rgba(0, 0, 0, 0.78))
    drop-shadow(0 calc(var(--gs-u-w) * 2.4) calc(var(--gs-u-h) * 5.8) rgba(0, 0, 0, 0.72))
    drop-shadow(0 calc(var(--gs-u-w) * 4.2) calc(var(--gs-u-h) * 10.5) rgba(42, 28, 14, 0.58))
    drop-shadow(0 calc(var(--gs-u-w) * 6) calc(var(--gs-u-h) * 14) rgba(0, 0, 0, 0.48));
}
.tavern-pack-shop__pack:empty { display: none; }
.tavern-pack-shop__pack[hidden] { display: none !important; }
.tavern-pack-shop__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  justify-items: stretch;
  align-items: stretch;
  gap: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.55);
  width: 100%;
  min-width: 0;
  padding-block: calc(var(--gs-u-h) * 2.5);
  box-sizing: border-box;
}

.tavern-pack-shop__actions--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tavern-recruit-buy-form {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  margin: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* Pack-shop dialog: one purchase row → center the recruit button (after form stretch defaults). */
.tavern-pack-shop__actions--single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.tavern-pack-shop__actions--single > .tavern-recruit-buy-form {
  width: calc((100% - calc(var(--gs-u-w) * 0.55)) / 2);
  max-width: 100%;
  justify-self: center;
  height: auto;
  min-height: 0;
}

.tavern-pack-shop__actions--single > .tavern-recruit-buy-form .tavern-recruit-option {
  height: auto;
  min-height: 0;
}

.tavern-recruit-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
}

.tavern-recruit-option__caption {
  flex: 0 0 auto;
  margin: 0 0 calc(var(--gs-u-h) * 0.18);
  font-weight: 600;
  font-size: var(--gs-text-2xs);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(220, 210, 195, 0.88);
  text-wrap: balance;
}

.tavern-recruit-option__discount {
  font-weight: 600;
  color: rgba(201, 168, 108, 0.78);
}

/* special-button-decal.webp — horizontal safe zones ~20% L / ~10% R; label sits above the art. */
.tavern-recruit-buy {
  --tavern-recruit-decal-url: url("/assets/icons/decals/special-button-decal.webp?v=be77c4c88d58");
  --tavern-recruit-btn-h: calc(var(--gs-u-h) * 7.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: var(--tavern-recruit-btn-h);
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  margin-top: auto;
  padding: 0;
  appearance: none;
  border: none;
  cursor: pointer;
  color: #ddccab;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
  background: transparent;
  filter: drop-shadow(0 calc(var(--gs-u-w) * 0.14) calc(var(--gs-u-h) * 0.42) rgba(0, 0, 0, 0.5));
  transition:
    transform 160ms ease,
    filter 160ms ease,
    color 160ms ease;
}

.tavern-recruit-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tavern-recruit-decal-url) center / 100% 100% no-repeat;
  transition: filter 160ms ease;
}

.tavern-recruit-buy__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gs-u-h) * 0.28);
  min-width: 0;
  box-sizing: border-box;
  padding:
    calc(var(--tavern-recruit-btn-h) * 0.22)
    10%
    calc(var(--tavern-recruit-btn-h) * 0.22)
    20%;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--gs-text-lg);
  line-height: 1.05;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.tavern-recruit-buy__inner .currency-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.tavern-recruit-buy:not(:disabled):is(:hover, :focus-visible) {
  transform: translateY(calc(var(--gs-u-h) * -0.12)) scale(1.03);
  filter:
    drop-shadow(0 calc(var(--gs-u-w) * 0.22) calc(var(--gs-u-h) * 0.62) rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 calc(var(--gs-u-w) * 1.35) rgba(255, 188, 96, 0.52));
  color: #f8edd4;
}                     

.tavern-recruit-buy:not(:disabled):is(:hover, :focus-visible)::before {
  filter: brightness(1.22) saturate(1.14) contrast(1.04);
}

.tavern-recruit-buy:not(:disabled):is(:hover, :focus-visible) .tavern-recruit-buy__inner {
  text-shadow:
    0 0 calc(var(--gs-u-h) * 0.45) rgba(255, 214, 140, 0.42),
    0 1px 0 rgba(0, 0, 0, 0.65);
}

.tavern-recruit-buy:focus-visible {
  outline: calc(var(--gs-u-h) * 0.16) solid rgba(255, 212, 148, 0.88);
  outline-offset: calc(var(--gs-u-h) * 0.14);
}

.tavern-recruit-buy:not(:disabled):active {
  transform: translateY(calc(var(--gs-u-h) * 0.06)) scale(1.01);
  filter: drop-shadow(0 calc(var(--gs-u-w) * 0.1) calc(var(--gs-u-h) * 0.34) rgba(0, 0, 0, 0.5));
}

.tavern-recruit-buy:not(:disabled):active::before {
  filter: brightness(1.06) saturate(1.05);
}
.tavern-recruit-buy:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: #a89888;
}
.tavern-recruit-buy:disabled::before {
  filter: grayscale(0.45) brightness(0.78);
}
.tavern-pack-shop__exit {
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--gs-u-h) * 4.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid rgba(255, 210, 170, 0.35);
  border-radius: var(--gs-radius-sm);
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.55);
  font: inherit;
  font-size: var(--gs-text-sm);
  font-weight: 600;
  color: #f0e8dc;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.tavern-pack-shop__exit:hover,
.tavern-pack-shop__exit:focus-visible {
  border-color: var(--gs-border-gold-hover-strong);
  outline: none;
}

/* Rescue Missions — same notice-board chrome as pack shop; no odds column. */
.tavern-rescue {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: calc(var(--gs-u-h) * 0.35) 0 calc(var(--gs-u-h) * 0.8);
  box-sizing: border-box;
}
.tavern-rescue__board.tavern-pack-shop__panel {
  width: calc(var(--gs-u-w) * 60);
  max-width: 100%;
  --tavern-pack-col: calc(var(--gs-u-w) * 17);
}
.tavern-rescue__daily {
  --fill: 0%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--gs-u-h) * 3.6);
  margin: 0 0 calc(var(--gs-u-h) * 0.55);
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.85);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: calc(var(--gs-u-h) * 0.45);
  border: var(--gs-hairline) solid rgba(215, 175, 95, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
    var(--gs-progress-track-bg, rgba(6, 4, 12, 0.85));
  box-shadow:
    inset 0 calc(var(--gs-hairline)) 0 rgba(255, 238, 190, 0.16),
    inset 0 calc(var(--gs-hairline) * -1) 0 rgba(80, 55, 20, 0.45);
  color: #f6e4b5;
  font-size: var(--gs-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 calc(var(--gs-hairline)) calc(var(--gs-u-h) * 0.22) rgba(0, 0, 0, 0.75);
}
.tavern-rescue__daily-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--gs-progress-fill);
  transition: width 0.35s ease, background 0.25s ease, opacity 0.25s ease;
}
.tavern-rescue__daily-label {
  position: relative;
  z-index: 1;
  text-align: center;
  text-wrap: balance;
}
.tavern-rescue__daily--done {
  border-color: rgba(150, 150, 155, 0.42);
  color: rgba(210, 210, 215, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgba(28, 28, 32, 0.92);
  box-shadow:
    inset 0 calc(var(--gs-hairline)) 0 rgba(255, 255, 255, 0.06),
    inset 0 calc(var(--gs-hairline) * -1) 0 rgba(0, 0, 0, 0.35);
}
.tavern-rescue__daily--done .tavern-rescue__daily-fill {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(110, 110, 118, 0.72),
    rgba(78, 78, 86, 0.85) 55%,
    rgba(62, 62, 70, 0.9)
  );
}
.tavern-rescue__timer-aside {
  align-items: center;
}
.tavern-rescue__timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gs-u-h) * 0.12);
  width: 100%;
  max-width: calc(var(--gs-u-w) * 13.8);
  margin: 0;
  padding: calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 0.7);
  box-sizing: border-box;
  border-radius: calc(var(--gs-u-h) * 0.55);
  border: var(--gs-hairline) solid rgba(201, 162, 39, 0.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233, 200, 134, 0.16), transparent 65%),
    linear-gradient(180deg, rgba(62, 48, 28, 0.92), rgba(22, 16, 10, 0.96));
  box-shadow:
    0 calc(var(--gs-u-h) * 0.25) calc(var(--gs-u-h) * 0.9) rgba(0, 0, 0, 0.4),
    inset 0 calc(var(--gs-hairline)) 0 rgba(255, 230, 180, 0.14);
}
.tavern-rescue__timer-kicker {
  font-size: var(--gs-text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(215, 191, 149, 0.82);
}
.tavern-rescue__timer-value {
  font-size: var(--gs-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #f5ead8;
  text-shadow: 0 0 calc(var(--gs-u-h) * 0.35) rgba(233, 200, 134, 0.35);
}
.tavern-rescue__err {
  margin: 0 0 calc(var(--gs-u-h) * 0.4);
  text-align: center;
  color: #e8a090;
  font-size: var(--gs-text-sm);
}
.tavern-rescue__empty {
  margin: calc(var(--gs-u-h) * 2) 0;
  text-align: center;
  color: #d8cbb4;
  font-size: var(--gs-text-sm);
}
.tavern-rescue__raiders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gs-u-h) * 0.55);
  min-height: calc(var(--gs-u-h) * 22);
}
.tavern-rescue__raiders-heading {
  margin: 0;
  font-size: var(--gs-text-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5ead8;
  text-shadow: 0 0 calc(var(--gs-u-h) * 0.35) rgba(233, 200, 134, 0.38);
}
.tavern-rescue__faction {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gs-u-h) * 0.45);
}
.tavern-rescue__faction-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gs-u-h) * 14);
  height: calc(var(--gs-u-h) * 14);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgb(78 68 48 / 0.98), rgb(18 14 10 / 0.96));
  border: calc(var(--gs-u-h) * 0.22) solid rgb(201 162 39 / 0.7);
  box-shadow:
    0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 1.2) rgb(0 0 0 / 0.55),
    inset 0 calc(var(--gs-u-h) * 0.12) 0 rgb(255 255 255 / 0.14);
}
.tavern-rescue__faction-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--gs-u-h) * 0.12) calc(var(--gs-u-h) * 0.35) rgb(0 0 0 / 0.45));
}
.tavern-rescue__race-name {
  margin: 0;
  font-size: var(--gs-text-md);
  font-weight: 700;
  color: #e7d8bd;
  letter-spacing: 0.04em;
}
.tavern-rescue__stars {
  margin: 0;
  display: flex;
  justify-content: center;
}
.tavern-rescue__risk {
  margin: 0 0 calc(var(--gs-u-h) * 0.45);
  text-align: center;
  font-size: var(--gs-text-sm);
  color: #e9c886;
}
.tavern-rescue .tavern-pack-shop__actions {
  justify-content: center;
}
.tavern-rescue__action .tavern-recruit-buy {
  margin-top: 0;
}
.tavern-rescue__hud.armory-forge__hud {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: calc(var(--gs-u-h) * 1.35) 0 0;
}
.tavern-rescue__rate-breakdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gs-u-h) * 0.48);
}

.tavern-rescue__rate-breakdown .armory-forge__rate-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}