/* =============================================================================
   War Pet — Styles
   ============================================================================= */

/* ── Pet Widget (Profile) ──────────────────────────────────────────────────── */

.inv-pet-widget {
	background: #0d1424;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 1.5rem;
	position: relative;
}

/* Prominent variant — clean, no heavy borders */
.inv-pet-widget--prominent {
	border: none;
	background: rgba(13, 20, 36, 0.6);
	padding: 1.25rem;
}

/* Adopt variant — dashed border CTA */
.inv-pet-widget--adopt {
	border: 2px dashed rgba(245, 158, 11, 0.2);
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.02) 0%, #0d1424 100%);
}

/* ── Hero Layout (Prominent Pet Card) ──────────────────────────────────────── */

.inv-pet-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.inv-pet-hero {
		flex-direction: row;
		align-items: flex-start;
	}
}

/* Sprite Arena — large centered sprite with mood ring */
.inv-pet-hero__arena {
	position: relative;
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-hero__sprite {
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	image-rendering: pixelated;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.03);
	position: relative;
	z-index: 1;
}

.inv-pet-hero__mood-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--mood-color, #6b7494);
	opacity: 0.4;
	animation: inv-pet-mood-pulse 3s ease-in-out infinite;
}

@keyframes inv-pet-mood-pulse {
	0%, 100% { transform: scale(1); opacity: 0.3; }
	50%      { transform: scale(1.05); opacity: 0.6; }
}

/* Info Column */
.inv-pet-hero__info {
	flex: 1;
	min-width: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.inv-pet-hero__info {
		text-align: left;
	}
}

.inv-pet-hero__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	color: #f0f4ff;
	line-height: 1.1;
	margin: 0 0 0.5rem;
	letter-spacing: 0.02em;
}

.inv-pet-hero__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.inv-pet-hero__meta {
		justify-content: flex-start;
	}
}

.inv-pet-hero__mood-tag {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
}

/* ── Old header (kept for small variants) ──────────────────────────────────── */

.inv-pet-widget__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.inv-pet-widget__sprite {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	image-rendering: pixelated;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.03);
	flex-shrink: 0;
}

.inv-pet-widget__sprite--mini {
	width: 32px;
	height: 32px;
	font-size: 1.25rem;
	border-radius: 0.25rem;
}

.inv-pet-widget__info {
	flex: 1;
	min-width: 0;
}

.inv-pet-widget__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: #f0f4ff;
	line-height: 1.2;
	margin: 0;
}

.inv-pet-widget__stage-badge {
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.15rem 0.5rem;
	border-radius: 9999px;
	background: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
}

.inv-pet-widget__stage-badge--lg {
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
}

.inv-pet-widget__mood {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.inv-pet-widget__mood-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.inv-pet-widget__mood-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	color: #6b7494;
}

/* ── XP Progress Bar ───────────────────────────────────────────────────────── */

.inv-pet-xp {
	margin-top: 0.75rem;
}

.inv-pet-xp--lg {
	margin-top: 1rem;
}

.inv-pet-xp__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.35rem;
}

.inv-pet-xp__text {
	font-family: 'Inter', sans-serif;
	font-size: 0.65rem;
	color: #6b7494;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.inv-pet-xp__value {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	color: #f59e0b;
}

.inv-pet-xp--lg .inv-pet-xp__text {
	font-size: 0.7rem;
}

.inv-pet-xp--lg .inv-pet-xp__value {
	font-size: 0.85rem;
}

.inv-pet-xp__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	overflow: hidden;
}

.inv-pet-xp__bar--lg {
	height: 10px;
	border-radius: 5px;
}

.inv-pet-xp__fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #f59e0b, #f97316);
	transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* ── Stats Row ─────────────────────────────────────────────────────────────── */

.inv-pet-stats {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.inv-pet-stats--horizontal {
	gap: 1.5rem;
	justify-content: center;
}

@media (min-width: 768px) {
	.inv-pet-stats--horizontal {
		justify-content: flex-start;
	}
}

.inv-pet-stat {
	flex: 0 1 auto;
	text-align: center;
}

.inv-pet-stat__value {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: #f0f4ff;
	line-height: 1;
}

.inv-pet-stat__value--lg {
	font-size: 1.4rem;
}

.inv-pet-stat__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.55rem;
	color: #6b7494;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.15rem;
}

/* ── Action Buttons ────────────────────────────────────────────────────────── */

.inv-pet-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.inv-pet-actions--prominent {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.inv-pet-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.04);
	color: #f0f4ff;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.inv-pet-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
}

.inv-pet-btn:active {
	transform: scale(0.97);
}

.inv-pet-btn--lg {
	font-size: 0.85rem;
	padding: 0.65rem 1.25rem;
	border-radius: 0.625rem;
}

.inv-pet-btn--feed {
	border-color: rgba(245, 158, 11, 0.3);
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.06);
}

.inv-pet-btn--feed:hover {
	background: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.5);
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.1);
}

.inv-pet-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

/* ── Adopt Form ────────────────────────────────────────────────────────────── */

.inv-pet-adopt {
	text-align: center;
	padding: 2rem 1rem;
}

.inv-pet-adopt__icon {
	font-size: 4rem;
	margin-bottom: 1rem;
	animation: inv-pet-bounce 1.5s ease-in-out infinite;
}

.inv-pet-adopt__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	color: #f0f4ff;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.inv-pet-adopt__desc {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	color: #6b7494;
	margin: 0 0 1.5rem;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

.inv-pet-adopt__form {
	display: flex;
	gap: 0.5rem;
	max-width: 360px;
	margin: 0 auto;
}

.inv-pet-adopt__input {
	flex: 1;
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	padding: 0.6rem 1rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: #f0f4ff;
	outline: none;
}

.inv-pet-adopt__input:focus {
	border-color: rgba(245, 158, 11, 0.5);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.inv-pet-adopt__input::placeholder {
	color: #3d4560;
}

.inv-pet-adopt__submit {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.6rem 1.5rem;
	background: #f59e0b;
	color: #080d1a;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	white-space: nowrap;
}

.inv-pet-adopt__submit:hover {
	opacity: 0.85;
}

.inv-pet-adopt__submit:active {
	transform: scale(0.97);
}

.inv-pet-adopt__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Thought Bubble ────────────────────────────────────────────────────────── */

.inv-pet-thought {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	font-size: 1.2rem;
	opacity: 0;
	animation: inv-pet-thought-pop 2s ease-in-out infinite;
}

/* ── Rename Modal ──────────────────────────────────────────────────────────── */

.inv-pet-rename-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(8, 13, 26, 0.85);
	backdrop-filter: blur(6px);
}

.inv-pet-rename-modal--active {
	display: flex;
}

.inv-pet-rename-modal__card {
	background: #111827;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	padding: 2rem;
	max-width: 360px;
	width: 90%;
	text-align: center;
}

.inv-pet-rename-modal__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: #f0f4ff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 1rem;
}

.inv-pet-rename-modal__input {
	width: 100%;
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	padding: 0.6rem 0.75rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: #f0f4ff;
	outline: none;
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.inv-pet-rename-modal__input:focus {
	border-color: rgba(245, 158, 11, 0.5);
}

.inv-pet-rename-modal__actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

/* ── Sidebar Mini Pet (Expanded) ───────────────────────────────────────────── */

.inv-sidebar-pet {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	margin-top: 0.5rem;
	text-decoration: none;
	border-radius: 0.375rem;
	transition: background 0.15s;
}

.inv-sidebar-pet:hover {
	background: rgba(255, 255, 255, 0.04);
}

.inv-sidebar-pet__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	color: #f0f4ff;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inv-sidebar-pet__streak {
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem;
	color: #f59e0b;
}

/* ── Sidebar Mini Pet (Collapsed — above avatars) ──────────────────────────── */

.inv-sidebar-pet-collapsed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(245, 158, 11, 0.15);
	text-decoration: none;
	transition: transform 0.15s;
}

.inv-sidebar-pet-collapsed:hover {
	transform: scale(1.08);
}

.inv-sidebar-pet-collapsed__sprite {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: 0.5rem;
}

@media (min-width: 1024px) {
	.inv-sidebar-pet-collapsed__sprite {
		width: 96px;
		height: 96px;
		font-size: 3.5rem;
		border-radius: 0.75rem;
	}
}

.inv-sidebar-pet-collapsed__sprite[data-mood="happy"]    { animation: inv-pet-bounce 1.5s ease-in-out infinite; }
.inv-sidebar-pet-collapsed__sprite[data-mood="neutral"]  { animation: inv-pet-idle 3s ease-in-out infinite; }
.inv-sidebar-pet-collapsed__sprite[data-mood="hungry"]   { animation: inv-pet-wobble 1.2s ease-in-out infinite; }
.inv-sidebar-pet-collapsed__sprite[data-mood="sad"]      { animation: inv-pet-droop 2.5s ease-in-out infinite; }
.inv-sidebar-pet-collapsed__sprite[data-mood="sleeping"] { animation: inv-pet-sleep 4s ease-in-out infinite; filter: grayscale(0.6); }

.inv-sidebar-pet-collapsed__streak {
	font-family: 'Inter', sans-serif;
	font-size: 0.55rem;
	font-weight: 600;
	color: #f59e0b;
	line-height: 1;
}

/* Hide collapsed pet when sidebar is expanded (same as avatars) */
.inv-sidebar--expanded .inv-sidebar-pet-collapsed {
	display: none;
}

/* ── Sprite Animations ─────────────────────────────────────────────────────── */

@keyframes inv-pet-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes inv-pet-idle {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

@keyframes inv-pet-wobble {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-5deg); }
	75%      { transform: rotate(5deg); }
}

@keyframes inv-pet-droop {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(2px) scale(0.97); }
}

@keyframes inv-pet-sleep {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.97); }
}

@keyframes inv-pet-thought-pop {
	0%, 60%, 100% { opacity: 0; transform: translateY(4px) scale(0.8); }
	70%, 90%      { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Mood modifiers on sprite ──────────────────────────────────────────────── */

.inv-pet-widget__sprite[data-mood="happy"],
.inv-pet-hero__sprite[data-mood="happy"]     { animation: inv-pet-bounce 1.5s ease-in-out infinite; }

.inv-pet-widget__sprite[data-mood="neutral"],
.inv-pet-hero__sprite[data-mood="neutral"]   { animation: inv-pet-idle 3s ease-in-out infinite; }

.inv-pet-widget__sprite[data-mood="hungry"],
.inv-pet-hero__sprite[data-mood="hungry"]    { animation: inv-pet-wobble 1.2s ease-in-out infinite; }

.inv-pet-widget__sprite[data-mood="sad"],
.inv-pet-hero__sprite[data-mood="sad"]       { animation: inv-pet-droop 2.5s ease-in-out infinite; }

.inv-pet-widget__sprite[data-mood="sleeping"],
.inv-pet-hero__sprite[data-mood="sleeping"]  { animation: inv-pet-sleep 4s ease-in-out infinite; filter: grayscale(0.6); }

/* ── Evolution Popup ───────────────────────────────────────────────────────── */

@keyframes inv-pet-evo-glow {
	0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.2); }
	50%      { box-shadow: 0 0 40px rgba(245, 158, 11, 0.5); }
}

.inv-pet-evo-sprite {
	font-size: 4rem;
	animation: inv-pet-bounce 1s ease-in-out infinite, inv-pet-evo-glow 2s ease-in-out infinite;
}

/* ── Species Picker (Profile Adopt) ────────────────────────────────────────── */

.inv-pet-species-picker {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	max-width: 420px;
	margin: 0 auto 1.25rem;
}

@media (max-width: 400px) {
	.inv-pet-species-picker {
		grid-template-columns: 1fr;
	}
}

.inv-pet-species-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem;
	background: rgba(255, 255, 255, 0.03);
	border: 2px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.75rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.inv-pet-species-card:hover {
	border-color: rgba(245, 158, 11, 0.3);
	background: rgba(245, 158, 11, 0.04);
}

.inv-pet-species-card--selected {
	border-color: rgba(245, 158, 11, 0.6);
	background: rgba(245, 158, 11, 0.08);
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.1);
}

.inv-pet-species-card__emoji {
	font-size: 1.75rem;
}

.inv-pet-species-card__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	color: #f0f4ff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.inv-pet-species-card__price {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	color: #f59e0b;
}

/* ── Store Pet Cards ───────────────────────────────────────────────────────── */

.inv-store-pet-card {
	border-color: color-mix(in srgb, var(--pet-accent, #f59e0b) 20%, transparent);
}

.inv-store-pet-card:hover {
	border-color: color-mix(in srgb, var(--pet-accent, #f59e0b) 40%, transparent);
}

.inv-store-pet-card__stages {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.inv-store-pet-card__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}

.inv-store-pet-card__stage-emoji {
	font-size: 1.5rem;
}

.inv-store-pet-card__stage-name {
	font-family: 'Inter', sans-serif;
	font-size: 0.5rem;
	color: #6b7494;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.inv-store-pet-card__arrow {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.15);
	margin-top: -0.75rem;
}

/* ── Mobile Nav Pet Card ───────────────────────────────────────────────────── */

.inv-mobile-pet-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	margin: 0.5rem 0 0.75rem;
	background: rgba(245, 158, 11, 0.06);
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: 0.75rem;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.inv-mobile-pet-card:hover {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.35);
}

.inv-mobile-pet-card--adopt {
	border-style: dashed;
}

.inv-mobile-pet-card__sprite {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 0.5rem;
	flex-shrink: 0;
}

.inv-mobile-pet-card__sprite[data-mood="happy"]    { animation: inv-pet-bounce 1.5s ease-in-out infinite; }
.inv-mobile-pet-card__sprite[data-mood="neutral"]  { animation: inv-pet-idle 3s ease-in-out infinite; }
.inv-mobile-pet-card__sprite[data-mood="hungry"]   { animation: inv-pet-wobble 1.2s ease-in-out infinite; }
.inv-mobile-pet-card__sprite[data-mood="sad"]      { animation: inv-pet-droop 2.5s ease-in-out infinite; }
.inv-mobile-pet-card__sprite[data-mood="sleeping"] { animation: inv-pet-sleep 4s ease-in-out infinite; filter: grayscale(0.6); }

.inv-mobile-pet-card__info {
	flex: 1;
	min-width: 0;
}

.inv-mobile-pet-card__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: #f0f4ff;
	line-height: 1.2;
}

.inv-mobile-pet-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	margin-top: 0.15rem;
}

.inv-mobile-pet-card__streak {
	color: #f59e0b;
}

.inv-mobile-pet-card__arrow {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

/* ── How to Earn / Tips Section ────────────────────────────────────────────── */

.inv-pet-tips {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.inv-pet-tips__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #6b7494;
	margin-bottom: 0.75rem;
}

.inv-pet-tips__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

@media (max-width: 480px) {
	.inv-pet-tips__grid {
		grid-template-columns: 1fr;
	}
}

.inv-pet-tip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 0.5rem;
}

.inv-pet-tip__icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.inv-pet-tip__label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.2;
}

