@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

/* Screen Too Small Error */
.screen-too-small {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  z-index: 999999;
}

.screen-too-small h1 {
  font-size: 12vw;
  color: #fbbf24;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.screen-too-small p {
  font-size: 6vw;
  color: #e5e7eb;
  margin: 0;
  line-height: 1.4;
}

.screen-too-small-hint {
  font-size: 5vw !important;
  color: #9ca3af !important;
  font-style: italic;
}

/* Tab Inactive Error */
.tab-inactive {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  z-index: 999999;
}

.tab-inactive h1 {
  font-size: 2.5rem;
  color: #fbbf24;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-inactive p {
  font-size: 1.25rem;
  color: #e5e7eb;
  margin: 0;
  line-height: 1.4;
}

.tab-inactive-hint {
  font-size: 1rem !important;
  color: #9ca3af !important;
  font-style: italic;
}

/* Global Styles */
* {
  font-family: 'Metamorphous', serif;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #3e2723;
  margin: 0;
}

/* ===== FIXED 1920x1080 VIRTUAL RESOLUTION ===== */
#game-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Black letterbox bars */
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  overflow: visible;
  transform: scale(var(--game-scale, 1));
}

#game-container main {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: visible;
}

/* Typography */
h1 {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #ffffff;
  letter-spacing: 0.5px;
}

h2 {
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #f3f4f6;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.125rem;
}

.noscroll {
  overflow: hidden !important;
}

/* Prevent overflow when modal is open */
body:has(.unit-modal-backdrop) #store,
body:has(.unit-modal-backdrop) #dungeon,
body:has(.unit-modal-backdrop) {
  overflow: hidden !important;
}

/* Remove transforms that create containing blocks for position: fixed */
body:has(.unit-modal-backdrop) #store *:not(.unit-modal-backdrop):not(.unit-modal-backdrop *),
body:has(.unit-modal-backdrop) #dungeon *:not(.unit-modal-backdrop):not(.unit-modal-backdrop *) {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  perspective: none !important;
}

.inner {
  max-width: 960px;
  margin: 0 auto;
  overflow: visible !important;
  position: relative;
  transform: scale(0.9);
  transform-origin: top center;
}

.logo {
  max-width: 600px;
  margin-top: -75px;
  margin-bottom: -100px;
}

#hero-party {
  padding-bottom: 0;
  padding-left: 50px;
}

/* Enemy Party Title */
#enemy-party h1 {
  color: #fca5a5;
}

#enemy-party {
  padding-bottom: 0;
  padding-left: 50px;
}

#enemy-party-loot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 0;
  padding-left: 50px;
}

/* Loot Modal */
.loot-modal-backdrop {
  position: absolute;
  top: 150px;
  left: 31%;
  z-index: 70000;
}

.loot-modal-content {
  background: rgba(20, 20, 30, 0.98);
  border: 3px solid #8b5a2b;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  max-height: 864px;
  overflow-y: auto;
}

.loot-modal-content .more,
.loot-modal-content .prev {
  max-height: 40px;
  background: #5D4037;
  padding-top: 8px;
}

.loot-modal-content .more:disabled,
.loot-modal-content .prev:disabled {
  opacity: 0;
  cursor: auto;
}

#dungeon .combatants {
  width: 922px;
  min-width: 922px;
}

#store {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
}

#store.merchant {
  background-image: url(/img/bg/merchant.webp);
}

#store.tavern {
  background-image: url(/img/bg/tavern.webp);
}

#store.temple {
  background-image: url(/img/bg/temple.webp);
}

/* Tavern Styles */
.tavern-content {
  max-width: 960px;
  margin: 0 auto;
}

.tavern-sidebar {
  background: linear-gradient(135deg, rgba(222, 184, 135, 0.8) 0%, rgba(205, 164, 116, 0.8) 100%);
  border: 3px solid rgba(139, 90, 43, 0.9);
  border-radius: 13px;
  padding: 16px;
  padding-bottom: 32;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
  min-width: 200px;
}

.tavern-sidebar .minions-for-hire {
  margin-top: -40px;
  margin-bottom: -40px;
  width: 275px;
}

.tavern-sidebar h2 {
  color: #3e2723;
  font-size: 20px;
  text-align: center;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
}

.tavern-main h1 {
  color: #3e2723;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
  -webkit-text-stroke: 0;
}

.tavern-main h2 {
  color: #5d4037;
  font-size: 1.44rem;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 0;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
  -webkit-text-stroke: 0;
}

.tavern-main-inner {
  background: linear-gradient(135deg, rgba(222, 184, 135, 0.8) 0%, rgba(205, 164, 116, 0.8) 100%);
  border: 3px solid rgba(139, 90, 43, 0.9);
  border-radius: 13px;
  padding: 10px 32px 24px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

.tavern-minion-card {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border: 2px solid rgba(139, 90, 43, 0.8);
  border-radius: 10px;
  padding: 13px;
  width: 144px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.tavern-minion-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.9);
}

