/**
 * Egg Incubation Dock — MOBILE ONLY (<= 640px).
 *
 * Surfaces the Feed action + a live "time to hatch / next feed" counter for a
 * fresh egg (stage 0), so a new player is never left hunting for Feed inside the
 * Stats bottom-sheet. Fully additive: the JS relocates the real #inv-hub-feed-btn
 * into .inv-egg-dock__feed-slot, so all existing feed logic keeps working.
 *
 * Desktop is never touched (dock is only created on mobile + hidden below).
 */

.inv-egg-dock {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 76px; /* JS refines this to clear the bottom tabbar + safe-area */
	z-index: 500; /* above the hub's internal layers (z-10); below drawer (9450) */
	margin: 0 auto;
	max-width: 380px;
	padding: 13px 15px 11px;
	border-radius: 16px;
	background: linear-gradient( 180deg, rgba( 17, 24, 39, 0.97 ), rgba( 8, 13, 26, 0.98 ) );
	border: 1px solid rgba( 245, 158, 11, 0.38 );
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.6 ), 0 0 24px rgba( 245, 158, 11, 0.12 );
	color: #f5f7fa;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	animation: inv-egg-dock-in 0.38s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

@keyframes inv-egg-dock-in {
	from { opacity: 0; transform: translateY( 14px ); }
	to   { opacity: 1; transform: none; }
}

.inv-egg-dock__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #fcd34d;
}

.inv-egg-dock__egg {
	font-size: 21px;
	transform-origin: 50% 88%;
	animation: inv-egg-wobble 2.6s ease-in-out infinite;
}

@keyframes inv-egg-wobble {
	0%, 100% { transform: rotate( -5deg ); }
	50%      { transform: rotate( 5deg ); }
}

/* Incubation progress toward hatch (growth / 50). */
.inv-egg-dock__bar {
	position: relative;
	height: 22px;
	margin: 10px 0 11px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	overflow: hidden;
}

.inv-egg-dock__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	width: 0;
	border-radius: 11px;
	background: linear-gradient( 90deg, #f59e0b, #fbbf24 );
	box-shadow: 0 0 12px rgba( 245, 158, 11, 0.55 );
	transition: width 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.inv-egg-dock__bar-txt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.75 );
}

/* Live countdown line (cooldown / cap states). */
.inv-egg-dock__action {
	display: none;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #fcd34d;
	min-height: 22px;
}

.inv-egg-dock__action b {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.inv-egg-dock__timer-ic { margin-right: 3px; }

/* Feed button slot (holds the relocated real #inv-hub-feed-btn).
   ALWAYS visible while incubating, so a new player can always SEE where to
   feed — even while feed is on cooldown (button is just disabled then). */
.inv-egg-dock__feed-slot {
	display: flex;
	justify-content: center;
	margin-top: 2px;
}

.inv-egg-dock .inv-pet-hub__stat-act-btn--feed {
	width: 100%;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 12px;
	border: none;
	font-family: 'Rajdhani', sans-serif;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #1a1206;
	background: linear-gradient( 180deg, #fbbf24, #d97706 );
	box-shadow: 0 4px 16px rgba( 245, 158, 11, 0.45 );
}

/* Pulse only when the button is actually tappable. */
.inv-egg-dock .inv-pet-hub__stat-act-btn--feed:not( :disabled ) {
	animation: inv-egg-feed-pulse 1.6s ease-in-out infinite;
	cursor: pointer;
}

/* On cooldown / cap the button stays visible but reads as inactive. */
.inv-egg-dock .inv-pet-hub__stat-act-btn--feed:disabled {
	background: linear-gradient( 180deg, #3a4353, #2a323f );
	color: #9aa4b2;
	box-shadow: none;
	opacity: 0.9;
	cursor: default;
}

/* When disabled, hide the hub's raw "⏳ 239m" label and read simply as the
   (locked) Feed button — the live countdown lives in the caption above it. */
.inv-egg-dock .inv-pet-hub__stat-act-btn--feed:disabled .inv-pet-hub__stat-act-icon,
.inv-egg-dock .inv-pet-hub__stat-act-btn--feed:disabled .inv-pet-hub__stat-act-label {
	display: none;
}
.inv-egg-dock .inv-pet-hub__stat-act-btn--feed:disabled::before {
	content: "🔒 Feed";
}

@keyframes inv-egg-feed-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba( 245, 158, 11, 0.4 ); }
	50%      { box-shadow: 0 4px 26px rgba( 245, 158, 11, 0.78 ); }
}

.inv-egg-dock__hint {
	margin: 8px 2px 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: #9aa4b2;
	text-align: center;
}

/* Status caption is always shown (ready hint / live countdown / cap notice). */
.inv-egg-dock__action { display: block; }
.inv-egg-dock--cd .inv-egg-dock__action { font-size: 18px; }

/* Hatch-ready state: hide the feed slot, show full-width hatch button. */
.inv-egg-dock--hatch .inv-egg-dock__feed-slot { display: none; }

.inv-egg-dock__hatch-btn {
	display: block;
	width: 100%;
	padding: 13px 18px;
	margin-top: 4px;
	border-radius: 12px;
	border: none;
	font-family: Rajdhani, sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #080d1a;
	background: linear-gradient( 180deg, #fbbf24, #f59e0b );
	box-shadow: 0 4px 20px rgba( 245, 158, 11, 0.5 );
	cursor: pointer;
	animation: inv-egg-feed-pulse 1.2s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
}
.inv-egg-dock__hatch-btn:active {
	transform: scale( 0.97 );
	box-shadow: 0 2px 10px rgba( 245, 158, 11, 0.25 );
}

/* Never render on desktop — this is a mobile-only fix. */
@media ( min-width: 641px ) {
	.inv-egg-dock { display: none !important; }
}