.inv-pet-tip__value {
	display: block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	color: #f59e0b;
	line-height: 1.2;
}


/* =============================================================================
   Compact Pet Layout (v2)
   ============================================================================= */

.inv-pet-compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.inv-pet-compact__sprite {
	width: 150px;
	padding-top: 70px;
	position: relative;
	overflow: visible;
}
.inv-pet-compact__sprite::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 55%,
		color-mix(in srgb, var(--sp-color, #f59e0b) 22%, transparent) 0%,
		transparent 68%);
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
}
.inv-pet-compact__sprite .inv-sprite {
	position: relative;
	z-index: 1;
}

.inv-pet-compact__info {
	width: 100%;
}

.inv-pet-compact__top {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.inv-pet-compact__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #f0f4ff;
	line-height: 1.1;
	margin: 0;
}

.inv-pet-compact__mood {
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
}

/* Speech bubble — inline in flow, looks like dialogue */
.inv-pet-speech {
	position: relative;
	display: inline-block;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px 10px 10px 2px;
	padding: 5px 10px;
	margin-top: 0.35rem;
	max-width: 280px;
}

.inv-pet-speech::before {
	content: '';
	position: absolute;
	bottom: 6px;
	left: -6px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 6px solid rgba(255, 255, 255, 0.05);
}

.inv-pet-speech__text {
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.4;
}

.inv-pet-compact__tags {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-top: 0.35rem;
}

.inv-pet-tag {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.1);
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}

.inv-pet-tag--muted {
	color: #6b7494;
	background: rgba(107, 116, 148, 0.1);
}

.inv-pet-tag--personality {
	color: #c084fc;
	background: rgba(168, 85, 247, 0.1);
}

/* Growth bar */
.inv-pet-compact__growth {
	margin-top: 0.6rem;
}

.inv-pet-compact__growth-header {
	display: flex;
	justify-content: space-between;
	font-family: 'Inter', sans-serif;
	font-size: 0.55rem;
	color: #6b7494;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.2rem;
}

.inv-pet-compact__growth-header span:last-child {
	color: #f59e0b;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.65rem;
}

.inv-pet-compact__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 3px;
	overflow: hidden;
}

.inv-pet-compact__bar-fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #f59e0b, #f97316);
	transition: width 0.6s ease;
}

/* Stats row — all inline, compact */
.inv-pet-compact__stats {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem;
	color: #6b7494;
}

.inv-pet-compact__stat-battle {
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.inv-pet-compact__stat-battle strong {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
}

/* Stats row — separated general + battle */
.inv-pet-stats-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.inv-pet-stats-row__general {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-family: 'Inter', sans-serif;
	font-size: 0.65rem;
	color: #6b7494;
}

.inv-pet-stats-row__battle {
	display: flex;
	gap: 0.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.inv-pet-stats-row__battle strong {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
}

/* Egg chips — top-right of widget, normal flow */
.inv-pet-eggs-float {
	display: flex;
	justify-content: flex-end;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.inv-pet-egg-chip {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.2rem 0.35rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.inv-pet-egg-chip:hover {
	border-color: rgba(245, 158, 11, 0.3);
	background: rgba(245, 158, 11, 0.06);
	transform: scale(1.05);
}

.inv-pet-egg-chip--owned {
	border-color: rgba(34, 197, 94, 0.15);
	opacity: 0.5;
	pointer-events: none;
}

.inv-pet-egg-chip__img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.inv-pet-egg-chip__price {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.55rem;
	color: #f59e0b;
}

/* Other eggs — inline mini cards (legacy, remove later) */
.inv-pet-other-eggs {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 0.6rem 0;
}

.inv-pet-other-eggs__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.55rem;
	color: #4a5568;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.inv-pet-other-eggs__list {
	display: flex;
	gap: 0.5rem;
	flex: 1;
}

.inv-pet-other-egg {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
	flex: 1;
}

.inv-pet-other-egg:hover {
	border-color: rgba(245, 158, 11, 0.25);
	background: rgba(245, 158, 11, 0.04);
}

.inv-pet-other-egg--owned {
	border-color: rgba(34, 197, 94, 0.2);
	opacity: 0.6;
	pointer-events: none;
}

.inv-pet-other-egg__img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}

.inv-pet-other-egg__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.6rem;
	color: #c8cce8;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex: 1;
}

.inv-pet-other-egg__price {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.6rem;
	color: #f59e0b;
	white-space: nowrap;
}

.inv-pet-other-egg__badge {
	font-size: 0.7rem;
	color: #22c55e;
}

@media (max-width: 480px) {
	.inv-pet-other-eggs {
		flex-direction: column;
		align-items: stretch;
	}
	.inv-pet-other-eggs__list {
		flex-direction: column;
	}
}

/* Bottom section — XP bars + actions, repositioned below charsheet on profile page */
#inv-pet-bottom-section {
	padding: 1rem 1rem 0.5rem;
	background: #0d1424;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Evolution timeline — bar with images */
.inv-pet-timeline {
	position: relative;
	margin-top: 1rem;
	padding: 28px 20px 0;
}

.inv-pet-timeline__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	position: relative;
	margin-top: 20px;
}

.inv-pet-timeline__fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #f59e0b, #f97316);
	transition: width 0.6s ease;
}

.inv-pet-timeline__stages {
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	height: 100%;
}

.inv-pet-timeline__stage {
	position: absolute;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	top: 0;
}

.inv-pet-timeline__img {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-timeline__stage--active .inv-pet-timeline__img {
	width: 40px;
	height: 40px;
	margin-top: -4px;
	filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}

.inv-pet-timeline__stage--locked {
	opacity: 0.25;
}

.inv-pet-timeline__lock {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 800;
	font-size: 0.8rem;
	color: #3d4560;
}

.inv-pet-timeline__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.4rem;
	color: #4a5568;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.inv-pet-timeline__stage--active .inv-pet-timeline__label {
	color: #f59e0b;
	font-size: 0.45rem;
	font-weight: 600;
}

.inv-pet-timeline__growth-text {
	text-align: right;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.65rem;
	color: #f59e0b;
	margin-top: 4px;
}

@media (max-width: 480px) {
	.inv-pet-timeline {
		padding: 28px 10px 0;
	}
	.inv-pet-timeline__img {
		width: 24px;
		height: 24px;
	}
	.inv-pet-timeline__stage--active .inv-pet-timeline__img {
		width: 30px;
		height: 30px;
	}
}

/* Store CTA link */
.inv-pet-store-cta {
	display: block;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	color: #f59e0b;
	text-decoration: none;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.03);
	transition: color 0.15s;
}

.inv-pet-store-cta:hover {
	color: #fbbf24;
}

/* ── Pet Selector Strip (multi-pet) ─────────────────────────────────────── */
.inv-pet-selector {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.inv-pet-selector__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7494;
	margin: 0 0 0.5rem;
}
.inv-pet-selector__strip {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.inv-pet-selector__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.4rem;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.02);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	min-width: 60px;
	flex-shrink: 0;
}
.inv-pet-selector__item:hover {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
}
.inv-pet-selector__item--active {
	border-color: var(--pet-color, #f59e0b);
	background: rgba(245, 158, 11, 0.08);
}
.inv-pet-selector__img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.inv-pet-selector__name {
	font-family: 'Inter', sans-serif;
	font-size: 0.55rem;
	color: #a0aec0;
	white-space: nowrap;
	max-width: 56px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.inv-pet-selector__item--active .inv-pet-selector__name {
	color: var(--pet-color, #f59e0b);
}
.inv-pet-selector__badge {
	font-size: 0.45rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #22c55e;
	line-height: 1;
}

/* Actions — inline buttons */
/* ── Actions Panel ───────────────────────────────────────────────────── */
.inv-pet-actions-panel {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Stat pills */
.inv-pet-stat-pills {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	margin-bottom: 0.65rem;
}

.inv-pet-stat-pill {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.65rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	color: #6b7494;
	cursor: pointer;
	transition: all 0.15s;
}

.inv-pet-stat-pill__icon {
	font-size: 0.8rem;
	line-height: 1;
}

/* Active state — per-stat color */
.inv-pet-stat-pill--atk.inv-pet-stat-pill--active {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.4);
	color: #ef4444;
}
.inv-pet-stat-pill--def.inv-pet-stat-pill--active {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.4);
	color: #3b82f6;
}
.inv-pet-stat-pill--mgc.inv-pet-stat-pill--active {
	background: rgba(245, 158, 11, 0.15);
	border-color: rgba(245, 158, 11, 0.4);
	color: #f59e0b;
}
.inv-pet-stat-pill--wis.inv-pet-stat-pill--active {
	background: rgba(168, 85, 247, 0.15);
	border-color: rgba(168, 85, 247, 0.4);
	color: #a855f7;
}

.inv-pet-stat-pill:hover:not(.inv-pet-stat-pill--active) {
	background: rgba(255, 255, 255, 0.07);
	color: #c8cce8;
}

.inv-pet-stat-hidden {
	display: none;
}

/* Feed + Train row */
.inv-pet-action-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

/* Action card */
.inv-pet-action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding: 0.45rem 0.5rem;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
}

.inv-pet-action-card--feed {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.1);
}

.inv-pet-action-card--train {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.08));
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.1);
}

.inv-pet-action-card:hover:not(:disabled) {
	opacity: 0.85;
	transform: translateY(-1px);
}

.inv-pet-action-card:active:not(:disabled) {
	transform: scale(0.97);
}

.inv-pet-action-card:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.inv-pet-action-card__icon {
	font-size: 1.1rem;
	line-height: 1;
}

.inv-pet-action-card__icon--cd {
	font-size: 1.1rem;
	opacity: 0.7;
}

.inv-pet-action-card__label {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #e2e8f0;
}

.inv-pet-action-card--feed .inv-pet-action-card__label { color: #f59e0b; }
.inv-pet-action-card--train .inv-pet-action-card__label { color: #60a5fa; }

.inv-pet-action-card__sub {
	font-family: 'Inter', sans-serif;
	font-size: 0.65rem;
	color: #6b7494;
}

/* Rename link */
.inv-pet-rename-link {
	display: block;
	width: 15%;
	margin-top: 0.5rem;
	padding: 0.35rem;
	background: transparent;
	border: none;
	color: #4b5272;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	cursor: pointer;
	text-align: center;
	transition: color 0.15s;
}

.inv-pet-rename-link:hover {
	color: #c8cce8;
}

/* Legacy — keep for compat */
.inv-pet-action-btn {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.4rem 0.75rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	color: #c8cce8;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.inv-pet-action-select {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	font-size: 0.65rem;
	background: rgba(255, 255, 255, 0.04);
	color: #c8cce8;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 0.35rem 0.5rem;
	appearance: auto;
}

/* Evolution strip — minimal */
.inv-pet-evo-strip {
	display: flex;
	gap: 0.15rem;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.inv-pet-evo-strip__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.3rem 0;
	border-radius: 4px;
}

.inv-pet-evo-strip__item--active {
	background: rgba(245, 158, 11, 0.06);
}

.inv-pet-evo-strip__item--locked {
	opacity: 0.2;
}

.inv-pet-evo-strip__img {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-evo-strip__lock {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 800;
	font-size: 0.9rem;
	color: #3d4560;
}

.inv-pet-evo-strip__name {
	font-family: 'Inter', sans-serif;
	font-size: 0.4rem;
	color: #4a5568;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
}

.inv-pet-evo-strip__item--active .inv-pet-evo-strip__name {
	color: #f59e0b;
}

@media (max-width: 480px) {
	.inv-pet-evo-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.inv-pet-evo-strip__item {
		min-width: 44px;
	}
}

/* =============================================================================
   Pet Sprite — Image-based renderer with CSS mood filters
   ============================================================================= */

/* ── Sprite Container ──────────────────────────────────────────────────────── */

.inv-sprite {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.inv-sprite--sm  { width: 36px;  height: 36px; }
.inv-sprite--md  { width: 64px;  height: 64px; }
.inv-sprite--lg  { width: 150px; height: 150px; }

.inv-sprite__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: auto;
	transition: filter 0.5s ease;
}

/* ── Mood Animations ───────────────────────────────────────────────────────── */

.inv-sprite--ecstatic  { animation: inv-pet-bounce 1s ease-in-out infinite; }
.inv-sprite--happy     { animation: inv-pet-bounce 1.5s ease-in-out infinite; }
.inv-sprite--content   { animation: inv-pet-idle 3s ease-in-out infinite; }
.inv-sprite--neutral   { animation: inv-pet-idle 3s ease-in-out infinite; }
.inv-sprite--needy     { animation: inv-pet-wobble 1.2s ease-in-out infinite; }
.inv-sprite--hungry    { animation: inv-pet-wobble 1.2s ease-in-out infinite; }
.inv-sprite--sad       { animation: inv-pet-droop 2.5s ease-in-out infinite; }
.inv-sprite--neglected { animation: inv-pet-droop 3s ease-in-out infinite; }
.inv-sprite--sick      { animation: inv-pet-droop 3s ease-in-out infinite; }
.inv-sprite--sleeping  { animation: inv-pet-sleep 4s ease-in-out infinite; }
.inv-sprite--dormant   { animation: inv-pet-sleep 5s ease-in-out infinite; }
.inv-sprite--hibernating { animation: inv-pet-sleep 5s ease-in-out infinite; }

/* ── Mood Filters (visual deterioration) ───────────────────────────────────── */

.inv-sprite--ecstatic .inv-sprite__img  { filter: brightness(1.1) contrast(1.05); }
.inv-sprite--happy .inv-sprite__img     { filter: none; }
.inv-sprite--content .inv-sprite__img   { filter: brightness(0.95); }
.inv-sprite--neutral .inv-sprite__img   { filter: brightness(0.95); }
.inv-sprite--needy .inv-sprite__img     { filter: brightness(0.85) saturate(0.85); }
.inv-sprite--hungry .inv-sprite__img    { filter: brightness(0.8) saturate(0.8) sepia(0.1); }
.inv-sprite--sad .inv-sprite__img       { filter: brightness(0.65) saturate(0.4); }
.inv-sprite--neglected .inv-sprite__img { filter: brightness(0.5) saturate(0.2) grayscale(0.3); }
.inv-sprite--sick .inv-sprite__img      { filter: brightness(0.6) saturate(0.3) hue-rotate(60deg); }
.inv-sprite--sleeping .inv-sprite__img  { filter: brightness(0.5) saturate(0.3) grayscale(0.5); }
.inv-sprite--dormant .inv-sprite__img   { filter: brightness(0.35) saturate(0.1) grayscale(0.7); }
.inv-sprite--hibernating .inv-sprite__img { filter: brightness(0.35) saturate(0.1) grayscale(0.7); }

/* ── Speech Bubble ─────────────────────────────────────────────────────────── */

.inv-sprite__bubble {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	background: rgba(17, 24, 39, 0.95);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 6px 12px;
	white-space: normal;
	width: max-content;
	max-width: 300px;
	min-width: 100px;
	pointer-events: none;
	animation: inv-bubble-in 0.3s ease both;
	z-index: 5;
}

.inv-sprite__bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: rgba(17, 24, 39, 0.95);
}

.inv-sprite__bubble-mood {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}

.inv-sprite__bubble-text {
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem;
	color: rgba(255,255,255,0.85);
	line-height: 1.3;
}

.inv-sprite--lg .inv-sprite__bubble {
	padding: 6px 12px;
	max-width: 240px;
}

.inv-sprite--lg .inv-sprite__bubble-text {
	font-size: 0.7rem;
}

@keyframes inv-bubble-in {
	from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ── Evolution Preview Strip ────────────────────────────────────────────────── */

.inv-pet-evo-preview {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.05);
}

.inv-pet-evo-preview__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #6b7494;
	margin-bottom: 0.75rem;
}

.inv-pet-evo-preview__stages {
	display: flex;
	gap: 0.25rem;
	justify-content: space-between;
}

.inv-pet-evo-preview__stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.2rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	transition: border-color 0.15s;
}