.tavern-card-portrait {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(139, 90, 43, 0.6);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tavern-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.tavern-card-emoji {
  font-size: 51px;
}

.tavern-card-price {
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.9) 0%, rgba(101, 67, 33, 0.9) 100%);
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 16px;
  padding: 5px 13px;
  font-weight: bold;
  font-size: 13px;
  color: #ffd700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease;
  user-select: none;
}

.tavern-card-price:hover {
  transform: scale(1.05);
  border-color: rgba(255, 215, 0, 0.9);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.tavern-hero-card {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border: 2px solid rgba(139, 90, 43, 0.8);
  border-radius: 10px;
  padding: 13px;
  width: 144px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  position: relative;
}

.tavern-hero-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.9);
}

/* Hero Card Wrapper */
.hero-card-wrapper {
  position: relative;
  display: inline-block;
}

/* Hero Card Disabled Tooltip */
.hero-card-disabled-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 8px 12px;
  min-width: max-content;
  max-width: 250px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(239, 68, 68, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  white-space: normal;
  font-size: 12px;
  color: #fca5a5;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.hero-card-wrapper:hover .hero-card-disabled-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.tavern-hero-portrait {
  width: 112px;
  height: 112px;
  /* border: 2px solid rgba(139, 90, 43, 0.6); */
  /* border-radius: 10px; */
  /* background: linear-gradient(to bottom right, var(--bg-start), var(--bg-end)); */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.tavern-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.tavern-hero-emoji {
  font-size: 64px;
}

.tavern-hero-hp-section {
  width: 100%;
}

.tavern-hero-hp-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
}

.tavern-hero-hp-bar-bg {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(139, 90, 43, 0.4);
}

.tavern-hero-hp-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 3px;
}

.tavern-hero-hp-bar.high {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.tavern-hero-hp-bar.medium {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.tavern-hero-hp-bar.low {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.tavern-hero-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  white-space: nowrap;
}

.tavern-hero-name {
  font-size: 14px;
  font-weight: bold;
  color: #3e2723;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.tavern-hero-class {
  font-size: 11px;
  font-weight: 600;
  color: #6b4423;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tavern-hero-rooms {
  font-size: 11px;
  font-weight: 600;
  color: #3e2723;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.tavern-hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  padding: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-top: 4px;
}

.tavern-stat-item {
  text-align: center;
}

.tavern-stat-label {
  font-size: 9px;
  color: #5d4037;
  font-weight: 600;
  margin-bottom: 2px;
}

.tavern-stat-value {
  font-size: 14px;
  font-weight: bold;
  color: #3e2723;
}

.tavern-party-card {
  cursor: default !important;
  opacity: 1 !important;
}

.tavern-party-card:hover {
  transform: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(139, 90, 43, 0.8) !important;
}

.tavern-party-card-empty {
  background: linear-gradient(135deg, rgba(160, 160, 160, 0.3) 0%, rgba(140, 140, 140, 0.3) 100%);
  border: 2px dashed rgba(139, 90, 43, 0.4) !important;
  cursor: default !important;
  opacity: 0.5 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tavern-party-card-empty:hover {
  transform: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(139, 90, 43, 0.4) !important;
}

.tavern-party-empty {
  font-size: 11px;
  font-weight: 600;
  color: rgba(101, 67, 33, 0.6);
  text-transform: uppercase;
  text-align: center;
}

/* Small Minion Cards (below party heroes) */
.tavern-minion-card-small {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(220, 200, 180, 1) 0%, rgba(200, 180, 160, 1) 100%);
  border: 2px solid rgba(139, 90, 43, 0.8);
  padding: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.tavern-minion-card-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 215, 0, 0.8);
  z-index: 999;
}

.tavern-minion-portrait-small {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.tavern-minion-portrait-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.tavern-minion-emoji-small {
  font-size: 38px;
}

.tavern-minion-name-small {
  font-size: 9px;
  font-weight: bold;
  color: #3e2723;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* Smaller minions in tavern view */
.tavern .tavern-minion-card-small {
  padding: 4px;
  border-radius: 6px;
}

.tavern .tavern-minion-portrait-small {
  width: 40px;
  height: 40px;
}

.tavern .tavern-minion-emoji-small {
  font-size: 28px;
}

/* Minion Health and Energy Bars */
.minion-bars-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 2px;
}

.minion-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.minion-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.minion-hp-bar {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.minion-hp-bar.medium {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.minion-hp-bar.low {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.minion-energy-bar {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

.minion-energy-bar.full {
  background: linear-gradient(90deg, #a855f7 0%, #9333ea 100%);
  box-shadow: 0 0 4px rgba(168, 85, 247, 0.6);
}

/* Full Minion Card on Hover */
.tavern-minion-hover-card {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.tavern-minion-card-small:hover .tavern-minion-hover-card {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.tavern-leave-button {
  margin-top: 16px;
  background: linear-gradient(180deg, #8b5a2b 0%, #654321 100%);
  font-size: 19px;
  padding: 10px 26px;
}

/* Temple Styles */
.temple-leave-button {
  margin-top: 16px;
  background: linear-gradient(180deg, #780d07 0%, #5a120f 100%);
  font-size: 19px;
  padding: 10px 26px;
}

.temple-leave-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #780d07 0%, #5a120f 100%);
}

.temple-content {
  padding: 0 32px 0;
  max-width: 960px;
  margin: 0 auto;
}

.temple-healing-item {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.95) 0%, rgba(222, 184, 135, 0.95) 100%);
  border: 2px solid rgba(139, 90, 43, 0.8);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  position: relative;
  min-height: 80px;
}

.temple-healing-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.temple-healing-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 6px 12px;
  min-width: max-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 8px rgba(59, 130, 246, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  white-space: nowrap;
  font-size: 12px;
  color: #f1f5f9;
  font-weight: 600;
}

.temple-healing-item:hover .temple-healing-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.temple-healing-portrait {
  display: flex;
  overflow: hidden;
}

.temple-healing-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.temple-healing-emoji {
  font-size: 42px;
}

.temple-healing-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.temple-healing-name {
  font-size: 18px;
  font-weight: bold;
  color: #1a0f08;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 1px rgba(255, 255, 255, 0.5);
}

.temple-healing-hp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.temple-hp-bar-bg {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  height: 16px;
  overflow: hidden;
  border: 2px solid rgba(139, 90, 43, 0.5);
}

.temple-hp-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  transition: width 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.temple-hp-text {
  font-size: 13px;
  color: #1a0f08;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.temple-healing-price {
  position: absolute;
  top: -14px;
  right: -20px;
}

/* Heal All Item */
.temple-heal-all {
  background: linear-gradient(135deg, rgba(255, 237, 179, 0.95) 0%, rgba(255, 215, 0, 0.3) 100%);
  border: 2px solid rgba(255, 215, 0, 0.6);
  padding: 0;
}

.temple-heal-all:hover {
  border-color: rgba(255, 215, 0, 0.9);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

.temple-healing-icon-large {
  font-size: 42px;
  filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.6));
}

.temple-heal-all-buy {
  margin-right: -30px;
  margin-top: -80px;
}

.temple-heal-all-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.temple-heal-all-desc {
  font-size: 10px;
  color: #1a0f08;
  font-style: italic;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Temple Individual Heal Button */
.temple-heal-button {
  background: linear-gradient(135deg, rgba(94, 171, 111, 0.95) 0%, rgba(72, 140, 88, 0.95) 100%);
  border: 2px solid rgba(50, 100, 60, 0.8);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.temple-heal-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 171, 111, 0.4);
  background: linear-gradient(135deg, rgba(110, 190, 130, 0.95) 0%, rgba(85, 155, 100, 0.95) 100%);
}

/* Temple Minion Compact Cards */
.temple-minion-compact {
  background: linear-gradient(135deg, rgba(220, 200, 180, 0.9) 0%, rgba(200, 180, 160, 0.9) 100%);
  border: 2px solid rgba(139, 90, 43, 0.6);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  position: relative;
  width: 56px;
}

.temple-minion-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.temple-minion-compact-portrait {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(139, 90, 43, 0.5);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.temple-minion-compact-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.temple-minion-compact-emoji {
  font-size: 22px;
}

.temple-minion-compact-hp {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(139, 90, 43, 0.4);
}

.temple-minion-compact-hp-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  transition: width 0.3s ease;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.temple-minion-compact-price {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 12px;
}

/* Temple Minion Hover Card */
.temple-minion-hover-card {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.temple-minion-compact:hover .temple-minion-hover-card {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.temple-blessing-card {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.95) 0%, rgba(222, 184, 135, 0.95) 100%);
  border: 2px solid rgba(139, 90, 43, 0.8);
  border-radius: 10px;
  padding: 16px;
  width: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.temple-blessing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.temple-blessing-icon {
  font-size: 64px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.temple-blessing-name {
  font-size: 14px;
  font-weight: bold;
  color: #3e2723;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  line-height: 1.3;
}

.temple-blessing-desc {
  font-size: 11px;
  color: #6b4423;
  text-align: center;
  font-weight: 600;
}

.temple-party-portrait {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.9) 0%, rgba(222, 184, 135, 0.9) 100%);
  border: 2px solid rgba(139, 90, 43, 0.7);
  border-radius: 10px;
  padding: 12px;
  width: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.temple-party-portrait-img {
  width: 112px;
  height: 112px;
  border: 2px solid rgba(139, 90, 43, 0.6);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.temple-party-portrait-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.temple-party-hp {
  font-size: 16px;
  font-weight: bold;
  color: #3e2723;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  background: rgba(34, 197, 94, 0.3);
  border: 2px solid rgba(34, 197, 94, 0.6);
  border-radius: 6px;
  padding: 4px 12px;
  min-width: 60px;
  text-align: center;
}

/* Merchant Styles */
.merchant-tab {
  background: linear-gradient(135deg, rgba(120, 90, 60, 0.85) 0%, rgba(90, 70, 50, 0.85) 100%);
  border: 2px solid rgba(139, 90, 43, 0.5);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #c9b299;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  flex: 1;
}

.merchant-tab:hover {
  background: linear-gradient(135deg, rgba(200, 170, 130, 0.75) 0%, rgba(170, 140, 100, 0.75) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border-color: rgba(139, 90, 43, 0.6);
}

.merchant-tab-active {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  color: #3e2723;
  border: 3px solid rgba(139, 90, 43, 0.9);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

.merchant-tab-active:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.merchant-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 0;
}

.merchant-item-wrapper {
  position: relative;
}

.merchant-item-wrapper .inventory-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 100%;
  transform: translate(8px, 0);
  z-index: 10000;
}

.merchant-item-wrapper:has(.merchant-item-card:hover) .inventory-tooltip {
  opacity: 1;
  transform: translate(12px, 0);
}

.merchant-comparison-tooltip {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 100%;
  transform: translate(280px, 0);
  z-index: 10001;
  pointer-events: none;
}

.merchant-comparison-tooltip .inventory-tooltip {
  position: relative;
  left: 0;
  bottom: 0;
  transform: none;
  z-index: 10002;
}

.merchant-item-wrapper:has(.merchant-item-card:hover) .merchant-comparison-tooltip .inventory-tooltip {
  opacity: 1;
  transform: none;
}

.equipped-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(22, 163, 74, 0.95) 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 10003;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.merchant-item-wrapper:has(.merchant-item-card:hover) .equipped-label {
  opacity: 1;
}

.merchant-item-card {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.95) 0%, rgba(222, 184, 135, 0.95) 100%);
  border: 2px solid rgba(139, 90, 43, 0.7);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  min-height: 140px;
}

.merchant-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.merchant-item-name {
  font-size: 13px;
  font-weight: bold;
  color: #3e2723;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  line-height: 1.2;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.merchant-item-icon {
  font-size: 48px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.merchant-gold-display {
  background: linear-gradient(135deg, rgba(101, 67, 33, 0.9) 0%, rgba(62, 39, 35, 0.9) 100%);
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.merchant-gold-label {
  font-size: 16px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.merchant-party-portrait {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.9) 0%, rgba(222, 184, 135, 0.9) 100%);
  border: 2px solid rgba(139, 90, 43, 0.7);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.merchant-party-portrait-img {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(139, 90, 43, 0.6);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.merchant-party-portrait-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.merchant-party-emoji {
  font-size: 42px;
}

.merchant-party-name {
  font-size: 11px;
  font-weight: bold;
  color: #3e2723;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

/* Merchant Hero Tabs */
.merchant-hero-tab {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.7) 0%, rgba(222, 184, 135, 0.7) 100%);
  border: 2px solid rgba(139, 90, 43, 0.6);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.merchant-hero-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.6);
}

.merchant-hero-tab-active {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.merchant-hero-tab-portrait {
  display: flex;
  overflow: hidden;
}

.merchant-hero-tab-emoji {
  font-size: 32px;
}

.merchant-hero-tab-name {
  font-size: 9px;
  font-weight: bold;
  color: #3e2723;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* Make minions smaller in merchant view */
.merchant-minions-row .tavern-minion-card-small {
  padding: 2px;
  border-radius: 4px;
  border-width: 1px;
  cursor: pointer;
}

.merchant-minions-row .tavern-minion-portrait-small {
  width: 24px;
  height: 24px;
}

.merchant-minions-row .tavern-minion-emoji-small {
  font-size: 16px;
}

/* Highlight selected minion */
.merchant-minion-selected .tavern-minion-card-small {
  border-color: rgba(255, 215, 0, 0.9);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Graveyard - Standalone (fullscreen) */
#graveyard {
  background-image: url(/img/bg/graveyard.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#graveyard h1 {
  color: #9ca3af;
}

#graveyard .for-sale {
  cursor: pointer;
}

/* Graveyard - Embedded (in town) */
.graveyard-embedded {
  margin-top: 24px;
}

.graveyard-embedded h1 {
  color: #9ca3af;
}

/* Graveyard Stats */
#graveyard-stats {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(156, 163, 175, 0.1);
}

#graveyard-stats li {
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #e5e7eb;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#graveyard-stats li.span-2 {
  grid-column: span 2;
}

#graveyard-stats li:hover {
  background: linear-gradient(135deg, rgba(75, 85, 99, 0.5) 0%, rgba(55, 65, 81, 0.5) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#graveyard .hero {
  image-rendering: pixelated;
  height: 300px;
  opacity: 0.75;
  margin-bottom: 15px;
  filter: grayscale(100%) drop-shadow(0 0 8px rgba(100, 200, 255, 0.8)) drop-shadow(0 0 12px rgba(100, 200, 255, 0.4));
  /* animation: float-ghost 3s ease-in-out infinite; */
}

@keyframes float-ghost {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  50% {
    transform: translateY(-10px);
    opacity: 0.75;
  }
}

#graveyard .grave {
  border: 4px solid #2a2a2a;
  border-radius: 12px;
  background: linear-gradient(135deg, #555 0%, #999 50%);
  padding: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
  border-radius: 40% 40% 4px 4px / 25% 25% 4px 4px;
  max-width: 200px;
}

#graveyard .grave h3 {
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(180deg, #fbbf24 0%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: 0.4px #000000;
  margin: 0;
}

#graveyard .grave .epitaph {
  font-style: italic;
  color: #333;
  margin: 15px 0;
  border-top: 1px solid #333;
  padding: 10px 0;
  border-bottom: 1px solid #333;
}

#graveyard .grave p {
  padding-top: 5px;
  margin: 0;
  font-size: 15px;
  color: #3a2a1a;
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.3),
    -1px -1px 0 rgba(0, 0, 0, 0.2);
}

/* Graveyard hover card */
.graveyard-hero-hover-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(30%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
  min-width: 280px;
}

#graveyard .hero:hover+.graveyard-hero-hover-card,
.graveyard-hero-hover-card:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Ensure hover card doesn't have normal hero-card hover effects */
.graveyard-hero-hover-card .tavern-hero-card {
  pointer-events: none;
}

#town {
  background-image: url(/img/bg/town.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#town.select-hero1 {
  background-image: url(/img/bg/selectHero.webp);
}

#town.select-hero2 {
  background-image: url(/img/bg/selectHero2.webp);
}

#town.select-hero3 {
  background-image: url(/img/bg/selectHero3.webp);
}

/* Horizontal layout for town */
#town.layout-horizontal {
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 900px;
}

/* Align town nav container to space between top and bottom */
#town.layout-horizontal .town-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  padding-bottom: 240px;
}

/* Hero sprites aligned to bottom in horizontal town */
#town.layout-horizontal .town-nav-container>div[class*="HStack"] {
  align-self: flex-end;
}

.town-nav-container {
  padding-left: 50px;
  position: relative;
}

.town-nav-container>*:last-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  pointer-events: none;
}