.inv-pet-evo-preview__stage--current {
	border-color: rgba(245,158,11,0.3);
	background: rgba(245,158,11,0.05);
}

.inv-pet-evo-preview__stage--locked {
	opacity: 0.3;
}

.inv-pet-evo-preview__sprite {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-evo-preview__lock {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	color: #3d4560;
}

.inv-pet-evo-preview__label {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.55rem;
	color: #c8cce8;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	line-height: 1.1;
}

.inv-pet-evo-preview__stage--locked .inv-pet-evo-preview__label {
	color: #3d4560;
}

.inv-pet-evo-preview__threshold {
	font-family: 'Inter', sans-serif;
	font-size: 0.45rem;
	color: #4a5568;
}

@media (max-width: 480px) {
	.inv-pet-evo-preview__stages {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0.15rem;
	}
	.inv-pet-evo-preview__stage {
		min-width: 52px;
	}
}

/* ── Mini Egg for Pickers ──────────────────────────────────────────────────── */

.inv-pet-egg-mini {
	position: relative;
	width: 40px;
	height: 40px;
}

.inv-pet-egg-mini__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Store Egg Cards ───────────────────────────────────────────────────────── */

.inv-pet-egg-store {
	position: relative;
	width: 80px;
	height: 80px;
	animation: inv-pet-idle 3s ease-in-out infinite;
}

.inv-pet-egg-store__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Tier glow effects */
.inv-pet-egg-store--war_egg .inv-pet-egg-store__img {
	filter: drop-shadow(0 0 8px rgba(245,158,11,0.3));
}
.inv-pet-egg-store--rare_egg .inv-pet-egg-store__img {
	filter: drop-shadow(0 0 12px rgba(59,130,246,0.4));
}
.inv-pet-egg-store--legendary_egg .inv-pet-egg-store__img {
	filter: drop-shadow(0 0 16px rgba(168,85,247,0.5)) brightness(1.1);
}
.inv-pet-egg-store--pony_egg .inv-pet-egg-store__img {
	filter: drop-shadow(0 0 14px rgba(244,114,182,0.5)) brightness(1.05);
}

/* Tier size differences */
.inv-pet-egg-store--rare_egg { width: 90px; height: 90px; }
.inv-pet-egg-store--legendary_egg { width: 100px; height: 100px; }
.inv-pet-egg-store--pony_egg { width: 90px; height: 90px; }

/* ── Pet away in chat ─────────────────────────────────────────────────────── */
.inv-pet-away-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.2);
	border-radius: 8px;
	margin-bottom: 12px;
	font-size: 0.75rem;
	overflow: hidden;
}


.inv-pet-away-banner__icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.inv-pet-away-banner__text {
	color: #93c5fd;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inv-pet-compact__sprite--away {
	opacity: 0.5;
	filter: grayscale(0.4);
	transition: opacity 0.3s, filter 0.3s;
}

.inv-pet-compact__sprite--away:hover {
	opacity: 0.8;
	filter: grayscale(0);
}

/* ── Pet mood particles ── */

.inv-sprite__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	overflow: visible;
}

.inv-sprite__particle {
	position: absolute;
	font-size: 0.5rem;
	opacity: 0;
	animation: inv-particle-float var(--p-dur, 3s) ease-out var(--p-delay, 0s) infinite;
	left: var(--p-x, 50%);
	bottom: var(--p-y, 30%);
}

@keyframes inv-particle-float {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
	15%  { opacity: 1; transform: translate(var(--p-dx, 5px), -8px) scale(1); }
	70%  { opacity: 0.7; transform: translate(var(--p-dx2, 10px), -30px) scale(0.9); }
	100% { opacity: 0; transform: translate(var(--p-dx3, 8px), -50px) scale(0.4); }
}

/* Size-specific particle scaling */
.inv-sprite--sm .inv-sprite__particle { font-size: 0.35rem; }
.inv-sprite--md .inv-sprite__particle { font-size: 0.4rem; }
.inv-sprite--lg .inv-sprite__particle { font-size: 0.5rem; }

@media (min-width: 1024px) {
	.inv-sidebar-pet-collapsed .inv-sprite__particle,
	.inv-sidebar-pet .inv-sprite__particle { font-size: 0.75rem; }
}

/* Sad/hungry — particles drip down instead of float up */
.inv-sprite--sad .inv-sprite__particle,
.inv-sprite--sick .inv-sprite__particle,
.inv-sprite--hungry .inv-sprite__particle {
	animation-name: inv-particle-drip;
}

@keyframes inv-particle-drip {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
	15%  { opacity: 0.8; transform: translate(var(--p-dx, 2px), 4px) scale(1); }
	70%  { opacity: 0.4; transform: translate(var(--p-dx2, 4px), 20px) scale(0.8); }
	100% { opacity: 0; transform: translate(var(--p-dx3, 3px), 35px) scale(0.3); }
}

/* Sleeping — slow gentle float */
.inv-sprite--hibernating .inv-sprite__particle,
.inv-sprite--content .inv-sprite__particle {
	animation-name: inv-particle-gentle;
}

@keyframes inv-particle-gentle {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
	20%  { opacity: 0.6; transform: translate(var(--p-dx, 3px), -5px) scale(1); }
	80%  { opacity: 0.3; transform: translate(var(--p-dx2, 6px), -18px) scale(0.8); }
	100% { opacity: 0; transform: translate(var(--p-dx3, 4px), -25px) scale(0.4); }
}

/* ── Mobile: prevent pet widget overlap with bottom nav ── */
@media (max-width: 767px) {
	.inv-pet-widget {
		padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
}

/* =============================================================================
   PvP Sparring — Challenge button
   ============================================================================= */

.inv-pet-challenge-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
	border: 1px solid rgba(59, 130, 246, 0.3);
	color: #93c5fd;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.inv-pet-challenge-btn:hover {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
	border-color: rgba(59, 130, 246, 0.6);
	box-shadow: 0 0 14px rgba(59, 130, 246, 0.2);
}

/* ── Battle History toggle ──────────────────────────────────────────────────── */

.inv-pet-history-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: #6b7494;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0;
	transition: color 0.2s;
}

.inv-pet-history-toggle:hover {
	color: #c8cce8;
}

.inv-pet-history-toggle__arrow {
	display: inline-block;
	transition: transform 0.2s;
}

.inv-pet-history-toggle--open .inv-pet-history-toggle__arrow {
	transform: rotate(90deg);
}

/* ── Battle History Panel ────────────────────────────────────────────────────── */

.inv-pet-history-panel {
	display: none;
	margin-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 10px;
}

.inv-pet-history-panel--open {
	display: block;
}

.inv-pet-history-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	margin-bottom: 4px;
	background: rgba(255, 255, 255, 0.02);
	font-size: 0.8rem;
}

.inv-pet-history-entry__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.inv-pet-history-entry__opp {
	color: #c8cce8;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inv-pet-history-entry__date {
	color: #6b7494;
	font-size: 0.73rem;
}

.inv-pet-history-entry__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.inv-pet-history-badge {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 9999px;
}