.town-nav-container>*:last-child>* {
  pointer-events: auto;
}

.town-nav-container button {
  font-size: 14px;
}

.town-nav-container .which-dungeon {
  font-size: 18px;
}

#dungeon {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1920px;
  height: 900px;
  /* height: 1080px; */
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#dungeon.dungeon-bg1 {
  background-image: url(/img/bg/dungeon1.webp);
}

#dungeon.dungeon-bg2 {
  background-image: url(/img/bg/dungeon2.webp);
}

#dungeon.dungeon-bg3 {
  background-image: url(/img/bg/dungeon3.webp);
}

#dungeon.dungeon-bg4 {
  background-image: url(/img/bg/dungeon4.webp);
}

#dungeon.dungeon-bg5 {
  background-image: url(/img/bg/dungeon5.webp);
}

#dungeon.dungeon-bg6 {
  background-image: url(/img/bg/dungeon6.webp);
}

#dungeon.dungeon-bg7 {
  background-image: url(/img/bg/dungeon7.webp);
}

#dungeon.dungeon-bg8 {
  background-image: url(/img/bg/dungeon8.webp);
}

#dungeon.dungeon-bg9 {
  background-image: url(/img/bg/dungeon9.webp);
}

#dungeon.dungeon-bg10 {
  background-image: url(/img/bg/dungeon10.webp);
}

#dungeon .battle-event {
  color: white;
}

#dungeon .battle-event.damage {
  color: #ff6b6b;
}

#dungeon .battle-event.crit {
  color: yellow;
}

.ultimate,
#dungeon .battle-event.ult {
  color: cyan;
}

#dungeon .battle-event.killed {
  color: red;
}

#dungeon .battle-event.spell {
  color: orange;
}

#dungeon .choices button {
  font-size: 30px;
}

/* Battle Log */
.battle-log-wrapper {
  margin-bottom: 20px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Wider battle log in horizontal layout */
#dungeon.layout-horizontal .battle-log-wrapper {
  max-width: 1200px;
  width: 1728px;
}

.battle-log-container {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 0px;
  position: relative;
}

.battle-log-container::-webkit-scrollbar {
  width: 10px;
}

.battle-log-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.battle-log-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.battle-log-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.battle-log-container h1 {
  font-size: 1.75rem;
}

.battle-log-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  z-index: 1;
}

.battle-log-toggle:hover:not(:disabled) {
  background: transparent;
  transform: translateY(-40%);
}

/* Battle Log Floating Overlay */
.battle-log-floating>div::-webkit-scrollbar {
  width: 10px;
}

.battle-log-floating>div::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.battle-log-floating>div::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.battle-log-floating>div::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Position tooltips below hovered element in battle log */
.battle-log-floating .inventory-tooltip {
  position: absolute !important;
  z-index: 999999 !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  margin-top: 8px !important;
}