.inv-pet-history-badge--win {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.inv-pet-history-badge--loss {
	background: rgba(239, 68, 68, 0.12);
	color: #f87171;
}

.inv-pet-history-badge--tie {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.inv-pet-history-xp {
	font-weight: 600;
	font-size: 0.78rem;
}

.inv-pet-history-xp--pos { color: #22c55e; }
.inv-pet-history-xp--neg { color: #f87171; }
.inv-pet-history-xp--tie { color: #f59e0b; }

.inv-pet-history-empty {
	color: #6b7494;
	font-size: 0.82rem;
	text-align: center;
	padding: 12px 0 4px;
}

/* =============================================================================
   PvP Sparring — Challenge Modal
   ============================================================================= */

.inv-pet-challenge-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.inv-pet-challenge-modal--open {
	display: flex;
}

.inv-pet-challenge-modal__card {
	background: #111827;
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: 16px;
	width: 100%;
	max-width: 420px;
	padding: 24px;
	box-shadow: 0 0 40px rgba(59, 130, 246, 0.12);
	position: relative;
	animation: invChallengeIn 0.25s ease;
}

@keyframes invChallengeIn {
	from { opacity: 0; transform: scale(0.96) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.inv-pet-challenge-modal__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: #93c5fd;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 16px;
}

.inv-pet-challenge-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	color: #6b7494;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s;
}

.inv-pet-challenge-modal__close:hover {
	color: #f0f4ff;
}

/* Search input */
.inv-pet-challenge-search {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #f0f4ff;
	font-size: 0.88rem;
	padding: 9px 14px;
	outline: none;
	transition: border-color 0.2s;
	margin-bottom: 12px;
}

.inv-pet-challenge-search:focus {
	border-color: rgba(59, 130, 246, 0.5);
}

.inv-pet-challenge-search::placeholder {
	color: #3d4560;
}

/* Opponent list */
.inv-pet-opponents-list {
	max-height: 220px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.1) transparent;
	margin-bottom: 12px;
}

.inv-pet-opponent-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
	border: 1px solid transparent;
}
/* ── 3v3 opponent card — vertical layout with team strip below hdr ──── */
.inv-pet-opponent-item--3v3 { flex-direction: column; align-items: stretch; gap: 6px; }
.inv-pet-opponent-item__hdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inv-pet-opponent-item__team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inv-pet-opponent-item__teamcell {
	display: flex; flex-direction: column; align-items: center;
	padding: 6px 4px; background: rgba(15,23,42,0.55);
	border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;
}
.inv-pet-opponent-item__teamemoji { font-size: 1.2rem; }
.inv-pet-opponent-item__teamname  { font-size: 0.7rem; font-weight: 700; color: #e2e8f0; text-align: center; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inv-pet-opponent-item__teammeta  { font-size: 0.56rem; color: #94a3b8; margin-top: 1px; letter-spacing: 0.04em; }
/* ── 3v3 per-pet HP rows in result modal ─────────────────────────────── */
.inv-pet-hp-summary--3v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-pet-hp-summary__team-label { font-family: Rajdhani, sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 4px; }
.inv-pet-hp-row--3v3 { gap: 6px; font-size: 0.7rem; }
.inv-pet-hp-row--3v3 .inv-pet-hp-row__label { flex: 0 0 auto; max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-pet-hp-row--3v3 .inv-pet-hp-bar { height: 6px; }
.inv-pet-hp-row--3v3.is-dead { opacity: 0.5; filter: grayscale(0.6); }
.inv-pet-hp-row--3v3.is-dead .inv-pet-hp-row__pct { color: #f87171; font-weight: 700; }

.inv-pet-opponent-item:hover {
	background: rgba(59, 130, 246, 0.08);
	border-color: rgba(59, 130, 246, 0.2);
}

.inv-pet-opponent-item--selected {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.4);
}

.inv-pet-opponent-item__emoji {
	font-size: 1.4rem;
	flex-shrink: 0;
}

.inv-pet-opponent-item__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.inv-pet-opponent-item__username {
	font-weight: 600;
	font-size: 0.82rem;
	color: #c8cce8;
}

.inv-pet-opponent-item__petname {
	font-size: 0.75rem;
	color: #6b7494;
}

.inv-pet-opponents-empty {
	color: #6b7494;
	font-size: 0.82rem;
	text-align: center;
	padding: 16px 0;
}

/* Confirm button */
.inv-pet-challenge-confirm {
	width: 100%;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px;
	cursor: pointer;
	transition: opacity 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.inv-pet-challenge-confirm:hover:not(:disabled) {
	opacity: 0.9;
	box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

.inv-pet-challenge-confirm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Battle Result (inline in modal) ────────────────────────────────────────── */

.inv-pet-battle-result {
	text-align: center;
	padding: 8px 0 4px;
}

.inv-pet-battle-result__icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 8px;
}

.inv-pet-battle-result__headline {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.inv-pet-battle-result__headline--win  { color: #22c55e; }
.inv-pet-battle-result__headline--loss { color: #f87171; }
.inv-pet-battle-result__headline--tie  { color: #f59e0b; }

.inv-pet-battle-result__log {
	font-size: 0.82rem;
	color: #94a3b8;
	font-style: italic;
	margin: 0 0 10px;
	line-height: 1.5;
}

.inv-pet-battle-result__xp {
	display: inline-block;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 4px 14px;
	border-radius: 9999px;
	margin-bottom: 14px;
}

.inv-pet-battle-result__xp--pos {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.inv-pet-battle-result__xp--neg {
	background: rgba(239, 68, 68, 0.12);
	color: #f87171;
}

.inv-pet-battle-result__xp--tie {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.inv-pet-battle-result__scores {
	display: flex;
	gap: 10px;
	justify-content: center;
	font-size: 0.78rem;
	color: #6b7494;
	margin-bottom: 16px;
}

.inv-pet-battle-result__score-item {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	padding: 4px 10px;
}

.inv-pet-challenge-close-result {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #c8cce8;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 9px 24px;
	cursor: pointer;
	transition: background 0.15s;
}

.inv-pet-challenge-close-result:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ── Loading state inside modal ─────────────────────────────────────────────── */

.inv-pet-challenge-loading {
	text-align: center;
	padding: 24px 0;
	color: #6b7494;
	font-size: 0.85rem;
}

.inv-pet-challenge-error {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #f87171;
	border-radius: 8px;
	font-size: 0.82rem;
	padding: 10px 14px;
	margin-bottom: 12px;
}

/* =============================================================================
   Daily Missions Panel
   ============================================================================= */

.inv-pet-missions {
	margin-top: 14px;
}

/* ── Toggle Button ───────────────────────────────────────────────────────────── */

.inv-pet-missions__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: rgba(245, 158, 11, 0.06);
	border: none;
	border-radius: 8px;
	padding: 9px 14px;
	cursor: pointer;
	color: #c8cce8;
	font-family: Rajdhani, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background 0.2s;
}

.inv-pet-missions__toggle:hover {
	background: rgba(245, 158, 11, 0.12);
}

.inv-pet-missions__toggle-icon {
	font-size: 0.65rem;
	color: #6b7494;
	transition: transform 0.25s ease;
	display: inline-block;
}

.inv-pet-missions__toggle--open .inv-pet-missions__toggle-icon {
	transform: rotate(90deg);
}

.inv-pet-missions__toggle-label {
	flex: 1;
	text-align: left;
}

.inv-pet-missions__badge {
	font-size: 0.72rem;
	font-family: Inter, sans-serif;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	color: #6b7494;
	letter-spacing: 0;
	text-transform: none;
	transition: background 0.2s, color 0.2s;
}

.inv-pet-missions__badge--done {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

/* ── Mission List ─────────────────────────────────────────────────────────────── */

.inv-pet-missions__list {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.inv-pet-missions__all-done {
	text-align: center;
	font-size: 0.82rem;
	color: #22c55e;
	margin: 4px 0 8px;
}

/* ── Individual Mission Item ─────────────────────────────────────────────────── */

.inv-pet-mission-item {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 8px;
	padding: 10px 12px;
	transition: background 0.15s;
}

.inv-pet-mission-item--done {
	opacity: 0.65;
}

.inv-pet-mission-item--done .inv-pet-mission-item__bar-fill {
	background: #22c55e;
}

.inv-pet-mission-item__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.inv-pet-mission-item__icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.inv-pet-mission-item__label {
	flex: 1;
	font-size: 0.82rem;
	color: #c8cce8;
	line-height: 1.3;
}

.inv-pet-mission-item--done .inv-pet-mission-item__label {
	color: #6b7494;
	text-decoration: line-through;
}

.inv-pet-mission-item__status {
	font-size: 0.75rem;
	color: #6b7494;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.inv-pet-mission-item--done .inv-pet-mission-item__status {
	color: #22c55e;
	font-size: 0.9rem;
}

/* ── Progress Bar ─────────────────────────────────────────────────────────────── */

.inv-pet-mission-item__bar-wrap {
	height: 4px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 9999px;
	overflow: hidden;
	margin-bottom: 6px;
}

.inv-pet-mission-item__bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
	border-radius: 9999px;
	transition: width 0.4s ease;
}

/* ── Reward Tags ─────────────────────────────────────────────────────────────── */

.inv-pet-mission-item__rewards-inline {
	display: flex;
	gap: 4px;
	margin-left: auto;
	margin-right: 8px;
	flex-shrink: 0;
}

.inv-pet-mission-item__reward {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.inv-pet-mission-item__reward-xp,
.inv-pet-mission-item__reward-coins {
	font-size: 0.7rem;
	padding: 2px 8px;
	border-radius: 9999px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.inv-pet-mission-item__reward-xp {
	background: rgba(59, 130, 246, 0.12);
	color: #60a5fa;
}

.inv-pet-mission-item__reward-coins {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

/* ── Pet Header Alert Dot ───────────────────────────────────────────────────── */

/* Sprite wrapper — needed so the dot is positioned relative to the sprite */
.inv-sidebar-pet__sprite-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.inv-pet-alert-dot {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid #080d1a;
	pointer-events: none;
	z-index: 2;
	animation: inv-pet-alert-pulse 1.5s ease-in-out infinite;
}

/* hungry → amber */
.inv-pet-alert-dot--hungry {
	background: #f59e0b;
	box-shadow: 0 0 5px rgba(245, 158, 11, 0.7);
}

/* sick → red */
.inv-pet-alert-dot--sick {
	background: #ef4444;
	box-shadow: 0 0 5px rgba(239, 68, 68, 0.7);
}

/* hibernating → muted purple-gray */
.inv-pet-alert-dot--hibernating {
	background: #6b7494;
	box-shadow: 0 0 5px rgba(107, 116, 148, 0.6);
}

@keyframes inv-pet-alert-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.55; transform: scale(1.35); }
}

/* Bottom nav pet tab — dot is positioned relative to the tab (already position:relative) */
.inv-bottom-nav__tab--pet .inv-pet-alert-dot {
	top: 2px;
	right: calc(50% - 20px);
}

/* ── Rare Color Variant ─────────────────────────────────────────────────────── */

.inv-sprite--rare .inv-sprite__img {
	filter: hue-rotate(200deg) saturate(1.4) brightness(1.1);
}

.inv-pet-rare-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 4px;
	padding: 2px 8px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #080d1a;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	border-radius: 9999px;
	text-transform: uppercase;
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
	pointer-events: none;
	user-select: none;
}

/* ── Manual Hatching ────────────────────────────────────────────────────────── */

@keyframes inv-pet-hatch-glow {
	0%, 100% {
		box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), 0 0 24px rgba(245, 158, 11, 0.2);
	}
	50% {
		box-shadow: 0 0 24px rgba(245, 158, 11, 0.9), 0 0 48px rgba(245, 158, 11, 0.4);
	}
}

@keyframes inv-pet-egg-wobble {
	0%, 100% { transform: rotate(0deg); }
	20%       { transform: rotate(-4deg); }
	40%       { transform: rotate(4deg); }
	60%       { transform: rotate(-3deg); }
	80%       { transform: rotate(3deg); }
}

@keyframes inv-pet-egg-shake {
	0%  { transform: translateX(0); }
	15% { transform: translateX(-6px) rotate(-3deg); }
	30% { transform: translateX(6px) rotate(3deg); }
	45% { transform: translateX(-8px) rotate(-4deg); }
	60% { transform: translateX(8px) rotate(4deg); }
	75% { transform: translateX(-4px) rotate(-2deg); }
	90% { transform: translateX(4px) rotate(2deg); }
	100%{ transform: translateX(0) rotate(0); }
}

/* Progressive hatch: slow wobble → medium shake → intense → burst-fade */
@keyframes inv-pet-egg-hatch-prog {
	0%   { transform: rotate(0deg); }
	4%   { transform: rotate(-1.5deg); }
	8%   { transform: rotate(1.5deg); }
	13%  { transform: rotate(-2deg); }
	18%  { transform: rotate(2deg); }
	23%  { transform: rotate(-1.5deg); }
	28%  { transform: rotate(0deg); }
	33%  { transform: translateX(-4px) rotate(-3deg); }
	37%  { transform: translateX(5px) rotate(4deg); }
	41%  { transform: translateX(-6px) rotate(-4.5deg); }
	45%  { transform: translateX(6px) rotate(4.5deg); }
	49%  { transform: translateX(-5px) rotate(-3deg); }
	53%  { transform: translateX(5px) rotate(3deg); }
	57%  { transform: translateX(0); }
	61%  { transform: translateX(-9px) rotate(-5deg) scale(1.02); }
	64%  { transform: translateX(9px) rotate(5deg) scale(1.02); }
	67%  { transform: translateX(-12px) rotate(-7deg) scale(1.04); }
	70%  { transform: translateX(12px) rotate(7deg) scale(1.05); }
	73%  { transform: translateX(-14px) rotate(-9deg) scale(1.07); }
	76%  { transform: translateX(14px) rotate(9deg) scale(1.07); }
	80%  { transform: translateX(-12px) rotate(-6deg) scale(1.05); }
	84%  { transform: translateX(10px) rotate(5deg) scale(1.04); }
	87%  { transform: translateX(0) scale(1.03); }
	92%  { transform: scale(1.12); filter: brightness(2.5); opacity: 0.75; }
	96%  { transform: scale(1.2);  filter: brightness(5);   opacity: 0.2;  }
	100% { transform: scale(1.25); filter: brightness(8);   opacity: 0;    }
}

/* Wrap glow that builds alongside the shake */
@keyframes inv-pet-egg-wrap-glow {
	0%   { filter: none; }
	35%  { filter: drop-shadow(0 0 6px rgba(245,158,11,0.3)); }
	65%  { filter: drop-shadow(0 0 18px rgba(245,158,11,0.65)); }
	87%  { filter: drop-shadow(0 0 36px rgba(245,158,11,0.9)) drop-shadow(0 0 70px rgba(255,210,80,0.3)); }
	100% { filter: drop-shadow(0 0 70px rgba(245,158,11,1)) drop-shadow(0 0 140px rgba(255,220,100,0.7)); }
}

/* New pet reveal after hatch */
@keyframes inv-pet-hatch-reveal {
	0%   { opacity: 0; filter: brightness(3) saturate(0.5); transform: scale(0.88); }
	55%  { opacity: 0.9; filter: brightness(1.5); transform: scale(1.05); }
	100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}

@keyframes inv-pet-hatch-flash {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	100% { opacity: 0; }
}

.inv-pet-hatch-ready {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 12px;
	margin-top: 12px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
	border-radius: 12px;
}

.inv-pet-hatch-ready__label {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #f59e0b;
	margin: 0;
	text-align: center;
}

.inv-pet-hatch-ready__hint {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	text-align: center;
}

.inv-pet-hatch-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 12px 28px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #080d1a;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
	animation: inv-pet-hatch-glow 1.8s ease-in-out infinite;
}

.inv-pet-hatch-btn:hover {
	transform: scale(1.05);
}

.inv-pet-hatch-btn:active {
	transform: scale(0.97);
}

.inv-pet-hatch-btn:disabled {
	opacity: 0.5;
	animation: none;
	cursor: not-allowed;
}

/* Wobble applied to egg sprite when hatch-ready */
.inv-pet--hatch-ready .inv-sprite__img {
	animation: inv-pet-egg-wobble 2.5s ease-in-out infinite;
}

/* Portrait wrap gets the ambient glow as egg hatches */
.inv-pet--hatching {
	animation: inv-pet-egg-wrap-glow 2s ease-in forwards;
}

/* The egg image: slow wobble → medium shake → intense → burst-fade */
.inv-pet--hatching .inv-sprite__img,
.inv-pet--hatching .inv-pet-hub__pet-img {
	animation: inv-pet-egg-hatch-prog 2s ease-in forwards !important;
}

/* New pet fades in bright then settles after hatch */
.inv-pet-hub__pet-img--hatched {
	animation: inv-pet-hatch-reveal 0.65s ease-out both;
}

/* ── Evolve animation ────────────────────────────────────────────── */
@keyframes inv-pet-evolve-burst {
	0%   { transform: scale(1);    filter: brightness(1) saturate(1);   opacity: 1; }
	20%  { transform: scale(1.1);  filter: brightness(1.8) saturate(2); opacity: 1; }
	55%  { transform: scale(0.05); filter: brightness(4)  saturate(2);  opacity: 0.15; }
	80%  { transform: scale(0);    opacity: 0; }
	100% { transform: scale(0);    opacity: 0; }
}
@keyframes inv-pet-evolve-wrap-glow {
	0%   { box-shadow: none; }
	20%  { box-shadow: 0 0 0 4px rgba(251,191,36,0.7), 0 0 40px rgba(251,191,36,0.5); }
	55%  { box-shadow: 0 0 0 12px rgba(255,255,255,0.9), 0 0 80px rgba(255,255,255,0.7); }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes inv-pet-evolve-reveal {
	0%   { opacity: 0; transform: scale(1.3); filter: brightness(2.5) saturate(1.5); }
	60%  { opacity: 1; transform: scale(1.05); filter: brightness(1.3) saturate(1.2); }
	100% { opacity: 1; transform: scale(1);    filter: brightness(1)   saturate(1); }
}
.inv-pet--evolving {
	animation: inv-pet-evolve-wrap-glow 2s ease-in forwards;
}
.inv-pet--evolving .inv-pet-hub__pet-img {
	animation: inv-pet-evolve-burst 2s ease-in forwards !important;
}
.inv-pet-hub__pet-img--evolved {
	animation: inv-pet-evolve-reveal 0.8s ease-out both;
}

/* Hide normal actions when hatch ready */
.inv-pet-actions--hidden {
	display: none;
}

/* =============================================================================
   Gift Egg — Store card secondary button
   ============================================================================= */

.inv-store-card__btn--secondary {
	background: transparent;
	border: 1px solid #3b82f6;
	color: #3b82f6;
	margin-top: 6px;
	font-size: 0.75rem;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s ease, color 0.15s ease;
}
.inv-store-card__btn--secondary:hover {
	background: rgba(59, 130, 246, 0.12);
	color: #93c5fd;
}

/* =============================================================================
   Gift Egg Modal
   ============================================================================= */

.inv-pet-gift-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.inv-pet-gift-modal[hidden] {
	display: none;
}

.inv-pet-gift-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 13, 26, 0.85);
	backdrop-filter: blur(4px);
}

.inv-pet-gift-modal__box {
	position: relative;
	z-index: 1;
	background: #111827;
	border-radius: 12px;
	padding: 24px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 0 40px rgba(59, 130, 246, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.inv-pet-gift-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	color: #6b7494;
	font-size: 1.4rem;
	cursor: pointer;
	line-height: 1;
	padding: 4px 6px;
	transition: color 0.15s;
}
.inv-pet-gift-modal__close:hover {
	color: #f0f4ff;
}

.inv-pet-gift-modal__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: #f0f4ff;
	margin: 0 0 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.inv-pet-gift-modal__section {
	margin-bottom: 14px;
}

.inv-pet-gift-modal__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7494;
	margin-bottom: 6px;
}

/* Tier selector */
.inv-pet-gift-modal__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.inv-pet-gift-tier-btn {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 10px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	color: #9ca3c0;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.inv-pet-gift-tier-btn:hover {
	border-color: var(--tier-color, #3b82f6);
	color: #f0f4ff;
	background: rgba(255,255,255,0.06);
}
.inv-pet-gift-tier-btn.is-active {
	border-color: var(--tier-color, #3b82f6);
	background: rgba(59,130,246,0.1);
	color: var(--tier-color, #3b82f6);
	box-shadow: 0 0 8px rgba(59,130,246,0.2);
}
.inv-pet-gift-tier-btn__img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
}

.inv-pet-gift-tier-btn__price {
	font-size: 0.65rem;
	font-weight: 400;
	color: #6b7494;
}
.inv-pet-gift-tier-btn.is-active .inv-pet-gift-tier-btn__price {
	color: inherit;
}

/* Username search */
.inv-pet-gift-modal__search-wrap {
	position: relative;
}

.inv-pet-gift-modal__input {
	width: 100%;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 9px 12px;
	color: #f0f4ff;
	font-size: 0.85rem;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.inv-pet-gift-modal__input:focus {
	border-color: #3b82f6;
}
.inv-pet-gift-modal__input::placeholder {
	color: #6b7494;
}

.inv-pet-gift-modal__dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #1a2235;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	overflow: hidden;
	z-index: 10;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.inv-pet-gift-modal__dropdown[hidden] {
	display: none;
}

.inv-pet-gift-user-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.1s;
}
.inv-pet-gift-user-option:hover {
	background: rgba(59,130,246,0.12);
}
.inv-pet-gift-user-option__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: #080d1a;
	flex-shrink: 0;
}
.inv-pet-gift-user-option__name {
	color: #d1d8f0;
	font-size: 0.82rem;
}

.inv-pet-gift-modal__recipient-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 6px 10px;
	background: rgba(59,130,246,0.08);
	border: 1px solid rgba(59,130,246,0.25);
	border-radius: 6px;
	font-size: 0.8rem;
	color: #93c5fd;
}
.inv-pet-gift-modal__recipient-chip[hidden] {
	display: none;
}
.inv-pet-gift-modal__recipient-chip__clear {
	margin-left: auto;
	background: none;
	border: none;
	color: #6b7494;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 2px;
}
.inv-pet-gift-modal__recipient-chip__clear:hover {
	color: #f0f4ff;
}

/* Cost preview */
.inv-pet-gift-modal__cost-preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: rgba(245,158,11,0.06);
	border: 1px solid rgba(245,158,11,0.2);
	border-radius: 8px;
	margin-bottom: 12px;
	font-size: 0.82rem;
	color: #f59e0b;
}
.inv-pet-gift-modal__cost-preview[hidden] {
	display: none;
}
.inv-pet-gift-modal__note-hint {
	color: #6b7494;
	font-size: 0.72rem;
}

.inv-pet-gift-modal__note-input {
	resize: none;
	font-family: inherit;
	line-height: 1.4;
}

.inv-pet-gift-no-results {
	padding: 10px 12px;
	color: #6b7494;
	font-size: 0.82rem;
	text-align: center;
}

/* Error */
.inv-pet-gift-modal__error {
	color: #f87171;
	font-size: 0.78rem;
	padding: 8px 10px;
	background: rgba(248,113,113,0.08);
	border-radius: 6px;
	margin-bottom: 10px;
}
.inv-pet-gift-modal__error[hidden] {
	display: none;
}

/* Actions */
.inv-pet-gift-modal__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

.inv-pet-gift-modal__btn {
	padding: 9px 18px;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: opacity 0.15s, background 0.15s;
}
.inv-pet-gift-modal__btn--cancel {
	background: rgba(255,255,255,0.06);
	color: #9ca3c0;
}
.inv-pet-gift-modal__btn--cancel:hover {
	background: rgba(255,255,255,0.1);
	color: #f0f4ff;
}
.inv-pet-gift-modal__btn--confirm {
	background: #3b82f6;
	color: #fff;
}
.inv-pet-gift-modal__btn--confirm:hover:not(:disabled) {
	background: #60a5fa;
}
.inv-pet-gift-modal__btn--confirm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* =============================================================================
   Pet Leaderboard
   ============================================================================= */

/* ── Widget toggle section ────────────────────────────────────────────────── */
.inv-pet-lb-section {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: 6px;
}

.inv-pet-lb-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: none;
	border: none;
	color: #c8cce8;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	transition: color 0.15s;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.inv-pet-lb-toggle:hover {
	color: #f59e0b;
}

.inv-pet-lb-toggle__arrow {
	font-size: 0.6rem;
	color: #6b7494;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.inv-pet-lb-body {
	padding: 0 12px 14px;
}

/* ── Avatar + frame + pet sprite stack ───────────────────────────────────── */
.inv-pet-lb-avatar-wrap {
	position: relative;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

/* Pet sprite — elemento dominante */
.inv-pet-lb-pet-sprite {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* Owner badge — Tavern-style avatar component (equipped frame or default gold,
   fallback initial letter, member/influencer badges) overlaid on the pet sprite's
   bottom-right corner. */
.inv-pet-lb-owner-badge {
	position: absolute;
	bottom: -6px;
	right: -8px;
	width: 44px;
	height: 44px;
	line-height: 0;
	z-index: 2;
}

.inv-pet-lb-owner-badge .inv-avatar-wrap {
	width: 44px !important;
	height: 44px !important;
	--inv-avatar-size: 44px;
}

.inv-pet-lb-owner-badge .inv-avatar-photo,
.inv-pet-lb-owner-badge .inv-avatar-placeholder {
	width: 90% !important;
	height: 90% !important;
}

/* ── Category pill tabs ───────────────────────────────────────────────────── */
.inv-pet-lb-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.inv-pet-lb-tab {
	padding: 7px 14px;
	border-radius: 999px;
	background: #111827;
	color: #6b7494;
	font-size: 0.78rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

.inv-pet-lb-tab:hover {
	background: #1e2a3d;
	color: #d1d8f0;
}

.inv-pet-lb-tab.is-active {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
	box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.inv-pet-lb-skeleton {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px 0;
}

.inv-pet-lb-skeleton__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #111827;
	border-radius: 10px;
	overflow: hidden;
}

.inv-pet-lb-skeleton__rank {
	width: 28px;
	height: 14px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	flex-shrink: 0;
	animation: inv-lb-pulse 1.4s ease-in-out infinite;
}

.inv-pet-lb-skeleton__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
	animation: inv-lb-pulse 1.4s ease-in-out infinite 0.1s;
}

.inv-pet-lb-skeleton__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.inv-pet-lb-skeleton__name {
	height: 12px;
	width: 55%;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	animation: inv-lb-pulse 1.4s ease-in-out infinite 0.15s;
}

.inv-pet-lb-skeleton__sub {
	height: 10px;
	width: 35%;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	animation: inv-lb-pulse 1.4s ease-in-out infinite 0.2s;
}

.inv-pet-lb-skeleton__value {
	width: 40px;
	height: 14px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	flex-shrink: 0;
	animation: inv-lb-pulse 1.4s ease-in-out infinite 0.25s;
}

@keyframes inv-lb-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* ── Leaderboard table / card list ───────────────────────────────────────── */
.inv-pet-lb-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.inv-pet-lb-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #111827;
	border-radius: 10px;
	position: relative;
	transition: background 0.15s;
}

.inv-pet-lb-row:hover {
	background: #1a2234;
}

/* Top-3 medal glow */
.inv-pet-lb-row--rank-1 { box-shadow: inset 3px 0 0 #f59e0b; }
.inv-pet-lb-row--rank-2 { box-shadow: inset 3px 0 0 #94a3b8; }
.inv-pet-lb-row--rank-3 { box-shadow: inset 3px 0 0 #cd7f32; }

/* Current user highlight */
.inv-pet-lb-row--me {
	box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 1px rgba(245, 158, 11, 0.18);
	background: rgba(245, 158, 11, 0.05);
}

/* Separator before "my rank" row when outside top 20 */
.inv-pet-lb-row--my-rank-sep {
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
	margin-top: 8px;
	padding-top: 18px;
}

.inv-pet-lb-rank {
	width: 28px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 700;
	color: #6b7494;
	flex-shrink: 0;
}

.inv-pet-lb-rank--gold   { color: #f59e0b; }
.inv-pet-lb-rank--silver { color: #94a3b8; }
.inv-pet-lb-rank--bronze { color: #cd7f32; }

.inv-pet-lb-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #080d1a;
	flex-shrink: 0;
}

.inv-pet-lb-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inv-pet-lb-username {
	font-size: 0.82rem;
	font-weight: 600;
	color: #d1d8f0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inv-pet-lb-petname {
	font-size: 0.72rem;
	color: #6b7494;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inv-pet-lb-value {
	font-size: 0.85rem;
	font-weight: 700;
	color: #f59e0b;
	white-space: nowrap;
	flex-shrink: 0;
	text-align: right;
}

/* ── Empty / error state ──────────────────────────────────────────────────── */
.inv-pet-lb-empty {
	text-align: center;
	padding: 32px 16px;
	color: #6b7494;
	font-size: 0.82rem;
}

/* ── Mobile: compact card mode ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.inv-pet-lb-row {
		flex-wrap: wrap;
		padding: 10px 12px;
	}

	.inv-pet-lb-info {
		flex: 1;
	}

	.inv-pet-lb-value {
		width: 100%;
		text-align: right;
		padding-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
		margin-top: 4px;
		font-size: 0.78rem;
	}
}

/* =============================================================================
   Specialization Paths — Stage 3 Unlock
   ============================================================================= */

/* ── Path Selection Trigger Button ───────────────────────────────────────── */
.inv-pet-path-trigger {
	margin: 0.75rem 0;
	padding: 0.85rem 1rem;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(13, 20, 36, 0.8) 100%);
	border-radius: 0.75rem;
	border: 1px solid rgba(245, 158, 11, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.inv-pet-path-trigger__hint {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: #6b7494;
	margin: 0;
}

.inv-pet-path-open-btn {
	padding: 0.55rem 1.5rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #f59e0b;
	color: #080d1a;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
	box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.inv-pet-path-open-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(245, 158, 11, 0.45);
}

.inv-pet-path-open-btn:active {
	transform: translateY(0);
}

/* ── Path Selection Modal Backdrop ──────────────────────────────────────── */
.inv-pet-path-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 13, 26, 0.88);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.inv-pet-path-modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ── Modal Container ────────────────────────────────────────────────────── */
.inv-pet-path-modal {
	background: #111827;
	border-radius: 1.25rem;
	width: 100%;
	max-width: 480px;
	max-height: 92vh;
	overflow-y: auto;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.1);
	transform: translateY(12px);
	transition: transform 0.3s ease;
}

.inv-pet-path-modal-backdrop.is-open .inv-pet-path-modal {
	transform: translateY(0);
}

/* ── Modal Header ───────────────────────────────────────────────────────── */
.inv-pet-path-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.inv-pet-path-modal__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	color: #f59e0b;
	margin: 0 0 0.2rem;
	line-height: 1.1;
}

.inv-pet-path-modal__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: #6b7494;
	margin: 0;
}

.inv-pet-path-modal__close {
	background: rgba(255, 255, 255, 0.06);
	border: none;
	color: #6b7494;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.9rem;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}

.inv-pet-path-modal__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
}

/* ── Destination Cards ──────────────────────────────────────────────────── */
.inv-pet-path-modal__cards {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.inv-pet-path-modal-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1rem 0.6rem 0.8rem;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 0.85rem;
	border: 2px solid rgba(255, 255, 255, 0.06);
	cursor: pointer;
	flex: 1;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.25s;
	text-align: center;
}

.inv-pet-path-modal-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
}

.inv-pet-path-modal-card.is-selected {
	border-color: var(--path-color, #f59e0b);
	background: rgba(255, 255, 255, 0.07);
}

.inv-pet-path-modal-card--warrior.is-selected {
	box-shadow: 0 0 22px rgba(245, 158, 11, 0.25), inset 0 0 12px rgba(245, 158, 11, 0.06);
}

.inv-pet-path-modal-card--sage.is-selected {
	box-shadow: 0 0 22px rgba(168, 85, 247, 0.25), inset 0 0 12px rgba(168, 85, 247, 0.06);
}

.inv-pet-path-modal-card--sentinel.is-selected {
	box-shadow: 0 0 22px rgba(20, 184, 166, 0.25), inset 0 0 12px rgba(20, 184, 166, 0.06);
}

.inv-pet-path-modal-card.is-dimmed {
	opacity: 0.35;
}

.inv-pet-path-modal-card__archetype {
	width: 56px;
	height: 56px;
}

.inv-pet-path-modal-card__archetype img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* Pet sprite with path tint — below archetype icon */
.inv-pet-path-modal-card__pet {
	width: 52px;
	height: 52px;
}

.inv-pet-path-modal-card__pet img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}

.inv-pet-path-tint--warrior .inv-sprite img,
.inv-pet-path-tint--warrior img {
	filter: sepia(80%) saturate(400%) hue-rotate(10deg);
}

.inv-pet-path-tint--sentinel .inv-sprite img,
.inv-pet-path-tint--sentinel img {
	filter: sepia(50%) saturate(300%) hue-rotate(180deg);
}

.inv-pet-path-tint--sage .inv-sprite img,
.inv-pet-path-tint--sage img {
	filter: sepia(50%) saturate(300%) hue-rotate(240deg);
}

.inv-pet-path-modal-card__name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: #e2e8f0;
	line-height: 1;
}

.inv-pet-path-modal-card__stat {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--path-color, #f59e0b);
	line-height: 1;
}

/* ── SVG Map — roads from hub to each destination ───────────────────────── */
.inv-pet-path-modal__map {
	margin: -0.5rem 0 -0.75rem;
	padding: 0 1.5rem;
}

.inv-path-svg {
	width: 100%;
	display: block;
}

.inv-path-svg__road {
	opacity: 0.18;
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	transition: stroke-dashoffset 0.65s ease, opacity 0.3s, filter 0.3s;
}

.inv-path-svg__road.is-active {
	opacity: 1;
	stroke-dashoffset: 0;
}

.inv-path-svg__road--warrior.is-active {
	filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.8));
}

.inv-path-svg__road--sage.is-active {
	filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.8));
}

.inv-path-svg__road--sentinel.is-active {
	filter: drop-shadow(0 0 5px rgba(20, 184, 166, 0.8));
}

.inv-path-svg__road.is-dimmed {
	opacity: 0.07;
}

/* ── Hub label ──────────────────────────────────────────────────────────── */
.inv-pet-path-modal__hub-label {
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	color: #4b5563;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: -0.5rem 0 0;
}

/* ── Info Bar ───────────────────────────────────────────────────────────── */
.inv-pet-path-modal__info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 8px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}

.inv-pet-path-modal__info.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.inv-pet-path-modal__info-name {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #f59e0b;
	letter-spacing: 0.04em;
}

.inv-pet-path-modal__info-sep {
	color: #374151;
}

.inv-pet-path-modal__info-stat {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: #c8cce8;
}

/* ── Inline error ───────────────────────────────────────────────────────── */
.inv-pet-path-modal__error {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	color: #ef4444;
	text-align: center;
	margin: -0.5rem 0 0;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.inv-pet-path-modal__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.inv-pet-path-modal__cancel {
	padding: 0.6rem 1.25rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	background: rgba(255, 255, 255, 0.06);
	color: #6b7494;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.inv-pet-path-modal__cancel:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #c8cce8;
}

.inv-pet-path-modal__confirm {
	padding: 0.6rem 1.5rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #f59e0b;
	color: #080d1a;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
}

.inv-pet-path-modal__confirm:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.inv-pet-path-modal__confirm:not(:disabled):hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* ── Path Badge (next to pet name) ──────────────────────────────────── */
.inv-pet-path-badge__img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
}

.inv-pet-path-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	margin-left: 0.4rem;
}

.inv-pet-path-badge--warrior {
	background: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.inv-pet-path-badge--sentinel {
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

.inv-pet-path-badge--sage {
	background: rgba(168, 85, 247, 0.15);
	color: #a855f7;
	box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
}

/* ── Arena Stats Bar ──────────────────────────────────────────────────────── */
.inv-pet-arena-stats {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: 8px;
	padding: 6px 12px;
	margin-top: 10px;
	font-size: 0.75rem;
	color: #9ca3af;
}

.inv-pet-arena-stats__rank {
	font-weight: 700;
	color: #f59e0b;
	font-size: 0.85rem;
	min-width: 28px;
}

.inv-pet-arena-stats__pts {
	color: #e5e7eb;
	font-weight: 600;
}

.inv-pet-arena-stats__pts span {
	color: #6b7280;
	font-weight: 400;
}

.inv-pet-arena-stats__record {
	color: #6b7280;
}

.inv-pet-arena-stats__attempts {
	margin-left: auto;
	font-size: 0.7rem;
	font-weight: 600;
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.1);
	border-radius: 4px;
	padding: 1px 5px;
}

.inv-pet-arena-stats__attempts--empty {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
}

.inv-pet-challenge-btn--disabled,
.inv-pet-challenge-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Arena opponent item — rank column ────────────────────────────────────── */
.inv-pet-opponent-item__arena {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin-left: auto;
	flex-shrink: 0;
}

.inv-pet-opponent-item__rank {
	font-size: 0.75rem;
	font-weight: 700;
	color: #f59e0b;
}

.inv-pet-opponent-item__pts {
	font-size: 0.7rem;
	color: #6b7280;
}

/* ── Arena modal hint & refresh button ───────────────────────────────────── */
.inv-pet-arena-modal-hint {
	font-size: 0.78rem;
	color: #6b7280;
	margin: 0 0 10px;
	text-align: center;
}

.inv-pet-arena-refresh-btn {
	display: block;
	width: 100%;
	padding: 8px;
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: 6px;
	color: #f59e0b;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 10px;
	transition: background 0.15s;
}

.inv-pet-arena-refresh-btn:hover {
	background: rgba(245, 158, 11, 0.18);
}

/* ── Arena battle result — stats row ─────────────────────────────────────── */
.inv-pet-battle-result__arena-stats {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: #9ca3af;
	margin: 6px 0;
}

.inv-pet-battle-result__arena-stats span:first-child {
	color: #f59e0b;
	font-weight: 700;
}

/* ── Arena leaderboard season note ───────────────────────────────────────── */
.inv-pet-arena-season-note {
	font-size: 0.72rem;
	color: #6b7280;
	text-align: center;
	margin: 0 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pet Arena Page — /pet-arena/
   ═══════════════════════════════════════════════════════════════════════════ */

.inv-pet-arena-page {
	min-height: 100vh;
	background: #080d1a;
	color: #e5e7eb;
	font-family: 'Inter', sans-serif;
	padding-bottom: 60px;
}

/* Season banner */
.inv-pet-arena-season-banner {
	text-align: center;
	padding: 48px 20px 32px;
	background: linear-gradient(180deg, rgba(245,158,11,0.08) 0%, transparent 100%);
	border-bottom: 1px solid rgba(245,158,11,0.12);
}

.inv-pet-arena-season-banner__title {
	font-family: 'Rajdhani', sans-serif;
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	font-weight: 700;
	color: #f59e0b;
	margin: 0 0 8px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.inv-pet-arena-season-banner__meta {
	font-size: 0.85rem;
	color: #9ca3af;
	margin: 0;
}

/* Podium */
.inv-pet-arena-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	max-width: 600px;
	margin: 40px auto 32px;
	padding: 0 16px;
}

.inv-pet-arena-podium__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.inv-pet-arena-podium__medal {
	font-size: 1.8rem;
	line-height: 1;
}

.inv-pet-arena-podium__pet-img-wrap {
	position: relative;
	width: 64px;
	height: 64px;
}

.inv-pet-arena-podium__pet-img-wrap--first {
	width: 84px;
	height: 84px;
}

.inv-pet-arena-podium__pet-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Legacy plain-img avatar (kept for backward compat — no longer used). */
.inv-pet-arena-podium__avatar {
	position: absolute;
	bottom: -6px;
	right: -6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #111827;
	object-fit: cover;
}

.inv-pet-arena-podium__slot--first .inv-pet-arena-podium__avatar {
	width: 28px;
	height: 28px;
}

/* New: user-avatar component overlaid on the podium pet sprite (Tavern-style
   gold or equipped frame, fallback initial letter, member/influencer badges). */
.inv-pet-arena-podium__avatar-wrap {
	position: absolute;
	bottom: -8px;
	right: -10px;
	width: 40px;
	height: 40px;
	z-index: 2;
	line-height: 0;
}

.inv-pet-arena-podium__avatar-wrap .inv-avatar-wrap {
	width: 40px !important;
	height: 40px !important;
	--inv-avatar-size: 40px;
}

/* Tighten photo-to-frame gap so the avatar feels solid (default is 76% of wrap). */
.inv-pet-arena-podium__avatar-wrap .inv-avatar-photo,
.inv-pet-arena-podium__avatar-wrap .inv-avatar-placeholder {
	width: 90% !important;
	height: 90% !important;
}

.inv-pet-arena-podium__avatar-wrap--first {
	width: 48px;
	height: 48px;
	bottom: -10px;
	right: -12px;
}

.inv-pet-arena-podium__avatar-wrap--first .inv-avatar-wrap {
	width: 48px !important;
	height: 48px !important;
	--inv-avatar-size: 48px;
}

.inv-pet-arena-podium__petname {
	font-weight: 700;
	font-size: 0.8rem;
	color: #e5e7eb;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.inv-pet-arena-podium__slot--first .inv-pet-arena-podium__petname {
	font-size: 0.9rem;
	color: #f59e0b;
}

.inv-pet-arena-podium__username {
	font-size: 0.68rem;
	color: #9ca3af;
}

.inv-pet-arena-podium__pts {
	font-size: 0.78rem;
	font-weight: 700;
	color: #f59e0b;
}

.inv-pet-arena-podium__slot--second .inv-pet-arena-podium__pts {
	color: #9ca3af;
}

.inv-pet-arena-podium__slot--third .inv-pet-arena-podium__pts {
	color: #92400e;
}

.inv-pet-arena-podium__record {
	font-size: 0.65rem;
	color: #6b7280;
}

.inv-pet-arena-podium__base {
	width: 100%;
	text-align: center;
	font-family: 'Rajdhani', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 6px 6px 0 0;
	padding: 6px 0;
	margin-top: 6px;
}

.inv-pet-arena-podium__base--first {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #080d1a;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-arena-podium__base--second {
	background: linear-gradient(135deg, #9ca3af, #6b7280);
	color: #080d1a;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-arena-podium__base--third {
	background: linear-gradient(135deg, #92400e, #78350f);
	color: #fde68a;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-pet-arena-podium__empty {
	font-size: 2rem;
	opacity: 0.3;
}

.inv-pet-arena-podium__empty-label {
	font-size: 0.7rem;
	color: #4b5563;
}

/* Full leaderboard */
.inv-pet-arena-lb {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 16px;
}

.inv-pet-arena-lb__title {
	font-family: 'Rajdhani', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
}

.inv-pet-arena-lb__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.inv-pet-arena-lb__row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #111827;
	border-radius: 8px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,0.04);
}

.inv-pet-arena-lb__row--top3 {
	border-color: rgba(245,158,11,0.2);
	background: rgba(245,158,11,0.04);
}

.inv-pet-arena-lb__rank {
	font-family: 'Rajdhani', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: #6b7280;
	min-width: 28px;
	text-align: center;
}

.inv-pet-arena-lb__rank--gold   { color: #f59e0b; font-size: 1.1rem; }
.inv-pet-arena-lb__rank--silver { color: #9ca3af; font-size: 1.1rem; }
.inv-pet-arena-lb__rank--bronze { color: #92400e; font-size: 1.1rem; }

.inv-pet-arena-lb__avatar-wrap {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.inv-pet-arena-lb__pet-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.inv-pet-arena-lb__owner-avatar {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #111827;
	object-fit: cover;
}

.inv-pet-arena-lb__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.inv-pet-arena-lb__username {
	font-size: 0.82rem;
	font-weight: 600;
	color: #e5e7eb;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inv-pet-arena-lb__petname {
	font-size: 0.7rem;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inv-pet-arena-lb__stats {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	flex-shrink: 0;
}

.inv-pet-arena-lb__pts {
	font-size: 0.82rem;
	font-weight: 700;
	color: #f59e0b;
}

.inv-pet-arena-lb__record {
	font-size: 0.68rem;
	color: #6b7280;
}

/* Empty state */
.inv-pet-arena-empty {
	text-align: center;
	padding: 60px 20px;
	color: #6b7280;
	font-size: 0.9rem;
}

/* CTA */
.inv-pet-arena-cta {
	text-align: center;
	margin: 40px auto 0;
	padding: 0 20px;
}

.inv-pet-arena-cta__btn {
	display: inline-block;
	padding: 12px 32px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #080d1a;
	font-family: 'Rajdhani', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.inv-pet-arena-cta__btn:hover {
	opacity: 0.88;
}

.inv-pet-arena-lb__challenge-btn {
	padding: 5px 10px;
	background: rgba(245,158,11,0.12);
	color: #f59e0b;
	border: 1px solid rgba(245,158,11,0.25);
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.8rem;
	transition: background 0.15s, border-color 0.15s;
	flex-shrink: 0;
	margin-left: auto;
}

.inv-pet-arena-lb__challenge-btn:hover {
	background: rgba(245,158,11,0.22);
	border-color: rgba(245,158,11,0.4);
}

.inv-pet-arena-cta__note {
	margin: 12px 0 0;
	font-size: 0.75rem;
	color: #6b7280;
}

/* ── Type Advantage Badge (battle result) ── */
.inv-pet-battle-result__advantage {
	display: inline-block;
	margin: 6px auto 2px;
	padding: 3px 10px;
	background: rgba(245, 158, 11, 0.15);
	border: 1px solid rgba(245, 158, 11, 0.4);
	border-radius: 20px;
	color: #f59e0b;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.inv-pet-battle-result__advantage--opp {
	background: rgba(107, 114, 128, 0.12);
	border-color: rgba(107, 114, 128, 0.3);
	color: #9ca3af;
}

/* ── Path image in opponent list ── */
.inv-pet-opponent-item__path-img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
	margin-left: 4px;
	flex-shrink: 0;
}

/* ── Path image in battle result ── */
.inv-pet-battle-result__path-img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 2px;
}

/* ── Arena rank badge on pet card ── */
.inv-pet-compact__arena-rank {
	display: inline-block;
	padding: 1px 6px;
	background: rgba(245, 158, 11, 0.15);
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: 10px;
	color: #f59e0b;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
	margin-left: 4px;
}

.inv-pet-compact__arena-rank:empty {
	display: none;
}

/* ── Go to Arena button in pet widget ── */
.inv-pet-goto-arena-btn {
	display: block;
	width: 100%;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid rgba(245, 158, 11, 0.4);
	border-radius: 6px;
	color: #f59e0b;
	font-family: 'Rajdhani', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: background 0.15s, border-color 0.15s;
	box-sizing: border-box;
}

.inv-pet-goto-arena-btn:hover {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.7);
}

/* ==========================================================================
   Pet Level Bar
   ========================================================================== */

.inv-pet-level-bar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
	margin-bottom: 4px;
}

.inv-pet-level-bar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: rgba(240, 244, 255, 0.65);
}

.inv-pet-level-bar__header strong {
	color: #f59e0b;
	font-weight: 700;
}

.inv-pet-level-max {
	font-size: 0.7rem;
	color: rgba(240, 244, 255, 0.4);
}

.inv-pet-level-track {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	overflow: hidden;
}

.inv-pet-level-fill {
	height: 100%;
	background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
	border-radius: 3px;
	transition: width 0.4s ease;
}

/* ==========================================================================
   Evolve / Sacrifice Section
   ========================================================================== */

.inv-pet-evolve-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
	padding: 14px;
	background: rgba(245, 158, 11, 0.06);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: 10px;
}

.inv-pet-evolve-hint {
	font-size: 0.82rem;
	color: #f59e0b;
	font-weight: 600;
	margin: 0;
	text-align: center;
}

.inv-pet-evolve-section--locked {
	background: rgba(100, 116, 139, 0.06);
	border-color: rgba(100, 116, 139, 0.25);
}

.inv-pet-evolve-section--locked .inv-pet-evolve-hint {
	color: #94a3b8;
}

.inv-pet-sacrifice-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.inv-pet-sacrifice-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	font-size: 0.8rem;
	color: #f0f4ff;
}

.inv-pet-sacrifice-item:hover {
	border-color: rgba(245, 158, 11, 0.4);
	background: rgba(245, 158, 11, 0.05);
}

.inv-pet-sacrifice-item.selected {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.12);
}

.inv-pet-sacrifice-item__icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.inv-pet-sacrifice-item__name {
	flex: 1;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inv-pet-sacrifice-item__stage {
	font-size: 0.7rem;
	color: rgba(240, 244, 255, 0.45);
	flex-shrink: 0;
}

.inv-pet-sacrifice-item__quality {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.inv-pet-sacrifice-item__arrow {
	font-size: 0.7rem;
	color: rgba(240, 244, 255, 0.3);
	flex-shrink: 0;
}

.inv-pet-sacrifice-item__result {
	font-size: 0.68rem;
	font-weight: 700;
	flex-shrink: 0;
}

.inv-pet-sacrifice-item__upgrade {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.inv-pet-sacrifice-item__same {
	font-size: 0.68rem;
	font-weight: 700;
	opacity: 0.75;
}

.inv-pet-sacrifice-loading,
.inv-pet-sacrifice-empty {
	grid-column: 1 / -1;
	font-size: 0.8rem;
	color: rgba(240, 244, 255, 0.5);
	text-align: center;
	margin: 0;
	padding: 8px 0;
}

div.inv-pet-sacrifice-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 16px;
	background: rgba(245, 158, 11, 0.06);
	border: 1px dashed rgba(245, 158, 11, 0.3);
	border-radius: 12px;
	color: rgba(240, 244, 255, 0.85);
}

.inv-pet-sacrifice-empty__img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	filter: grayscale(0.4) brightness(0.8);
	opacity: 0.7;
}

.inv-pet-sacrifice-empty__title {
	margin: 0;
	font-family: 'Rajdhani', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #f59e0b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.inv-pet-sacrifice-empty__text {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(240, 244, 255, 0.75);
	max-width: 360px;
}

.inv-pet-sacrifice-empty__hints {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.75rem;
	color: rgba(240, 244, 255, 0.6);
}

.inv-pet-sacrifice-empty__hints li::before {
	content: '✓ ';
	color: #22c55e;
	font-weight: 700;
}

.inv-pet-sacrifice-empty__cta {
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: rgba(240, 244, 255, 0.65);
	font-style: italic;
}

.inv-pet-evolve-btn {
	width: 100%;
	padding: 10px 16px;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #080d1a;
	border: none;
	border-radius: 8px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
}

.inv-pet-evolve-btn:hover:not(:disabled) {
	opacity: 0.9;
	transform: translateY(-1px);
}

.inv-pet-evolve-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

/* ==========================================================================
   Turn-based Battle Log + HP Bars + MDEF Pill
   ========================================================================== */

/* HP summary bars */
.inv-pet-hp-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0;
}

.inv-pet-hp-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.inv-pet-hp-row__label {
	font-size: 0.72rem;
	color: rgba(240, 244, 255, 0.55);
	width: 68px;
	flex-shrink: 0;
	text-align: right;
}

.inv-pet-hp-bar {
	flex: 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
}

.inv-pet-hp-bar__fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
}

.inv-pet-hp-bar__fill--high  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.inv-pet-hp-bar__fill--mid   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.inv-pet-hp-bar__fill--low   { background: linear-gradient(90deg, #ef4444, #f87171); }

.inv-pet-hp-row__pct {
	font-size: 0.7rem;
	color: rgba(240, 244, 255, 0.6);
	width: 30px;
	flex-shrink: 0;
	text-align: right;
}

/* Turn log collapsible */
.inv-pet-turn-log {
	margin: 10px 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	overflow: hidden;
}

.inv-pet-turn-log__toggle {
	padding: 7px 10px;
	font-size: 0.75rem;
	color: rgba(240, 244, 255, 0.55);
	cursor: pointer;
	user-select: none;
	list-style: none;
	background: rgba(255, 255, 255, 0.04);
}

.inv-pet-turn-log__toggle::-webkit-details-marker { display: none; }

.inv-pet-turn-log__body {
	max-height: 180px;
	overflow-y: auto;
	padding: 4px 0;
}

.inv-pet-turn-row {
	display: flex;
	gap: 6px;
	align-items: baseline;
	padding: 3px 10px;
	font-size: 0.72rem;
	line-height: 1.4;
}

.inv-pet-turn-row--challenger {
	background: rgba(245, 158, 11, 0.06);
}

.inv-pet-turn-row--opponent {
	background: rgba(59, 130, 246, 0.06);
}

.inv-pet-turn-row__num {
	font-weight: 700;
	font-size: 0.65rem;
	color: rgba(240, 244, 255, 0.35);
	width: 22px;
	flex-shrink: 0;
}

.inv-pet-turn-row--challenger .inv-pet-turn-row__text { color: #fcd34d; }
.inv-pet-turn-row--opponent   .inv-pet-turn-row__text { color: #93c5fd; }

/* MDEF training pill */
.inv-pet-stat-pill--mdef {
	--pill-color: #06b6d4;
}

.inv-pet-stat-pill--mdef.inv-pet-stat-pill--active {
	background: rgba(6, 182, 212, 0.18);
	border-color: #06b6d4;
	color: #06b6d4;
}

/* Round row (simultaneous combat) */
.inv-pet-turn-row--round {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	font-size: 0.72rem;
	background: rgba(255, 255, 255, 0.03);
}

.inv-pet-turn-row--round .inv-pet-turn-row--challenger {
	color: #fcd34d;
	font-weight: 700;
	background: transparent;
}

.inv-pet-turn-row--round .inv-pet-turn-row--opponent {
	color: #93c5fd;
	font-weight: 700;
	background: transparent;
}

.inv-pet-turn-row__vs {
	color: rgba(240, 244, 255, 0.3);
	font-size: 0.65rem;
}

.inv-pet-turn-row__hp {
	margin-left: auto;
	color: rgba(240, 244, 255, 0.35);
	font-size: 0.65rem;
}

/* ==========================================================================
   Pet Quality Badges
   ========================================================================== */

.inv-pet-quality {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.65rem;
}

.inv-pet-quality--common    { color: #9ca3af; border-color: #9ca3af33; }
.inv-pet-quality--uncommon  { color: #22c55e; border-color: #22c55e33; }
.inv-pet-quality--rare      { color: #3b82f6; border-color: #3b82f633; }
.inv-pet-quality--epic      { color: #a855f7; border-color: #a855f733; }
.inv-pet-quality--legendary { color: #f59e0b; border-color: #f59e0b33; }
.inv-pet-quality--mythical  {
	background: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	border-color: #ec489933;
}

/* ── AI Battle Narrative (Arena) ─────────────────────────────────────────── */
.inv-pet-battle-narrative {
	font-size: 0.82rem;
	font-style: italic;
	color: rgba(240, 244, 255, 0.72);
	line-height: 1.55;
	text-align: center;
	padding: 8px 12px;
	margin: 8px 0 4px;
	border-top: 1px solid rgba(245, 158, 11, 0.18);
	border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}

/* ── Battle Report Scoreboard ─────────────────────────────────────────────── */
.inv-pet-report {
	margin: 10px 0 8px;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	overflow: hidden;
}
.inv-pet-report__header {
	background: rgba(255,255,255,0.04);
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	padding: 5px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.inv-pet-report__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.inv-pet-report__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.72rem;
}
.inv-pet-report__table thead tr th {
	padding: 4px 6px;
	text-align: right;
	font-weight: 600;
	color: #64748b;
	background: rgba(255,255,255,0.02);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	white-space: nowrap;
}
.inv-pet-report__table thead tr th:first-child { text-align: left; }
.inv-pet-report__team-sep td {
	padding: 3px 8px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #22c55e;
	background: rgba(34,197,94,0.06);
}
.inv-pet-report__team-sep--opp td {
	color: #f87171;
	background: rgba(248,113,113,0.06);
}
.inv-pet-report__row td {
	padding: 4px 6px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	white-space: nowrap;
}
.inv-pet-report__row.is-ko { opacity: 0.55; }
.inv-pet-report__name {
	text-align: left;
	color: #e2e8f0;
	font-weight: 500;
	min-width: 90px;
}
.inv-pet-report__name .inv-pet-report__badge {
	margin-left: 4px;
}
.inv-pet-report__hp { text-align: right; color: #94a3b8; }
.inv-pet-report__ko { color: #f87171; font-weight: 700; }
.inv-pet-report__num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-pet-report__num--dealt   { color: #f87171; }
.inv-pet-report__num--blocked { color: #3b82f6; }
.inv-pet-report__num--taken   { color: #a78bfa; }
.inv-pet-report__num--heal    { color: #22c55e; }
.inv-pet-report__num--kills   { color: #f59e0b; }

/* Badge pills */
.inv-pet-report__badge {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 4px;
	line-height: 1.4;
	vertical-align: middle;
}
.inv-pet-report__badge--mvp {
	background: rgba(245,158,11,0.22);
	color: #fbbf24;
	border: 1px solid rgba(245,158,11,0.35);
}
.inv-pet-report__badge--wall {
	background: rgba(59,130,246,0.18);
	color: #60a5fa;
	border: 1px solid rgba(59,130,246,0.3);
}
.inv-pet-report__badge--medic {
	background: rgba(34,197,94,0.15);
	color: #4ade80;
	border: 1px solid rgba(34,197,94,0.28);
}

/* ── Arena Interactive Battle Phase ──────────────────────────────────────── */
.inv-pet-challenge-battle-phase { padding: 4px 0; }
/* ── Arena Battle Modal — wider card during battle ──────────────────────────── */
.inv-pet-challenge-modal__card--battle { max-width: 540px; }

/* ── Arena Battle Container ─────────────────────────────────────────────────── */
.inv-arena-battle {
	border: 1px solid rgba(245,158,11,0.25);
	border-radius: 14px;
	padding: 14px 12px;
	position: relative;
	overflow: hidden;
	background: #060c18;
	min-height: 320px;
}
.inv-arena-battle__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.inv-arena-battle__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: 0.6; }
.inv-arena-battle::before {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(to bottom, rgba(6,12,26,0.55) 0%, rgba(6,12,26,0.15) 35%, rgba(6,12,26,0.75) 100%),
		radial-gradient(ellipse at 20% 60%, rgba(34,197,94,0.07) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 60%, rgba(239,68,68,0.07) 0%, transparent 50%);
	pointer-events: none;
}
.inv-arena-battle__teams,
.inv-arena-battle__log-wrap,
.inv-arena-battle__skills { position: relative; z-index: 2; }

/* ── Teams Grid ─────────────────────────────────────────────────────────────── */
.inv-arena-battle__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px;
	align-items: start;
	margin-bottom: 10px;
	padding: 8px 4px 6px;
}
.inv-arena-battle__vs {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: #fbbf24;
	align-self: center;
	text-align: center;
	text-shadow: 0 0 18px rgba(245,158,11,0.65);
	letter-spacing: 0.08em;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245,158,11,0.2) 0%, transparent 70%);
	border: 1px solid rgba(245,158,11,0.3);
	box-shadow: 0 0 16px rgba(245,158,11,0.2);
	animation: arena-vs-pulse 2.2s ease-in-out infinite;
}
@keyframes arena-vs-pulse {
	0%, 100% { box-shadow: 0 0 16px rgba(245,158,11,0.2); }
	50%       { box-shadow: 0 0 28px rgba(245,158,11,0.5); }
}
.inv-arena-battle__side { display: flex; flex-direction: column; gap: 6px; }

/* ── Pet Card ───────────────────────────────────────────────────────────────── */
.inv-arena-pet {
	background: rgba(8,13,26,0.65);
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 10px;
	padding: 8px 6px 6px;
	font-size: 0.72rem;
	position: relative;
	overflow: visible;
	transition: opacity 0.4s, filter 0.4s;
	backdrop-filter: blur(4px);
}
.inv-arena-pet.is-ko { opacity: 0.35; filter: grayscale(0.9); }

/* Active pet — pulsing amber glow */
@keyframes arena-active-glow {
	0%, 100% { border-color: rgba(245,158,11,0.45); box-shadow: 0 0 8px rgba(245,158,11,0.12); background: rgba(245,158,11,0.06); }
	50%       { border-color: rgba(245,158,11,0.9);  box-shadow: 0 0 20px rgba(245,158,11,0.32); background: rgba(245,158,11,0.10); }
}
.inv-arena-pet.is-active { animation: arena-active-glow 1.5s ease infinite; }

/* Attack flash */
@keyframes arena-attack-flash {
	0%   { transform: scale(1);    box-shadow: none; }
	35%  { transform: scale(1.06); box-shadow: 0 0 20px rgba(245,158,11,0.55); }
	100% { transform: scale(1);    box-shadow: none; }
}
.inv-arena-pet--attacking { animation: arena-attack-flash 0.42s ease forwards; z-index: 5; }

/* Hit shake */
@keyframes arena-hit {
	0%   { transform: translateX(0);   background: rgba(255,255,255,0.04); }
	15%  { transform: translateX(6px); background: rgba(239,68,68,0.22); }
	35%  { transform: translateX(-6px); background: rgba(239,68,68,0.22); }
	55%  { transform: translateX(4px); background: rgba(239,68,68,0.10); }
	75%  { transform: translateX(-2px); }
	100% { transform: translateX(0);   background: rgba(255,255,255,0.04); }
}
.inv-arena-pet--hit { animation: arena-hit 0.44s ease; }

/* Crit hit — bigger + brighter */
@keyframes arena-crit-hit {
	0%   { transform: translateX(0) scale(1);    background: rgba(255,255,255,0.04); }
	10%  { transform: translateX(9px) scale(0.97); background: rgba(251,191,36,0.32); }
	30%  { transform: translateX(-9px) scale(0.97); background: rgba(251,191,36,0.32); }
	50%  { transform: translateX(6px); }
	70%  { transform: translateX(-4px); }
	100% { transform: translateX(0) scale(1);    background: rgba(255,255,255,0.04); }
}
.inv-arena-pet--crit-hit { animation: arena-crit-hit 0.56s ease; }

/* ── Damage / Heal Floats ───────────────────────────────────────────────────── */
@keyframes arena-float-up {
	0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
	60%  { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1.1); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-52px) scale(0.85); }
}
.inv-arena-float {
	position: absolute;
	top: 6px;
	left: 50%;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	pointer-events: none;
	z-index: 30;
	white-space: nowrap;
	animation: arena-float-up 1s ease forwards;
}
.inv-arena-float--dmg   { color: #f87171; text-shadow: 0 1px 5px rgba(0,0,0,0.95); }
.inv-arena-float--crit  { color: #fbbf24; font-size: 1.35rem; text-shadow: 0 0 12px rgba(251,191,36,0.7), 0 1px 4px rgba(0,0,0,0.9); }
.inv-arena-float--heal  { color: #4ade80; text-shadow: 0 1px 5px rgba(0,0,0,0.95); }
.inv-arena-float--dot   { color: #fb923c; font-size: 0.88rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.inv-arena-float--block { color: #a78bfa; font-size: 0.95rem; text-shadow: 0 0 10px rgba(167,139,250,0.6), 0 1px 4px rgba(0,0,0,0.9); }
.inv-arena-float--dodge { color: #60a5fa; font-size: 0.95rem; text-shadow: 0 0 10px rgba(96,165,250,0.6), 0 1px 4px rgba(0,0,0,0.9); }

/* ── Portrait ───────────────────────────────────────────────────────────────── */
.inv-arena-pet__portrait { display: flex; justify-content: center; margin-bottom: 4px; }
.inv-arena-pet__img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8));
	transition: filter 0.3s;
}
.inv-arena-pet.is-ko .inv-arena-pet__img { opacity: 0.38; filter: grayscale(1) drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* ── Name & Shield ──────────────────────────────────────────────────────────── */
.inv-arena-pet__name {
	color: #e2e8f0;
	font-weight: 600;
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.67rem;
	justify-content: center;
	white-space: nowrap;
}
.inv-arena-pet__shield { font-size: 0.64rem; color: #60a5fa; margin-left: auto; }

/* ── HP Bar ─────────────────────────────────────────────────────────────────── */
.inv-arena-hp { display: flex; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.inv-arena-hp__fill { height: 100%; border-radius: 3px; transition: width 0.45s ease; flex-shrink: 0; }
.inv-arena-hp__fill--high { background: linear-gradient(to right, #16a34a, #22c55e); }
.inv-arena-hp__fill--mid  { background: linear-gradient(to right, #d97706, #f59e0b); }
.inv-arena-hp__fill--low  { background: linear-gradient(to right, #dc2626, #ef4444); }
.inv-arena-hp__shield { height: 100%; background: linear-gradient(to right, #6366f1, #818cf8); border-radius: 0 3px 3px 0; flex-shrink: 0; transition: width 0.45s ease; }
.inv-arena-pet__hp-shield { color: #818cf8; font-size: 0.7em; }
.inv-arena-pet__hp-txt { color: #64748b; font-size: 0.62rem; text-align: center; }

/* ── Buffs ──────────────────────────────────────────────────────────────────── */
.inv-arena-pet__buffs { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin: 2px 0; }
.inv-arena-buff {
	display: inline-flex; align-items: center; gap: 2px;
	color: var(--buff-color, #9ca3af);
	font-size: .65rem; font-weight: 700;
	background: rgba(0,0,0,.35); border-radius: 4px; padding: 1px 4px; line-height: 1.3;
}
.inv-arena-buff__img { width: 16px; height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; filter: drop-shadow(0 0 3px var(--buff-color, #9ca3af)); }
.inv-arena-buff__turns { font-size: 0.62rem; font-weight: 700; color: var(--buff-color, #9ca3af); line-height: 1; }

/* ── Battle Log ─────────────────────────────────────────────────────────────── */
.inv-arena-battle__log-wrap {
	background: rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 6px;
	max-height: 118px;
	overflow-y: auto;
	padding: 5px 8px;
	margin-bottom: 8px;
	font-family: Menlo, monospace;
	font-size: 0.63rem;
	line-height: 1.65;
	scrollbar-width: thin;
	scrollbar-color: rgba(245,158,11,0.2) transparent;
}
@keyframes arena-log-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.inv-arena-log-entry     { color: #475569; animation: arena-log-in 0.18s ease; }
.inv-arena-log-entry--a  { color: #4ade80; }
.inv-arena-log-entry--b  { color: #f87171; }
.inv-arena-log-entry--sys { color: #94a3b8; font-style: italic; }

/* ── Skill Bar ──────────────────────────────────────────────────────────────── */
.inv-arena-battle__skills { min-height: 52px; }
.inv-arena-battle__skills-label { font-size: 0.7rem; color: #94a3b8; margin-bottom: 5px; font-weight: 600; }
.inv-arena-battle__skills-hint  { font-size: 0.72rem; color: #475569; text-align: center; padding: 10px 0; }
.inv-arena-battle__skills-hint--err { color: #f87171; margin-bottom: 6px; padding-bottom: 0; }
.inv-arena-retry-btn {
	display: block;
	width: 100%;
	padding: 10px;
	background: rgba(245,158,11,0.12);
	border: 1px solid rgba(245,158,11,0.4);
	border-radius: 8px;
	color: #f59e0b;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.03em;
	transition: background 0.15s, border-color 0.15s;
}
.inv-arena-retry-btn:hover { background: rgba(245,158,11,0.22); border-color: #f59e0b; }
.inv-arena-battle__skills-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.inv-arena-skill {
	background: rgba(59,130,246,0.12);
	border: 1px solid rgba(59,130,246,0.28);
	border-radius: 8px;
	padding: 8px 5px 6px;
	cursor: pointer;
	color: #93c5fd;
	font-size: 0.65rem;
	text-align: center;
	line-height: 1.3;
	transition: background 0.15s, border-color 0.15s, transform 0.1s;
	position: relative;
}
.inv-arena-skill:hover:not(:disabled) { background: rgba(59,130,246,0.26); border-color: #3b82f6; transform: translateY(-1px); }
.inv-arena-skill:active:not(:disabled) { transform: translateY(0); }
.inv-arena-skill.is-cd { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #475569; cursor: default; }
.inv-arena-skill__name { display: block; }
.inv-arena-skill__cd   { display: block; font-size: 0.6rem; color: #f59e0b; margin-top: 2px; }
.inv-arena-skill__icon { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 5px; border-radius: 6px; }

/* ── Target Picker ──────────────────────────────────────────────────────────── */
.inv-arena-battle__targets { margin-top: 5px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 7px; }
#inv-arena-target-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-arena-target-btn {
	flex: 1;
	min-width: 72px;
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.25);
	border-radius: 8px;
	padding: 8px 5px 6px;
	color: #fca5a5;
	font-size: 0.64rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.inv-arena-target-btn:hover:not(:disabled) { background: rgba(239,68,68,0.26); border-color: #ef4444; transform: translateY(-2px); }
.inv-arena-target-btn:active:not(:disabled) { transform: translateY(0); }
.inv-arena-target-btn.is-dead { opacity: 0.28; cursor: default; }
.inv-arena-target-btn .inv-arena-pet__img { width: 44px; height: 44px; object-fit: contain; }
.inv-arena-target-btn .inv-arena-hp { width: 100%; margin: 0; }

/* ── Arena Action Bar ─────────────────────────────────────────────────────── */
.inv-arena-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}
.inv-arena-actions__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 8px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s, border-color 0.15s;
	text-decoration: none;
	position: relative;
}
.inv-arena-actions__btn--team {
	background: rgba(59,130,246,0.15);
	border-color: rgba(59,130,246,0.35);
	color: #93c5fd;
}
.inv-arena-actions__btn--team:hover {
	background: rgba(59,130,246,0.28);
	border-color: #3b82f6;
}
.inv-arena-actions__btn--history {
	background: rgba(148,163,184,0.1);
	border-color: rgba(148,163,184,0.25);
	color: #cbd5e1;
}
.inv-arena-actions__btn--history:hover {
	background: rgba(148,163,184,0.2);
	border-color: rgba(148,163,184,0.4);
}
.inv-arena-actions__btn--challenge {
	background: rgba(245,158,11,0.18);
	border-color: rgba(245,158,11,0.45);
	color: #fbbf24;
}
.inv-arena-actions__btn--challenge:hover {
	background: rgba(245,158,11,0.32);
	border-color: #f59e0b;
}
.inv-arena-actions__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9999px;
	font-size: 0.65rem;
	font-weight: 800;
	background: rgba(59,130,246,0.4);
	color: #fff;
	line-height: 1;
}
.inv-arena-actions__badge--warn {
	background: #f59e0b;
	color: #0a1128;
}

/* ── Shared Arena Modal ───────────────────────────────────────────────────── */
.inv-arena-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9000;
	align-items: center;
	justify-content: center;
}
.inv-arena-modal--open {
	display: flex;
}
.inv-arena-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(2px);
}
.inv-arena-modal__card {
	position: relative;
	z-index: 1;
	background: #111827;
	border: 1px solid rgba(245,158,11,0.2);
	border-radius: 12px;
	width: min(560px, 94vw);
	max-height: 88vh;
	overflow-y: auto;
	padding: 20px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.inv-arena-modal__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.inv-arena-modal__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: #fbbf24;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.inv-arena-modal__close {
	background: none;
	border: none;
	color: #64748b;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	transition: color 0.15s;
}
.inv-arena-modal__close:hover { color: #e2e8f0; }
.inv-arena-modal__hint {
	font-size: 0.78rem;
	color: #64748b;
	margin: 0 0 10px;
}
.inv-arena-modal__empty {
	font-size: 0.82rem;
	color: #94a3b8;
	font-style: italic;
	margin: 0 0 12px;
}
.inv-arena-modal__secondary-btn {
	padding: 7px 16px;
	background: rgba(245,158,11,0.12);
	border: 1px solid rgba(245,158,11,0.35);
	border-radius: 6px;
	color: #fbbf24;
	font-weight: 700;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background 0.15s;
}
.inv-arena-modal__secondary-btn:hover { background: rgba(245,158,11,0.24); }
.inv-arena-modal__primary-btn {
	padding: 8px 20px;
	background: #f59e0b;
	color: #0a1128;
	border: none;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s;
}
.inv-arena-modal__primary-btn:hover:not([disabled]) { background: #fbbf24; }
.inv-arena-modal__primary-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── My Team modal — current lineup cards ────────────────────────────────── */
.inv-arena-team-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 10px;
}
.inv-arena-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 8px;
	background: rgba(15,23,42,0.6);
	border: 1px solid rgba(34,197,94,0.22);
	border-radius: 8px;
	text-align: center;
}
.inv-arena-team-card__emoji { font-size: 1.6rem; }
.inv-arena-team-card__name  { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; margin-top: 4px; }
.inv-arena-team-card__meta  { font-size: 0.62rem; color: #94a3b8; }

/* ── Lineup picker ────────────────────────────────────────────────────────── */
.inv-arena-lineup-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 7px;
	margin: 10px 0 12px;
}
.inv-arena-lineup-picker__loading {
	grid-column: 1 / -1;
	text-align: center;
	color: #64748b;
	font-size: 0.8rem;
	padding: 16px 0;
}
.inv-arena-lineup-picker-pet {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 9px 6px;
	background: rgba(15,23,42,0.6);
	border: 2px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.inv-arena-lineup-picker-pet:hover { border-color: rgba(245,158,11,0.4); }
.inv-arena-lineup-picker-pet.is-selected {
	border-color: #f59e0b;
	background: rgba(245,158,11,0.12);
}
.inv-arena-lineup-picker-pet__img   { width: 56px; height: 56px; object-fit: contain; }
.inv-arena-lineup-picker-pet__emoji { font-size: 1.6rem; }
.inv-arena-lineup-picker-pet__name  { font-size: 0.72rem; font-weight: 700; color: #e2e8f0; margin-top: 4px; text-align: center; }
.inv-arena-lineup-picker-pet__meta  { font-size: 0.6rem; color: #94a3b8; margin-top: 2px; }
.inv-arena-lineup-picker__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px dashed rgba(255,255,255,0.07);
}
.inv-arena-lineup-picker__count { font-size: 0.82rem; font-weight: 700; color: #cbd5e1; }

/* ── History modal ────────────────────────────────────────────────────────── */
.inv-arena-history__loading {
	text-align: center;
	color: #64748b;
	font-size: 0.82rem;
	padding: 24px 0;
}
.inv-arena-history__empty {
	text-align: center;
	color: #64748b;
	font-size: 0.82rem;
	font-style: italic;
	padding: 20px 0;
	margin: 0;
}
.inv-arena-history__item {
	border-bottom: 1px solid rgba(255,255,255,0.06);
	padding: 10px 0;
}
.inv-arena-history__item:last-child { border-bottom: none; }
.inv-arena-history__row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.inv-arena-history__badge {
	display: inline-block;
	min-width: 44px;
	text-align: center;
	padding: 3px 7px;
	border-radius: 5px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
.inv-arena-history__badge--win  { background: rgba(34,197,94,0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.inv-arena-history__badge--loss { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.28); }
.inv-arena-history__badge--tie  { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.inv-arena-history__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.inv-arena-history__vs { font-size: 0.82rem; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-arena-history__pets { font-size: 0.68rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-arena-history__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
}
.inv-arena-history__pts { font-size: 0.82rem; font-weight: 700; }
.inv-arena-history__pts--pos { color: #4ade80; }
.inv-arena-history__pts--neg { color: #f87171; }
.inv-arena-history__pts--tie { color: #fbbf24; }
.inv-arena-history__date { font-size: 0.65rem; color: #475569; }
.inv-arena-history__log {
	margin-top: 6px;
}
.inv-arena-history__log-toggle {
	font-size: 0.72rem;
	color: #475569;
	cursor: pointer;
	list-style: none;
	padding: 4px 0;
}
.inv-arena-history__log-toggle:hover { color: #94a3b8; }
.inv-arena-history__log-toggle::-webkit-details-marker { display: none; }
.inv-arena-history__log-toggle::before { content: '▶ '; font-size: 0.6rem; }
details[open] .inv-arena-history__log-toggle::before { content: '▼ '; }
.inv-arena-hlog {
	max-height: 180px;
	overflow-y: auto;
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
	padding: 6px 8px;
	font-family: Menlo, monospace;
	font-size: 0.63rem;
	line-height: 1.6;
	margin-top: 4px;
}
.inv-arena-hlog__entry      { color: #475569; }
.inv-arena-hlog__entry--a   { color: #4ade80; }
.inv-arena-hlog__entry--b   { color: #f87171; }

/* ── Expeditions Accordion ─────────────────────────────────────────────────── */
.inv-pet-expeditions {
	margin-top: 12px;
	border: 1px solid rgba(245,158,11,.2);
	border-radius: 10px;
	overflow: hidden;
}
.inv-pet-expeditions__toggle {
	width: 100%;
	background: rgba(245,158,11,.06);
	border: none;
	color: #e2e8f0;
	padding: 10px 14px;
	text-align: left;
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.inv-pet-expeditions__toggle:hover { background: rgba(245,158,11,.12); }
.inv-pet-expeditions__toggle-icon { font-size: 0.6rem; transition: transform .2s; }
.inv-pet-expeditions__toggle[aria-expanded="true"] .inv-pet-expeditions__toggle-icon { transform: rotate(90deg); }
.inv-pet-expeditions__badge {
	margin-left: auto;
	background: #f59e0b;
	color: #080d1a;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 0.65rem;
	font-weight: 700;
	animation: inv-exp-pulse 2s ease-in-out infinite;
}
@keyframes inv-exp-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .5; }
}
.inv-pet-expeditions__body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Expedition card */
.inv-exp-card {
	background: #111827;
	border: 1px solid #1f2937;
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.inv-exp-card--unavailable { opacity: .55; }
.inv-exp-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.inv-exp-card__icon   { font-size: 1.1rem; flex-shrink: 0; }
.inv-exp-card__label  { font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 0.95rem; color: #e2e8f0; flex: 1; }
.inv-exp-card__dur    { font-size: 0.7rem; color: #6b7280; }
.inv-exp-card__stats  { font-size: 0.72rem; color: #64748b; display: flex; gap: 6px; flex-wrap: wrap; }
.inv-exp-card__stat   { background: rgba(255,255,255,.05); border-radius: 4px; padding: 1px 5px; }
.inv-exp-card__stat--atk  { color: #f59e0b; }
.inv-exp-card__stat--def  { color: #3b82f6; }
.inv-exp-card__stat--mor  { color: #4ade80; }
.inv-exp-card__stat--wis  { color: #a855f7; }
.inv-exp-card__power  { font-size: 0.72rem; color: #94a3b8; }
.inv-exp-card__power-bar { background: #1f2937; border-radius: 3px; height: 4px; margin-top: 3px; }
.inv-exp-card__power-fill { background: #f59e0b; border-radius: 3px; height: 4px; }
.inv-exp-card__reason { font-size: 0.7rem; color: #ef4444; }
.inv-exp-card__foot   { display: flex; justify-content: flex-end; margin-top: 4px; }
.inv-exp-card__send {
	background: #f59e0b;
	color: #080d1a;
	border: none;
	border-radius: 6px;
	padding: 5px 14px;
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.inv-exp-card__send:disabled { opacity: .4; cursor: not-allowed; }

/* Active expedition banner */
.inv-exp-banner {
	background: #080d1a;
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.inv-exp-banner__type  { font-family: Rajdhani, sans-serif; font-weight: 700; color: #f59e0b; font-size: 1rem; flex: 1; }
.inv-exp-banner__timer { font-size: 0.8rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.inv-exp-banner__collect {
	background: #22c55e;
	color: #052e16;
	border: none;
	border-radius: 6px;
	padding: 5px 12px;
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	cursor: pointer;
	display: none;
}

/* Result screen */
.inv-exp-result {
	text-align: center;
	padding: 12px;
}
.inv-exp-result__badge {
	font-family: Rajdhani, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	border-radius: 6px;
	padding: 4px 14px;
	display: inline-block;
	margin-bottom: 8px;
}
.inv-exp-result--critical .inv-exp-result__badge { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.4); }
.inv-exp-result--success   .inv-exp-result__badge { background: rgba(34,197,94,.12);  color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.inv-exp-result--partial   .inv-exp-result__badge { background: rgba(148,163,184,.1); color: #94a3b8; border: 1px solid #374151; }
.inv-exp-result--failure   .inv-exp-result__badge { background: rgba(239,68,68,.1);   color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.inv-exp-result__loot { font-size: 0.8rem; color: #94a3b8; line-height: 1.7; margin-top: 6px; }
.inv-exp-result__loot span { display: block; }
.inv-exp-result__close {
	margin-top: 10px;
	background: transparent;
	border: 1px solid #374151;
	color: #94a3b8;
	border-radius: 6px;
	padding: 5px 14px;
	cursor: pointer;
	font-size: 0.8rem;
}