/* Battle log container tooltips use absolute positioning to appear above floating panel */
.battle-log-container .inventory-tooltip {
  position: absolute !important;
  z-index: 9999999 !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
}

.battle-log-floating .inventory-icon-wrapper,
.battle-log-container .inventory-icon-wrapper {
  position: relative;
}

.battle-log-floating .inventory-icon-wrapper:hover .inventory-tooltip,
.battle-log-container .inventory-icon-wrapper:hover .inventory-tooltip {
  opacity: 1 !important;
}

.battle-event {
  padding: 8px 12px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Stats Bar */
.stats-bar {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  z-index: 100;
  padding: 5px 20px 12px 20px;
  margin: 0 0 18px 0;
  font-size: 1.25rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  list-style-type: none;
  vertical-align: center;
}

/* Stats bar remains visible when unit modal is open */

.stats-bar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.stats-bar-left {
  justify-self: start;
}

.stats-bar-center {
  justify-self: center;
}

.stats-bar-right {
  justify-self: end;
}

.stats-bar .stat {
  margin-right: 20px;
}

.stats-bar button {
  font-size: 32px;
  padding: 12px 40px;
  margin: 0;
  margin-top: -5px;
  font-weight: bold;
}

.stats-bar .danger {
  background: maroon;
}

.dungeon-button {
  background: maroon;
}

.stats-bar .danger:hover:not(:disabled),
.dungeon-button:hover:not(:disabled) {
  background: red;
  background-color: red;
}

/* Stats Bar */
.playback-controls * {
  margin-right: 12px;
}

.playback-controls a {
  font-size: 120%;
  text-decoration: none;
}

/* Unit Card Styles */
.unit-card {
  border: 3px solid;
  border-radius: 12px;
  padding: 16px;
  min-width: 200px;
  width: 220px;
  max-width: 320px;
  transition: all 0.2s ease;
  align-self: flex-start;
  height: fit-content;
}

.unit-card:hover,
.unit-card.has-floating-numbers,
.top {
  z-index: 999;
}

.unit-card .disclosure {
  position: absolute;
  right: 0;
  top: 4px;
  font-size: 12px;
  padding: 4px 8px 2px 8px;
  color: #000;
  background: none;
  border: none;
  box-shadow: none;
}

.unit-card .disclosure:hover {
  background: none;
  border: none;
  box-shadow: none;
  transform: translateY(1px);
}

/* Unit Card Modal Styles */
.unit-modal-backdrop {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px 20px;
  overflow: hidden;
}

/* Hide overflow on town and dungeon when modal is open */
#town:has(.unit-modal-backdrop),
#dungeon:has(.unit-modal-backdrop) {
  overflow: hidden !important;
}

/* Hide unit cards in party tray when modal or event is open, but keep tray background */
body:has(.unit-modal-backdrop.unit-modal-horizontal) .party-horizontal-tray .unit-card,
body:has(.unit-modal-backdrop.unit-modal-horizontal) .party-horizontal-tray .unit-card *,
body:has(.unit-modal-backdrop.unit-modal-horizontal) .party-horizontal-tray .party-member-group,
body:has(.unit-modal-backdrop.unit-modal-horizontal) .party-horizontal-tray .party-member-group *,
body:has(.unit-modal-backdrop.settings-modal) .party-horizontal-tray .unit-card,
body:has(.unit-modal-backdrop.settings-modal) .party-horizontal-tray .unit-card *,
body:has(.unit-modal-backdrop.settings-modal) .party-horizontal-tray .party-member-group,
body:has(.unit-modal-backdrop.settings-modal) .party-horizontal-tray .party-member-group *,
body:has(.unit-modal-backdrop.leaderboard-modal) .party-horizontal-tray .unit-card,
body:has(.unit-modal-backdrop.leaderboard-modal) .party-horizontal-tray .unit-card *,
body:has(.unit-modal-backdrop.leaderboard-modal) .party-horizontal-tray .party-member-group,
body:has(.unit-modal-backdrop.leaderboard-modal) .party-horizontal-tray .party-member-group *,
#dungeon.layout-horizontal:has(.event-card-parchment) .party-horizontal-tray .unit-card,
#dungeon.layout-horizontal:has(.event-card-parchment) .party-horizontal-tray .unit-card *,
#dungeon.layout-horizontal:has(.event-card-parchment) .party-horizontal-tray .party-member-group,
#dungeon.layout-horizontal:has(.event-card-parchment) .party-horizontal-tray .party-member-group * {
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border: none !important;
}

/* Horizontal layout modal - positioned above party tray */
.unit-modal-backdrop.unit-modal-horizontal {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
  margin: 0 !important;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  justify-content: center;
  display: flex !important;
  padding: 20px;
  z-index: 10000 !important;
}

.unit-modal-backdrop.unit-modal-horizontal .unit-modal-content {
  z-index: 10000001;
  display: flex !important;
}

.unit-modal-backdrop.unit-modal-horizontal .unit-card-modal {
  z-index: 10002;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  transform: scale(0.7);
  max-width: 576px;
  max-height: 972px;
  overflow-y: hidden;
}

.unit-modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1728px;
  max-height: 972px;
}

.unit-card-modal {
  width: 720px;
  max-width: 720px;
  height: fit-content;
  overflow: visible;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(139, 90, 43, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(0.8);
  border-width: 3px;
  padding: 20px;
  padding-right: 35px;
  position: relative;
  cursor: default;
}

.unit-card-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.4), rgba(139, 90, 43, 0.1));
  -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;
  pointer-events: none;
}

.unit-stats-container {
  display: none;
}

.unit-stats-container.with-disclosure {
  margin-top: 26px;
}

.unit-card-modal .unit-stats-container {
  display: flex;
  margin-left: auto;
  padding-right: 0;
}

.unit-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.unit-stat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.unit-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.unit-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #5d4037;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.unit-stat-label {
  font-size: 9px;
  font-weight: 600;
  color: #5d4037;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1;
}

.unit-modal-content .unit-card {
  min-width: 550px;
  min-height: 720px;
}

.unit-card-modal .unit-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.unit-card-modal .unit-header>div {
  width: 100%;
}

.unit-card-modal .unit-name,
.unit-card-modal .unit-subtitle {
  text-align: left;
  font-size: 0.8em;
}

.unit-card-modal .unit-name {
  font-size: 1.5em;
}

/* Modal-specific font scaling for long names - more generous than regular card */
.unit-card-modal .unit-name.name-long {
  font-size: 1.3em;
}

.unit-card-modal .unit-name.name-very-long {
  font-size: 1.1em;
}

.unit-card-modal .unit-name.name-extremely-long {
  font-size: 0.9em;
}

.unit-card-modal .inventory-header {
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid rgba(139, 90, 43, 0.3);
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.unit-card-modal .inventory-section {
  margin-top: 16px;
  padding: 12px;
  border-top: none;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%);
  border: 2px solid rgba(139, 90, 43, 0.4);
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.unit-card-modal .inventory-compact {
  gap: 6px;
}

.unit-card-modal .inventory-icon-wrapper {
  width: 44px;
  height: 44px;
}

.unit-card-modal .equipment-slot {
  width: 60px;
  height: 60px;
  border-width: 2px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.unit-card-modal .equipment-item,
.unit-card-modal .relic-item {
  border-radius: 6px;
}

.unit-card-modal .equipment-emoji,
.unit-card-modal .relic-emoji {
  font-size: 28px;
}

.unit-card-modal .equipment-empty {
  font-size: 9px;
  opacity: 0.5;
}

.unit-card-modal .relic-slot {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.unit-card-modal .relics-label {
  font-size: 10px;
  letter-spacing: 1px;
}

.unit-card-modal .equipment-grid {
  gap: 8px;
}

.unit-card-modal .equipment-row {
  gap: 8px;
}

.unit-card-modal .relics-grid {
  gap: 8px;
}

/* Position tooltips to the LEFT in modal to prevent cutoff */
.unit-card-modal .inventory-tooltip,
.unit-card-modal .equipment-item .inventory-tooltip,
.unit-card-modal .relic-item .inventory-tooltip {
  left: auto !important;
  right: 100% !important;
  bottom: auto !important;
  top: 0 !important;
  transform: translate(-8px, 0) !important;
}

.unit-card-modal .inventory-icon-wrapper:hover .inventory-tooltip,
.unit-card-modal .equipment-slot:hover .inventory-tooltip,
.unit-card-modal .relic-slot:hover .inventory-tooltip,
.unit-card-modal .equipment-item:hover .inventory-tooltip,
.unit-card-modal .relic-item:hover .inventory-tooltip {
  transform: translate(-12px, 0) !important;
}

/* Position comparison tooltip in modal to the left */
.unit-card-modal .inventory-comparison-tooltip {
  right: 100% !important;
  left: auto !important;
  top: 0 !important;
  bottom: auto !important;
  transform: translate(-280px, 0) !important;
}

.unit-card-modal .comparison-tooltip-content .inventory-tooltip {
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  transform: none !important;
  position: relative !important;
}

.unit-card-modal .inventory-comparison-tooltip .equipped-label {
  left: 50%;
  transform: translateX(-50%);
}

/* Better spacing for modal HStack sections */
.unit-card-modal>div>div[class*="HStack"] {
  gap: 16px;
  align-items: flex-start;
}

/* Ensure VStack and HStack in unit cards take full width */
.unit-card>div[class*="VStack"],
.unit-card>div[class*="HStack"] {
  width: 100% !important;
}

.unit-card>div[class*="HStack"]>div[class*="VStack"] {
  width: 100% !important;
  flex: 1 !important;
}

.unit-card-modal .inventory-compact.no-padding {
  gap: 5px;
  margin-top: 6px;
}

.unit-card-modal .inventory-icon {
  font-size: 24px;
}

.unit-card-modal .spell-cooldown-number {
  font-size: 14px;
  font-weight: bold;
}

/* Modal-specific spells tab styling */
.unit-card-modal .spells-section,
.unit-card-modal .buffs-section {
  padding: 12px;
}

.unit-card-modal .spell-card,
.unit-card-modal .buff-card {
  padding: 12px;
  gap: 12px;
}

.unit-card-modal .spell-icon,
.unit-card-modal .buff-icon {
  font-size: 36px;
}

.unit-card-modal .spell-name,
.unit-card-modal .buff-name {
  font-size: 16px;
}

.unit-card-modal .spell-description,
.unit-card-modal .buff-stats {
  font-size: 13px;
}

.unit-card-modal .spell-cooldown,
.unit-card-modal .buff-duration {
  font-size: 11px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.75) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(0.8) translateY(0);
  }
}

/* Ensure all child elements within modal are positioned correctly */
.unit-card-modal>* {
  position: relative;
  z-index: 1;
}

/* Modal Tabs */
.modal-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
  justify-content: flex-start;
}

.modal-tab {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(139, 90, 43, 0.3);
  border-radius: 8px;
  padding: 8px 24px;
  margin-top: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-tab:hover {
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.modal-tab.active {
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.5) 0%, rgba(139, 90, 43, 0.3) 100%);
  border-color: rgba(139, 90, 43, 0.7);
  color: #ffffff;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: none;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Spells Tab Content */
.spells-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spells-section,
.buffs-section {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%);
  border: 2px solid rgba(139, 90, 43, 0.4);
  border-radius: 10px;
  padding: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.spells-section .inventory-header,
.buffs-section .inventory-header {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.spells-grid,
.buffs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spell-card,
.buff-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(139, 90, 43, 0.3);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}

.spell-card:hover,
.buff-card:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(139, 90, 43, 0.5);
}

.spell-icon,
.buff-icon {
  font-size: 48px;
  flex-shrink: 0;
  line-height: 1;
}

.spell-info,
.buff-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spell-name,
.buff-name {
  font-size: 18px;
  font-weight: bold;
  color: #d4a574;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.spell-description,
.buff-stats {
  font-size: 14px;
  color: #c9b896;
  line-height: 1.4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.spell-cooldown,
.buff-duration {
  font-size: 12px;
  color: #b89968;
  font-weight: bold;
  margin-top: 4px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.no-spells,
.no-buffs {
  text-align: center;
  padding: 32px;
  font-size: 14px;
  color: #a08560;
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.unit-card.player {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.minion {
  background: linear-gradient(135deg, rgba(220, 200, 180, 0.95) 0%, rgba(200, 180, 160, 0.95) 100%);
  border-color: rgba(139, 90, 43, 0.7);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.2);
  color: #3e2723;
}

.unit-card.player.warrior {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.mage {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.rogue {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.deathknight {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.necromancer {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.unit-card.player.reaper {
  background: linear-gradient(135deg, rgba(245, 222, 179, 0.98) 0%, rgba(222, 184, 135, 0.98) 100%);
  border-color: rgba(139, 90, 43, 0.9);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 90, 43, 0.3);
  color: #3e2723;
}

.graveyard-hero-wrapper {
  display: flex;
  align-items: flex-end;
}